735 lines
30 KiB
Plaintext
735 lines
30 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="print_multi_new.aspx.cs" Inherits="admin_print_print_multi_new" %>
|
||
|
||
<!DOCTYPE html>
|
||
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head runat="server">
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<title></title>
|
||
<link href="~/js/bootstrap5/bootstrap.min.css" rel="stylesheet" />
|
||
<%--<link href="~/js/fontawesome6/css/all.css" rel="stylesheet" />--%>
|
||
<link href="~/js/mdi-font/css/materialdesignicons.min.css" rel="stylesheet" />
|
||
<link href="~/js/vuetify_ez.css" rel="stylesheet" />
|
||
<link href="~/js/sweetalert2/sweetalert2.min.css" rel="stylesheet" />
|
||
|
||
<link href="~/admin/Templates/TBS5ADM001/css/Style.css" rel="stylesheet" />
|
||
<link href="~/admin/item/css/floating.css" rel="stylesheet" />
|
||
<%--<link href="~/admin/item/css/tablet-design.css" rel="stylesheet" />--%>
|
||
</head>
|
||
<body>
|
||
|
||
<span class="btn btn-primary no-print" onclick="Printer.print()">列印</span>
|
||
<select id="paperSizeSel" onchange="Printer.render()">
|
||
<!-- onchange="Printer.render()"-->
|
||
<option value="">紙張尺寸</option>
|
||
</select>
|
||
<div class="d-flex full-home no-print" style="height: auto;width:100%;">
|
||
<div id="printArea" class="printArea" style="width: auto; height: auto">
|
||
|
||
<%-- <div class="tablet-paper">
|
||
</div>--%>
|
||
<%-- </div>--%>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div id="customMenu" style="display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; z-index: 1000; opacity: 1;">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<div class="form-floating mb-3">
|
||
<input type="text" id="textX" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
|
||
<label class="small" for="textX">X軸位置</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="form-floating mb-3">
|
||
<input type="text" id="textY" class="form-control form-control-sm mb-2" onchange="Printer.changeLocation()" />
|
||
<label class="small" for="textY">Y軸位置</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="form-floating mb-3">
|
||
<input type="text" id="fontSize" class="form-control form-control-sm mb-2" onchange="Printer.changeSize()" />
|
||
<label class="small" for="fontSize">字體大小</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="form-floating mb-3">
|
||
<input type="text" id="textWidth" class="form-control form-control-sm mb-2" onchange="Printer.changeWidth()" />
|
||
<label class="small" for="textWidth">文字寬度</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<form id="form1" runat="server">
|
||
</form>
|
||
</body>
|
||
<script src="<%=ResolveUrl("~/js/bootstrap5/js/bootstrap.bundle.min.js")%>"></script>
|
||
<script src="<%=ResolveUrl("~/js/jquery-4.0.0.min.js")%>"></script>
|
||
<script src="<%=ResolveUrl("~/js/vue.min.js")%>"></script>
|
||
<script src="<%=ResolveUrl("~/js/vuetify.min.js")%>"></script>
|
||
<script src="<%=ResolveUrl("~/js/axios.min.js")%>"></script>
|
||
<script src="<%=ResolveUrl("~/js/moment.min.js")%>"></script>
|
||
<script src="<%=ResolveUrl("~/js/sweetalert2/sweetalert2.all.min.js") %>"></script>
|
||
<script src="<%=ResolveUrl("~/admin/Templates/TBS5ADM001/js/Script.js")%>"></script>
|
||
<script src="<%=ResolveUrl("~/admin/item/jquery-ui/jquery-ui.min.js")%>"></script>
|
||
<script>
|
||
// 建立 MutationObserver 實例，並傳入 callback 函式
|
||
|
||
const Printer = {
|
||
selected: null,
|
||
http_host: "",
|
||
pageStyle: "",
|
||
pSize:"",
|
||
allStyle: [],
|
||
allSize: [],
|
||
allStyleDetails: [],
|
||
printData: [],
|
||
tabletElement: [],
|
||
observer: null,
|
||
isInit:true,
|
||
bg: [
|
||
{ name: "黃1", path: "../../admin/print/html/tablet-1_new.svg" },
|
||
{ name: "黃2", path: "../../admin/print/html/tablet-1B_new.svg" },
|
||
{ name: "紅1", path: "../../admin/print/html/tablet-2.svg" },
|
||
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
|
||
],
|
||
async init() {
|
||
|
||
let HTTP_HOST = "<%=UrlHost()%>";
|
||
this.http_host = HTTP_HOST;
|
||
//
|
||
Promise.all([
|
||
this.getActItem(),
|
||
this.getPaperSize(),
|
||
]).then(() => {
|
||
Promise.all([
|
||
this.getTabletElement(),
|
||
this.getTabletStyles(),
|
||
this.getAllStyleDetails(),
|
||
this.getData(),
|
||
|
||
]).then(() => {
|
||
this.render();
|
||
})
|
||
})
|
||
},
|
||
async getActItem() {
|
||
axios
|
||
.post('/api/tablet/GetActItem', { itemNum: localStorage.getItem("item") })
|
||
.then(response => {
|
||
if (response.data.result == "Y" && response.data.data) {
|
||
this.pSize = response.data.data.printSize;
|
||
$("#paperSizeSel").val(this.pSize);
|
||
} else {
|
||
$("#paperSizeSel").val("0001");
|
||
}
|
||
//$("#paperSizeSel").trigger('change');
|
||
//this.render();
|
||
//this.print();
|
||
//this.isInit = false;
|
||
}
|
||
);
|
||
},
|
||
async getAllStyleDetails() {
|
||
await axios
|
||
.post(this.http_host + 'api/tablet/GetStyleDetailData', {})
|
||
.then(response => {
|
||
if (response.status == "200") {
|
||
let data = response.data;
|
||
if (data.result == "Y") {
|
||
let details = data.data;
|
||
this.allStyleDetails = details;
|
||
//console.log(data.data);
|
||
}
|
||
}
|
||
}
|
||
);
|
||
},
|
||
async getPaperSize() {
|
||
let self = this
|
||
await axios
|
||
.post(this.http_host + 'api/tablet/GetPaperSize', {})
|
||
.then(response => {
|
||
//if (response.result=="Y") {
|
||
if (response.status == "200") {
|
||
let data = response.data;
|
||
this.allSize = data.data;
|
||
//console.log(this.allSize);
|
||
if (this.allSize) {
|
||
this.allSize.forEach(x => {
|
||
$("#paperSizeSel").append(`<option value="${x.paperID}">${x.paperName}</option>`);
|
||
})
|
||
//if (this.printSize) {
|
||
// $("#paperSizeSel").val(this.printSize);
|
||
//} else {
|
||
// $("#paperSizeSel").val("0003")
|
||
//}
|
||
}
|
||
}
|
||
//$("#paperSizeSel").val("0003");
|
||
}
|
||
)
|
||
},
|
||
async getTabletElement() {
|
||
await axios
|
||
.post(this.http_host + 'api/tablet/GetTabletElement', {})
|
||
.then(response => {
|
||
//if (response.result=="Y") {
|
||
if (response.status == "200") {
|
||
let data = response.data;
|
||
this.tabletElement = data.data;
|
||
}
|
||
});
|
||
},
|
||
async getTabletStyles() {
|
||
await axios
|
||
.post(this.http_host + 'api/tablet/GetStyleData', {})
|
||
.then(response => {
|
||
if (response.status == "200") {
|
||
let data = response.data;
|
||
this.allStyle = data.data;
|
||
}
|
||
});
|
||
},
|
||
async getData() {
|
||
let list = localStorage.getItem("list")
|
||
let param = [];
|
||
let data = JSON.parse(list)
|
||
data.forEach(x => {
|
||
param.push({ order_no: x.order_no, num: x.num });
|
||
});
|
||
await axios
|
||
.post(this.http_host + 'api/orderdetail/GetDetailToPrint', { param: param })
|
||
.then(response => {
|
||
|
||
if (response.status == 200) {
|
||
this.printData = response.data;
|
||
|
||
//this.render();
|
||
//this.print();
|
||
}
|
||
});
|
||
},
|
||
render() {
|
||
//console.log(this.pSize)
|
||
//if (this.isInit) {
|
||
// return false;
|
||
//}
|
||
$("#printArea").empty();
|
||
let self = this;
|
||
let canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
|
||
let nowPageWidth = 0;
|
||
let tabletpaper;
|
||
this.printData.forEach(x => {
|
||
if ($("#paperSizeSel").val() == "") {
|
||
if (this.pSize&&this.pSize!=undefined) {
|
||
$("#paperSizeSel").val(this.pSize);
|
||
} else {
|
||
$("#paperSizeSel").val("0003");
|
||
}
|
||
}
|
||
let style = self.allStyle.find(y => y.styleID == x.style);
|
||
let size = self.allSize.find(y => y.paperID == style.paperSize);
|
||
let pageSize = self.allSize.find(y => y.paperID == $("#paperSizeSel").val());
|
||
let printSize = self.allSize.find(y => y.paperID ==style.printSize);
|
||
if ((nowPageWidth + parseFloat(printSize.width)) > pageSize.width) {
|
||
//$(canvas).css("width", printSize.width + "mm");
|
||
//$(canvas).css("height", printSize.height + "mm");
|
||
//$(canvas).css("justify-content", "center");
|
||
//$(canvas).css("break-after", "page");
|
||
//$(canvas).css("page-break-after", "always");
|
||
$(canvas).append(tabletpaper);
|
||
$("#printArea").append(canvas);
|
||
canvas = $(` <div class="canvas-area flex-grow-1 overflow-auto d-flex flex-row align-items-center position-relative" ></div>`)
|
||
nowPageWidth = 0;
|
||
}
|
||
nowPageWidth = nowPageWidth + parseFloat(printSize.width);
|
||
tabletpaper = $(` <div class="tablet-paper">
|
||
</div>`)
|
||
let img = self.bg.find(y => y.name == style.backendImg);
|
||
/*tabletpaper.css({
|
||
"background-color": "white",
|
||
width: size.width + 'mm',
|
||
height: size.height + 'mm',
|
||
position: "relative",
|
||
"margin-bottom": "0",
|
||
"background-image": `url(${img.path})`,
|
||
'background-size': '100% 100%',
|
||
"break-after": "page",
|
||
"page-break-after": "always"
|
||
});*/
|
||
let tablet = JSON.parse(x.f_num_tablet);
|
||
|
||
let mid_items = tablet.mid_items;
|
||
let left_items = tablet.left_items;
|
||
|
||
let details = this.allStyleDetails.filter(y => y.styleID == x.style);
|
||
let mid = [];
|
||
mid_items.forEach(y => {
|
||
mid.push(y.fam_name);
|
||
});
|
||
let left = []
|
||
if (left_items) {
|
||
left_items.forEach(y => {
|
||
left.push(y.fam_name);
|
||
});
|
||
}
|
||
|
||
details.forEach(d => {
|
||
if (d.isActive != "hidden") {
|
||
let newFontSize = self.scaleFontSize(mid, d.fontSize, d.width);
|
||
|
||
let html = "";
|
||
let alive = "";
|
||
let yang = "";
|
||
let bi = "";
|
||
if (d.elementID === 'title1') {
|
||
let $namelist = $(`<div class='nameList'></div>`).css({
|
||
"writing-mode": "vertical rl",
|
||
display: "flex",
|
||
"flex-direction": "row",
|
||
"flex-wrap": "wrap",
|
||
margin: "auto",
|
||
width: `${d.width}px`,
|
||
height: `${d.height}px`,
|
||
border: "0px solid #ccc",
|
||
padding: "1px",
|
||
"font-family": style.fontFamily,
|
||
"letter-spacing": "0.1em",
|
||
"column-gap": "1px",
|
||
"row-gap": "1px",
|
||
"align-items": "center",
|
||
"justify-content": "space-between",
|
||
});
|
||
|
||
mid.forEach(z => {
|
||
let info = self.getTextInfo(z, newFontSize);
|
||
let spanWidth = mid.length > 1 ? newFontSize : d.width
|
||
let height = d.textHeight;
|
||
if (info.width >= d.textHeight) {
|
||
height = d.height;
|
||
}
|
||
let $span = $(`<span>${z}</span>`).css({
|
||
display: "block",
|
||
"min-height": `${height}px`,
|
||
"max-height": `${d.height}px`,
|
||
"max-width": `${spanWidth}px`,
|
||
//width: `${newFontSize}px`,
|
||
"text-align": "justify",
|
||
"text-align-last": "justify",
|
||
"margin-bottom": "40px",
|
||
"margin-left": "5px",
|
||
"text-justify": "inter-character",
|
||
//"justify-content":"center"
|
||
});
|
||
$namelist.append($span);
|
||
});
|
||
|
||
html = $namelist;
|
||
} else if (d.elementID === "alive") {
|
||
html = self.renderLiveList(left, d);
|
||
|
||
newFontSize = d.fontSize;
|
||
}
|
||
|
||
let content = $(`<div class="tablet-element vertical-text "></div>`)
|
||
.css({
|
||
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'px',
|
||
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
|
||
"align-items":"center"
|
||
|
||
})
|
||
.html(html);
|
||
tabletpaper.append(content);
|
||
html = "";
|
||
alive = "";
|
||
yang = "";
|
||
bi = "";
|
||
}
|
||
|
||
})
|
||
|
||
self.pageStyle = `<style id="pageStyle">
|
||
{
|
||
-webkit-print-color-adjust: exact !important;
|
||
print-color-adjust: exact !important;
|
||
color-adjust: exact !important;
|
||
}
|
||
.vertical-text {
|
||
writing-mode: vertical-rl !important;
|
||
-webkit-writing-mode: vertical-rl !important;
|
||
text-orientation: mixed !important;
|
||
}
|
||
@media print{
|
||
:host {
|
||
width:auto !important;
|
||
height:auto !important;
|
||
}
|
||
@page {
|
||
size:${pageSize.width}mm ${pageSize.height}mm !important;
|
||
margin:0;
|
||
}
|
||
html, body, form, .full-home, #printArea, .canvas-area {
|
||
height: auto !important;
|
||
width: auto !important;
|
||
overflow: visible !important; /*必須為 visible */
|
||
margin: 0 !important;
|
||
padding: 0 !important;
|
||
display: block !important;
|
||
}
|
||
.no-print, #customMenu {
|
||
display: none !important;
|
||
}
|
||
|
||
|
||
.canvas-area{
|
||
display:flex !important;
|
||
flex-direction: row !important;
|
||
}
|
||
.no-print, #customMenu {
|
||
display: none !important;
|
||
}
|
||
.tablet-paper {
|
||
position: relative !important;
|
||
display: block !important;
|
||
break-after: page !important;
|
||
page-break-after: always !important;
|
||
margin: 0 !important;
|
||
border: none !important;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.tablet-element {
|
||
position: absolute !important;
|
||
white-space: normal;
|
||
color: black !important; /* 確保文字是黑色的 */
|
||
}
|
||
|
||
}
|
||
|
||
/* 名單金字塔佈局容器 */
|
||
.roster-container {
|
||
width: 100%; height: 100%;
|
||
writing-mode: vertical-rl; /* 直書 */
|
||
display: flex;
|
||
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
|
||
flex-direction: row; /* 上下分層 (Top / Bottom) */
|
||
align-items: center; /* 左右置中對齊 */
|
||
justify-content: center;
|
||
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
|
||
}
|
||
|
||
.roster-row {
|
||
display: flex;
|
||
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
|
||
justify-content: center;
|
||
gap: 8px; /* 名字之間的間距 */
|
||
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
|
||
}
|
||
|
||
.name-group {
|
||
display: flex;
|
||
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* gap 由 HTML 動態綁定 */
|
||
}
|
||
|
||
.roster-name {
|
||
text-orientation: upright;
|
||
/*font-weight: bold;*/
|
||
white-space: normal;
|
||
line-height: 1.2;
|
||
font-family: DFKai-sb;
|
||
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
|
||
width: fit-content;
|
||
}
|
||
|
||
/* 【修復底圖沒出現】強制印出背景設定 */
|
||
* {
|
||
-webkit-print-color-adjust: exact !important;
|
||
print-color-adjust: exact !important;
|
||
color-adjust: exact !important;
|
||
}
|
||
.ancestor-wrapper {
|
||
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
|
||
writing-mode: horizontal-tb;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center; /* 水平置中 */
|
||
justify-content: center;
|
||
width: fit-content;
|
||
}
|
||
|
||
.main-name {
|
||
line-height: 1.2;
|
||
/* 保持大字 */
|
||
}
|
||
|
||
.sub-text {
|
||
font-size: 0.6em; /* 縮小字體 */
|
||
line-height: 1.2;
|
||
margin-top: 4px; /* 與上方林張的間距 */
|
||
white-space: normal; /* 避免自動換行 */
|
||
writing-mode:vertical-rl
|
||
}
|
||
|
||
.canvas-area{
|
||
width: ${printSize.width}mm;
|
||
height: ${printSize.height}mm;
|
||
justify-content: center;
|
||
break-after: page;
|
||
page-break-after: always;
|
||
}
|
||
.tablet-paper{
|
||
background-color: white;
|
||
width: ${size.width}mm !important;
|
||
height: ${ size.height }mm !important;
|
||
position: relative;
|
||
margin-bottom: 0;
|
||
background-image: url(${ img.path });
|
||
background-size: 100% 100%;
|
||
break-after: page;
|
||
page-break-after: always;
|
||
}
|
||
.tablet-element {
|
||
cursor: move;
|
||
padding: 4px;
|
||
color: black !important; /* 強制墨水為黑色 */
|
||
border: 1px solid transparent;
|
||
transition: writing-mode 0.3s, transform 0.2s;
|
||
}
|
||
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
|
||
.tablet-paper:last-child { page-break-after: auto; }
|
||
</style>
|
||
`
|
||
$("#pageStyle").remove();
|
||
$("head").append(self.pageStyle);
|
||
$(canvas).append(tabletpaper);
|
||
//$(canvas).css("width", printSize.width + "mm");
|
||
//$(canvas).css("height", printSize.height + "mm");
|
||
//$(canvas).css("justify-content", "center");
|
||
$("#printArea").append(canvas);
|
||
});
|
||
$(".tablet-element").draggable({
|
||
start(e, ui) {
|
||
//console.log("gogogogo");
|
||
},
|
||
stop(e, ui) {
|
||
//console.log(ui.position.left, ui.position.top);
|
||
}
|
||
});
|
||
|
||
$(".tablet-element").on("click", function (e) {
|
||
e.preventDefault();
|
||
self.selected = $(this);
|
||
let fontSize = $(this).css("fontSize");
|
||
let fontFamily = $(this).css("fontFamily");
|
||
let left = $(this).css("left");
|
||
let top = $(this).css("top");
|
||
});
|
||
|
||
$(".tablet-element").on("contextmenu", function (e) {
|
||
e.preventDefault();
|
||
self.selected = $(this);
|
||
let fontSize = $(this).css("font-size");
|
||
let fontFamily = $(this).css("font-family");
|
||
console.log($(this).css("font-size"));
|
||
let textWidth = $(this).find("span").first().css("width");
|
||
let left = $(this).css("left");
|
||
let top = $(this).css("top");
|
||
$("#customMenu").css({
|
||
top: e.pageY + "px",
|
||
left: (e.pageX + 30) + "px"
|
||
});
|
||
left = left.replace("px", "");
|
||
top = top.replace("px", "");
|
||
$("#textX").val(self.fix2(left * 0.265));
|
||
$("#textY").val(self.fix2(top * 0.265));
|
||
$("#fontSize").val(fontSize);
|
||
$("#textWidth").val(textWidth);
|
||
$("#customMenu").show();
|
||
});
|
||
|
||
|
||
},
|
||
fix2(val) {
|
||
return Number.parseFloat(val).toFixed(2);
|
||
},
|
||
renderLiveList(names, el) {
|
||
let $namelist = $(`<div class='liveList'></div>`).css({
|
||
"writing-mode": "vertical rl",
|
||
display: "flex",
|
||
"flex-direction": "row",
|
||
"flex-wrap": "wrap",
|
||
margin: "auto",
|
||
width: `${el.width}px`,
|
||
height: `${el.height}px`,
|
||
border: "0px solid #ccc",
|
||
padding: "1px",
|
||
"font-family": el.fontFamily,
|
||
"letter-spacing": "0.1em",
|
||
"column-gap": "1px",
|
||
"row-gap": "1px",
|
||
"align-items": "center",
|
||
});
|
||
let self = this;
|
||
names.forEach(n => {
|
||
$namelist.append(self.renderLiveSpan(n, el))
|
||
})
|
||
return $namelist;
|
||
},
|
||
renderLiveSpan(name, el) {
|
||
return $(`<span>${name}</span>`).css({
|
||
display: "block",
|
||
"min-height": `${el.textHeight}px`,
|
||
"max-height": `${el.height}px`,
|
||
width: `${el.textWidth}px`,
|
||
height: `${el.textHeight}px`,
|
||
"text-align": "justify",
|
||
"text-align-last": "justify",
|
||
"margin-bottom": "15px",
|
||
"text-justify": "inter-character",
|
||
});
|
||
},
|
||
getTextInfo(text,font) {
|
||
const canvas = document.createElement("canvas");
|
||
const context = canvas.getContext("2d");
|
||
context.font = font;
|
||
const metrics = context.measureText(text);
|
||
return metrics
|
||
},
|
||
getTextWidth(text,font) {
|
||
const canvas = document.createElement("canvas");
|
||
const context = canvas.getContext("2d");
|
||
context.font = font;
|
||
const metrics = context.measureText(text);
|
||
|
||
return metrics;
|
||
},
|
||
getTextSize(txt, fontsize) {
|
||
let span = document.createElement("span");
|
||
span.style.visibility = "hidden";
|
||
span.style.position = "absolute";
|
||
span.style.fontSize = fontsize + "px";
|
||
span.style.fontFamily = "";
|
||
span.innerText = txt;
|
||
document.body.appendChild(span);
|
||
let result = {
|
||
width: span.offsetWidth,
|
||
height: span.offsetHeight
|
||
}
|
||
document.body.removeChild(span);
|
||
return result;
|
||
},
|
||
scaleFontSize(txtContent, fontSize,elementWidth) {
|
||
|
||
let font = this.getTextSize("講", parseInt(fontSize));
|
||
//自動判斷縮小字型的規則,要同時縮小間距
|
||
|
||
//if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
|
||
if ((Math.ceil(txtContent.length / 2) * font.width)*2 > parseFloat(elementWidth)) {
|
||
let newfontSize = parseInt(fontSize) - 1;
|
||
//console.log("newfontSize:",newfontSize)
|
||
return this.scaleFontSize(txtContent, newfontSize,elementWidth);
|
||
}
|
||
return fontSize;
|
||
},
|
||
breakWord(txtContent, style, dStyle) {
|
||
//自動判斷斷字
|
||
//1. by 特定字 2.by長度
|
||
|
||
},
|
||
async changeLocation() {
|
||
$(this.selected).css("left", $("#textX").val() + "mm");
|
||
$(this.selected).css("top", $("#textY").val() + "mm");
|
||
},
|
||
async changeSize() {
|
||
$(this.selected).css("font-size", $("#fontSize").val())
|
||
},
|
||
async changeWidth() {
|
||
let nameList = $(this.selected).find(".nameList").first();
|
||
|
||
if (nameList) {
|
||
let spans = $(nameList).find("span");
|
||
if (spans) {
|
||
spans.each(function (index, x) {
|
||
$(x).css("width", $("#textWidth").val())
|
||
});
|
||
|
||
}
|
||
}
|
||
let liveList = $(this.selected).find(".liveList").first();
|
||
if (liveList) {
|
||
let spans = $(liveList).find("span");
|
||
if (spans) {
|
||
spans.each(function (index, x) {
|
||
$(x).css("width", $("#textWidth").val())
|
||
});
|
||
|
||
}
|
||
}
|
||
},
|
||
print() {
|
||
|
||
//let pageSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
|
||
//let printSize = this.allSize.find(x => x.paperID == $("#paperSizeSel").val());
|
||
//console.log("a:",pageSize," b:",printSize);
|
||
let w = window.open('', '_blank');
|
||
if (!w) {
|
||
alert("請允許瀏覽器開啟彈出式視窗！");
|
||
return;
|
||
}
|
||
|
||
// 1. 抓取您原本網頁定義的 HTTP_HOST (您的全域變數)，如果沒有則抓取當前網址
|
||
let hostUrl = typeof this.http_host !== 'undefined' ? this.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">
|
||
${this.pageStyle}
|
||
|
||
|
||
</head>
|
||
<body>
|
||
${canvasHtml}
|
||
</body>
|
||
</html>
|
||
`;
|
||
|
||
w.document.write(htmlContent);
|
||
w.document.close();
|
||
|
||
// 5. 將等待時間稍微拉長至 1.2 秒，確保大張的 SVG 底圖與外部字體(如標楷體)下載完畢
|
||
setTimeout(() => {
|
||
w.focus();
|
||
w.print();
|
||
}, 1200);
|
||
},
|
||
}
|
||
$(document).click(function (e) {
|
||
if (!$("#customMenu").is(e.target) && $("#customMenu").has(e.target).length === 0) {
|
||
$("#customMenu").hide();
|
||
}
|
||
});
|
||
$(() => Printer.init());
|
||
</script>
|
||
|
||
|
||
</html>
|