yiming/17168ERP
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

排版

Browse Source
This commit is contained in:
minom
2026-03-30 18:07:41 +08:00
parent ad1c99c3e9
commit f16b3e3678
1 changed files with 214 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
web/admin/print/print_multi_new.aspx
View File

@@ -23,7 +23,7 @@
}*/
html, body, form, .full-home, #printArea, .canvas-area {
height: auto !important;
width: 210mm !important;
width: auto !important;
overflow: visible !important; /*必須為 visible */
margin: 0 !important;
padding: 0 !important;
@@ -107,7 +107,7 @@
{ name: "紅2", path: "../../admin/print/html/tablet-2B.svg" }
],
async init() {
console.log("init");
let HTTP_HOST = "<%=UrlHost()%>";
this.http_host = HTTP_HOST;
await Promise.all([
@@ -197,13 +197,25 @@
render() {
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 => {
let style = this.allStyle.find(y => y.styleID == x.style);
console.log("style:", style);
let size = this.allSize.find(y => y.paperID == style.paperSize);
let style = self.allStyle.find(y => y.styleID == x.style);
let size = self.allSize.find(y => y.paperID == style.paperSize);
let tabletpaper = $(` <div class="tablet-paper">
if ((nowPageWidth + parseFloat(size.width)) > 297) {
$(canvas).css("width", "297" + "mm");
$(canvas).css("height", "210" + "mm");
$(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(size.width);
tabletpaper = $(` <div class="tablet-paper">
</div>`)
let img = self.bg.find(y => y.name == style.backendImg);
tabletpaper.css({
@@ -221,17 +233,20 @@
let mid_items = tablet.mid_items;
let left_items = tablet.left_items;
console.log("mid_items:", mid_items)
let details = this.allStyleDetails.filter(y => y.styleID == x.style);
let mid = [];
mid_items.forEach(y => {
mid.push(y.fam_name);
});
console.log("details:", details);
details.forEach(d => {
if (d.isActive != "hidden") {
console.log(d);
//console.log(d);
let { newFontSize, newTxtWidth } = self.scaleFontSize(mid, style, d)
let html = "";
if (d.elementID = 'title1') {
if (d.elementID === 'title1') {
let $namelist = $(`<div class='nameList'></div>`).css({
"writing-mode": "vertical rl",
display: "flex",
@@ -242,24 +257,29 @@
height: `${d.height}px`,
border: "0px solid #ccc",
padding: "1px",
"font-family": "Kaiti",
"font-family": "DFKai-sb",
"letter-spacing": "0.1em",
"column-gap": "1px",
"row-gap": "1px",
"align-items": "center",
"justify-content":"center"
});
mid.forEach(z => {
let $span = $(`<span>${z}</span>`).css({
display: "block",
"min-height": `${d.textHeight}px`,
"max-height": `${d.height}px`,
width: `${d.textWidth}px`,
//width: newTxtWidth +"px", //`${d.textWidth}px`,
"text-align": "justify",
"text-align-last": "justify",
"margin-bottom": "20px",
"margin-left": "5px",
"text-justify": "inter-character",
//"font-size": newFontSize + "px",
"z-index": 10000,
"word-break": "break-all"
});
$namelist.append($span);
});
@@ -267,28 +287,29 @@
html = $namelist;
}
console.log(mid, newFontSize, newTxtWidth)
let content = $(`<div class="tablet-element vertical-text "></div>`)
.css({
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: d.fontSize + 'pt', fontFamily: d.fontFamily, "z-index": 9999, visibility: d.isActive
position: "absolute", left: d.startX + "mm", top: d.startY + "mm", fontSize: newFontSize + 'pt',
fontFamily: d.fontFamily, "font-weight": "bold", "z-index": 9999, visibility: d.isActive,
//"text-align": "justify","text-align-last": "justify",
//position: "absolute", left: el.startX + "mm", top: el.startY + "mm", fontSize: el.fontSize + 'pt', fontFamily: el.fontFamily, "z-index": 9999, visibility: el.isActive
})
.html(html);
tabletpaper.append(content);
html = "";
}
})
$(canvas).append(tabletpaper);
console.log(size.width,size.height);
let pageStyle = `<style id="pageStyle">
let pageStyle = `<style id="pageStyle">
@media print{
:host {
width:auto !important;
height:auto !important;
}
@page {
size:210mm 297mm !important;
size:297mm 210mm landscape !important;
margin:0;
}
.tablet-paper {
@@ -301,45 +322,49 @@
margin: 0 !important;
border: none !important;
}
.tablet-paper .tablet-element .nameList{
justify-content:center !important;
}
.tablet-paper .tablet-element span{
word-break: break-all !important;
}
}
`
$("#pageStyle").remove();
$("head").append(pageStyle
);
$(canvas).css("width", "210" + "mm");
$(canvas).css("height","297"+ "mm");
$("head").append(pageStyle);
$(canvas).append(tabletpaper);
$(canvas).css("width", "297" + "mm");
$(canvas).css("height", "210" + "mm");
$("#printArea").append(canvas);
//this.bindKeyEvent();
});
$(".tablet-element").draggable({
start(e, ui) {
console.log("gogogogo");
//console.log("gogogogo");
},
stop(e, ui) {
console.log(ui.position.left, ui.position.top);
//console.log(ui.position.left, ui.position.top);
}
});
$(".tablet-element").on("click", function (e) {
e.preventDefault();
console.log(this);
self.selected = $(this);
let fontSize = $(this).css("fontSize");
let fontFamily = $(this).css("fontFamily");
let left = $(this).css("left");
let top = $(this).css("top");
console.log(fontSize, fontFamily, left, top);
});
$(".tablet-element").on("contextmenu", function (e) {
e.preventDefault();
console.log(this);
self.selected = $(this);
let fontSize = $(this).css("fontSize");
let fontFamily = $(this).css("fontFamily");
let textWidth = $(this).find("span").first().css("width");
let left = $(this).css("left");
let top = $(this).css("top");
console.log(fontSize, fontFamily, left, top);
$("#customMenu").css({
top: e.pageY + "px",
left: (e.pageX + 30) + "px"
@@ -349,16 +374,69 @@
$("#textX").val(self.fix2(left * 0.265));
$("#textY").val(self.fix2(top * 0.265));
$("#fontSize").val(fontSize);
//$("#textWidth").val("");
// Show the custom div
$("#textWidth").val(textWidth);
$("#customMenu").show();
});
},
fix2(val) {
return Number.parseFloat(val).toFixed(2);
},
getTextWidth(text,font) {
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics.width/2;
},
scaleFontSize(txtContent, style, dStyle) {
let newTxtWidth = dStyle.textWidth;
let newFontSize = dStyle.fontSize;
//console.log(newFontSize, newTxtWidth)
//自動判斷縮小字型的規則,要同時縮小間距
console.log("A:", dStyle, dStyle.fontSize)
if (dStyle.elementID === 'title1') {//表示是一般正名，也就是牌位正中間的一般格式，排法是上下上下
if (txtContent.length > 8) {//這要做成參數，讓使用者設定
switch (txtContent.length - 8) {
case 1:
case 2:
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 2) + " " + "DFKai-sb");
newFontSize = (parseInt(dStyle.fontSize) - 2);
break;
case 3:
case 4:
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 4) + " " + "DFKai-sb");
newFontSize = (parseInt(dStyle.fontSize) - 4);
break;
case 5:
case 6:
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 6) + " " + "DFKai-sb");
newFontSize = (parseInt(dStyle.fontSize) - 6);
break;
case 7:
case 8:
newTxtWidth = this.getTextWidth("講中文", (parseInt(dStyle.fontSize) - 8) + " " + "DFKai-sb");
newFontSize = (parseInt(dStyle.fontSize) - 8);
break;
default:
break;
}
}
}
//console.log(txtContent,style,dStyle)
//console.log(newFontSize,newTxtWidth)
return { newFontSize, newTxtWidth }
},
breakWord(txtContent, style, dStyle) {
//自動判斷斷字
//1. by 特定字 2.by長度
},
async changeLocation() {
console.log(this.selected);
$(this.selected).css("left", $("#textX").val() + "mm");
$(this.selected).css("top", $("#textY").val() + "mm");
},
@@ -367,11 +445,9 @@
},
async changeWidth() {
let nameList = $(this.selected).find(".nameList").first();
console.log("nameList:", nameList);
if (nameList) {
let spans = $(nameList).find("span");
console.log(spans);
if (spans) {
spans.each(function (index, x) {
$(x).css("width", $("#textWidth").val())
@@ -441,7 +517,7 @@
/* 關鍵：修正 Ctrl+P 空白問題 */
@media print {
@page {
size: 210mm 272mm portrait;
size: 297mm 210mm landscape;
margin: 0;
}
html, body, form, .full-home, #printArea, .canvas-area {
@@ -469,115 +545,115 @@
}
}
/* 元素排版樣式 */
.tablet-paper {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: 100% 100%;
/* 元素排版樣式 */
.tablet-paper {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tablet-element {
position: absolute !important;
white-space: nowrap;
}
.vertical-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
}
</style>
<style>
/* 名單金字塔佈局容器 */
.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: nowrap;
line-height: 1.2;
font-family: 'Kaiti', serif;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}
.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; /* 確保文字是黑色的 */
}
.tablet-element {
position: absolute !important;
white-space: nowrap;
.ancestor-wrapper {
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
writing-mode: horizontal-tb;
display: flex;
flex-direction: column;
align-items: center; /* 水平置中 */
justify-content: center;
width: fit-content;
}
.vertical-text {
writing-mode: vertical-rl !important;
-webkit-writing-mode: vertical-rl !important;
.main-name {
line-height: 1.2;
/* 保持大字 */
}
</style>
<style>
/* 名單金字塔佈局容器 */
.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; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
}
.sub-text {
font-size: 0.6em; /* 縮小字體 */
line-height: 1.2;
margin-top: 4px; /* 與上方林張的間距 */
white-space: nowrap; /* 避免自動換行 */
writing-mode:vertical-rl
}
.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: nowrap;
line-height: 1.2;
font-family: 'Kaiti', serif;
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
width: fit-content;
}
.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; /* 確保文字是黑色的 */
}
.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: nowrap; /* 避免自動換行 */
writing-mode:vertical-rl
}
</style>
</style>
</head>
<body>
${canvasHtml}