預覽
This commit is contained in:
@@ -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">
|
||||
@import "css/styles.css";
|
||||
@import "css/tablet-design.css";
|
||||
@import "css/floating.css";
|
||||
</style>--%>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
|
||||
|
||||
</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>")
|
||||
$("#printSize").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.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"));
|
||||
let size = self.allSize.find(x => x.name == style.paperSize);
|
||||
self.paper.width = size.width;
|
||||
self.paper.height = size.height;
|
||||
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()
|
||||
@@ -751,7 +894,7 @@
|
||||
let detail = [
|
||||
|
||||
];
|
||||
|
||||
|
||||
this.elements.forEach((el) => {
|
||||
detail.push({
|
||||
elementID: el.id, startX: el.x.toString(), startY: el.y.toString(), fontSize: el.style.fontSize, fontFamily: el.style.fontFamily,
|
||||
@@ -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(),
|
||||
|
||||
Reference in New Issue
Block a user