預覽

web/App_Code/DataAccess/StyleDataAccess.cs

@@ -32,7 +32,7 @@ public class StyleDataAccess
             {
                 StringBuilder sb = new StringBuilder();
                 var sp = new List<SqlParameter>();
-                sb.Append("insert into TabletPaperSize (PaperID,PaperName,Width,Height,CUser,CDate,CTime,UUser,UDate,UTime )");
+                sb.Append("insert into TabletPaperSize (PaperID,PaperName,Width,Height,CUser,CDate,CTime,UUser,UDate,UTime ) ");
                 sb.Append("values (@PaperID,@PaperName,@Width,@Height,@CUser,@CDate,@CTime,@UUser,@UDate,@UTime )");
                 sp.Add(new SqlParameter("@PaperID",tps.PaperID));
                 sp.Add(new SqlParameter("@PaperName", tps.PaperName));
@@ -44,7 +44,7 @@ public class StyleDataAccess
                 sp.Add(new SqlParameter("@UUser", tps.UUser));
                 sp.Add(new SqlParameter("@UDate", tps.UDate));
                 sp.Add(new SqlParameter("@UTime", tps.UTime));
-                context.Database.ExecuteSqlCommand(sb.ToString(),sp);
+                context.Database.ExecuteSqlCommand(sb.ToString(),sp.ToArray());
             }
         }
         catch (Exception ex)
@@ -253,7 +253,7 @@ public class StyleDataAccess
                 new SqlParameter("@UDate",""),
                 new SqlParameter("@UTime",""),
             };
-                    context.Database.ExecuteSqlCommand(sb.ToString(), sp1);
+                    context.Database.ExecuteSqlCommand(sb.ToString(), sp1.ToArray());
                 }
             }
         }

web/App_Code/api/designerController.cs

@@ -118,6 +118,9 @@ public class designerController : ApiController
             tsd.FontFamily = item.fontFamily == null ? "" : (string)item.fontFamily;
             tsd.BreakLen = item.breakLen == null ? "" : (string)item.breakLen;
             tsd.Width = item.width == null ? "" : (string)item.width;
+            tsd.Height = item.height == null ? "" : (string)item.height;
+            tsd.TextWidth = item.textWidth == null ? "" : (string)item.textWidth;
+            tsd.TextHeight = item.textHeight == null ? "" : (string)item.textHeight;
             tsd.TwoOffset = item.twoOffset == null ? "" : (string)item.twoOffset;
             tsd.ThreeOffset = item.threeOffset == null ? "" : (string)item.threeOffset;
             tsd.FourOffset = item.fourOffset == null ? "" : (string)item.fourOffset;
@@ -217,16 +220,20 @@ public class designerController : ApiController
         //json.detail.Children<JObject>()
         log.writeLogPath((string)json.styleName);
         TabletPaperSize tps = new TabletPaperSize();
-        tps.PaperID = (json == null || json.PaperID == null) ? "" : (string)json.PaperID;
+        tps.PaperID = (json == null || json.paperID == null) ? "" : (string)json.paperID;
         if (string.IsNullOrEmpty(tps.PaperID))
         {
             tps.PaperID = DateTime.Now.ToString("yyyyMMddHHmmss");
         }
-        tps.PaperName = (json == null || json.PaperName == null) ? "" : (string)json.PaperName;
+        tps.PaperName = (json == null || json.paperName == null) ? "" : (string)json.paperName;
-        tps.Width = (json == null || json.Width == null) ? "" : (string)json.Width;
+        tps.Width = (json == null || json.width == null) ? "" : (string)json.width;
-        tps.Height = (json == null || json.Height == null) ? "" : (string)json.Height;
+        tps.Height = (json == null || json.height == null) ? "" : (string)json.height;
-
+        tps.CUser = "";
-
+        tps.CDate = DateTime.Now.ToString("yyyyMMdd");
+        tps.CTime = DateTime.Now.ToString("HHmmss");
+        tps.UUser = "";
+        tps.UDate = DateTime.Now.ToString("yyyyMMdd");
+        tps.UTime = DateTime.Now.ToString("HHmmss");
 
         object[] obj = new StyleDataAccess().AddTabletPaper(tps);
 

web/admin/item/TabletDesigner.aspx

@@ -3,11 +3,8 @@
 <%@ Register Src="~/admin/_uc/alert.ascx" TagPrefix="uc1" TagName="alert" %>
 
 <asp:Content ID="Content1" ContentPlaceHolderID="page_header" runat="Server">
-    <%--    <style type="text/css">
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
-        @import "css/styles.css";
+  
-        @import "css/tablet-design.css";
-        @import "css/floating.css";
-    </style>--%>
 </asp:Content>
 
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
@@ -98,16 +95,17 @@
                     <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.saveStyle()">存檔</span>
                 </div>
                 <div class="col-6">
-                    <%--  <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="">存檔</span>--%>
+                   <span class="btn btn-sm btn-outline-info w-100 mb-2" onclick="Designer.print()">預覽列印</span>
                 </div>
             </div>
         </div>
-
+        <div id="printArea" style="width:100vw;height:100vh">
         <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-column align-items-center position-relative" id="canvas">
             <div class="tablet-paper">
                 <%--<div class="tablet-element vertical-text">嘿嘿</div>--%>
             </div>
         </div>
+       </div>
         <div id="attr-box" class="d-none p-2 bg-dark text-whit  floting-box" style="top: 80px; right: 20px">
             <div class="form-floating mb-3">
                 <textarea id="inp-text" class="form-control form-control-sm mb-2" rows="5"></textarea>
@@ -267,6 +265,137 @@
                 });
                 $("#paperOrientation").html("<span>直向</span>")
             },
+            exportPDF() {
+        
+                    // 1. 抓取您要轉成 PDF 的目標區塊 (這裡我們抓取整張牌位)
+                    // 注意：如果有分頁，您可能需要抓取包住所有 .tablet-paper 的外層容器
+                    const element = document.querySelector('.tablet-paper');
+
+                    // 如果畫面上有隱藏的滾動條或超出邊界的元素，可以先把它們推到最左上角
+                    // 確保截圖時不會被切到
+                    window.scrollTo(0, 0);
+
+                    // 2. 設定 PDF 參數
+                    const opt = {
+                        margin: 0,
+                        filename: '牌位設計.pdf',
+                        // 設定截圖的品質
+                        image: { type: 'jpeg', quality: 1 },
+                        // scale: 2 可以讓截圖解析度變高，印出來的文字不會糊糊的
+                        // useCORS: true 確保您的 SVG 底圖可以被正確讀取，不會因為跨域問題破圖
+                        html2canvas: { scale: 2, useCORS: true, logging: false },
+                        // 將 PDF 尺寸設定為您系統中的動態寬高
+                        jsPDF: {
+                            unit: 'mm',
+                            format: [this.paper.width, this.paper.height],
+                            orientation: 'portrait'
+                        }
+                    };
+
+                    // 3. 呼叫 html2pdf 執行轉換並下載
+                    html2pdf().set(opt).from(element).save().then(() => {
+                        console.log("PDF 匯出成功！");
+                    }).catch(err => {
+                        console.error("PDF 匯出失敗：", err);
+                    });
+                
+            },
+            print() {
+                let w = window.open('', '_blank');
+                if (!w) {
+                    alert("請允許瀏覽器開啟彈出式視窗！");
+                    return;
+                }
+
+                // 1. 抓取您原本網頁定義的 HTTP_HOST (您的全域變數)，如果沒有則抓取當前網址
+                let hostUrl = typeof HTTP_HOST !== 'undefined' ? HTTP_HOST : (window.location.protocol + "//" + window.location.host);
+                if (!hostUrl.endsWith('/')) hostUrl += '/';
+
+                // 2. 抓出畫布完整的 HTML
+                let canvasHtml = $("#printArea").html();
+
+                // 3. 【關鍵修復】把所有的 "../../" 替換成完整的網址，解決底圖破圖問題！
+                canvasHtml = canvasHtml.replace(/\.\.\/\.\.\//g, hostUrl);
+
+                // 4. 組合列印視窗的 HTML
+                let htmlContent = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+            <title>預覽列印 - 牌位設計</title>
+            <meta charset="utf-8">
+     
+          
+            <style>
+                /* =======================================
+                   暴力防護層：避免外部 CSS 載入失敗或被干擾
+                   ======================================= */
+                   
+                /* 【修復直書變橫書】強制寫入直書屬性 */
+                .vertical-text {
+                    writing-mode: vertical-rl !important;
+                    -webkit-writing-mode: vertical-rl !important;
+                    text-orientation: mixed !important;
+                }
+
+                /* 【修復底圖沒出現】強制印出背景設定 */
+                * {
+                    -webkit-print-color-adjust: exact !important;
+                    print-color-adjust: exact !important;
+                    color-adjust: exact !important;
+                }
+
+                /* 【修復排版沒照設定】覆寫原本 HTML 裡的 fixed，並防止 Bootstrap 洗掉 absolute */
+                .tablet-paper {
+                    position: relative !important; 
+                    margin: 0 auto !important;
+                    page-break-after: always !important; 
+                    box-shadow: none !important; 
+                    width: var(--page-w);
+                    height: var(--page-h);
+                }
+                
+                .tablet-element {
+                    position: absolute !important; /* 絕對不能被 Bootstrap 覆蓋為 static */
+                    color: black !important; /* 確保文字是黑色的 */
+                }
+
+                /* 列印時的紙張大小與頁面歸零 */
+                @media print {
+                    @page {
+                        /* 動態套用您設定的紙張寬高 */
+                        size: ${this.paper.width}mm ${this.paper.height}mm portrait; 
+                        margin: 0;
+                    }
+                    body, html {
+                        margin: 0 !important;
+                        padding: 0 !important;
+                        
+                    }
+                    body{
+                         --page-w: 210mm;
+                         --page-h: 297mm;
+                         --font-max: 22pt;
+                         --bg-padding: 0;
+                    }
+                }
+            </style>
+        </head>
+        <body>
+            ${canvasHtml}
+        </body>
+        </html>
+    `;
+
+                w.document.write(htmlContent);
+                w.document.close();
+
+                // 5. 將等待時間稍微拉長至 1.2 秒，確保大張的 SVG 底圖與外部字體(如標楷體)下載完畢
+                setTimeout(() => {
+                    w.focus();
+                    w.print();
+                }, 1200);
+            },
             changeOrientation() {
                 this.orientation = (this.orientation === "portrait" ? "land" : "portrait");
                 $("#paperOrientation").empty();
@@ -281,6 +410,7 @@
                     "background-color": "white",
                     width: this.paper.width + "mm",
                     height: this.paper.height + "mm",
+                    "background-repeat": "no-repeat!important",
                 });
             },
             async getPaperSize() {
@@ -300,8 +430,8 @@
                     });
                 $("#paperSize").append("<option value='newsize' >新增尺寸</option>")
                 this.allSize.forEach(x => {
-                    $("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>")
+                    $("#paperSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.name+"("+x.width + "*" + x.height + ")</option>")
-                    $("#printSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.width + "*" + x.height + "</option>");
+                    $("#printSize").append("<option value='" + x.name + "' " + x.selected + ">" + x.name+"("+x.width + "*" + x.height + ")</option>");
                 })
             },
             async getElements() {
@@ -348,9 +478,19 @@
                     self.styleID = e.target.getAttribute("data-value")
                     self.changeStyle(e.target.getAttribute("data-value"));
                     let style = self.allStyle.find(x => x.styleID == e.target.getAttribute("data-value"));
+                    if (style) {
                         let size = self.allSize.find(x => x.name == style.paperSize);
+                        if (size) {
                             self.paper.width = size.width;
                             self.paper.height = size.height;
+                        } else {
+                            self.paper.width = 100;
+                            self.paper.height = 272;
+                        }
+                    } else {
+                        self.paper.width = 100;
+                        self.paper.height = 272;
+                    }
 
                 });
             },
@@ -413,6 +553,9 @@
             changeBg() {
                 let path = this.bg.find(el => el.name == $("#backendInp").val())
                 $(".tablet-paper").css({ 'background-image': 'url(' + path.path + ')', 'background-size': '100% 100%' })
+            },
+            changePrintSize() {
+
             },
             changePaper() {
                 let paperSize = $("#paperSize").val()
@@ -759,7 +902,10 @@
                         isActive: el.style.visibility, width: el.width, height: el.height, textWidth: el.textWidth, textHeight: el.textHeight
                     });
                 });
-
+                let sID = this.styleID
+                if (sID == "20260310100234") {
+                    this.styleID=""
+                }
                 let master = {
                     styleID: this.styleID, styleName: $("#styleName").val(), paperSize: $("#paperSize").val(),
                     backendImg: $("#backendInp").val(), printSize: $("#printSize").val(), printMode: $("#printMode").val(),