備忘錄_20160105(定位)
修改
回首頁
程式 2025-07-26 09:38:24 1753493905 100
精準定位列印 Part IV - 方便模板
精準定位列印 Part IV - 方便模板
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>列印模板</title>
<style>html, body { margin: 0; border: 0; padding: 0; }</style>
</head>
<body>
<div id="divCssPage"></div>
<div id="divControlPanel">這裡是控制面板，裡面的元件自己安排，列印時會被隱藏起來。</div>
<div id="divPrinting"></div>
<script>
window.addEventListener("load", function() { example(); } );
function example()
{
// 設定紙張尺寸等相關資訊
var oData={
"iPaperWidthMM":297,
"iPaperHeightMM":210,
"strId_divCssPage":"divCssPage",
"strId_divControlPanel":"divControlPanel",
"strId_divPrinting":"divPrinting",
"strClassNameforHR":"classHr"};
// 設定列印時的尺寸
setCssPage(oData);
// 底下開始，一次一頁列印
oData.strText="戒<br>定<br>慧";
addOnePage(oData, addOnePageCore);
oData.strText="聞<br>思<br>修";
addOnePage(oData, addOnePageCore);
}
function addOnePageCore(oData, oDiv, oSvg)
{
oSvg.appendChild(
getOPrn_rect({strX:"11.95cm", strY:"5.95cm", strWidth:"1.4cm", strHeight:"4.6cm",
strFill:"rgba(0,0,0,0)", strStroke:"black", strStrokeWidth:"1px"}));
oDiv.appendChild(
getOPrn_free_text_v2({strLeft:"11.95cm", strTop:"5.95cm", strTextAlign:"left",
strFontFamily:"標楷體", strFontSize:"36pt", strFontWeight:"bold",
strText:oData.strText, strClassName:""}));
}
</script>
<script>
function setCssPage(oData)
{
document.getElementById(oData.strId_divCssPage).innerHTML
="<style>"
+"@page { size: "+oData.iPaperWidthMM+"mm"+" "+oData.iPaperHeightMM+"mm"+"; margin: 0; } "
+"@media print { #"+oData.strId_divCssPage+", #"+oData.strId_divControlPanel+", ."+oData.strClassNameforHR+" { display: none !important; } }"
+"</style>";
}
function addOnePage(oData, funcAddOnePageCore)
{
var oDiv=document.createElement("div");
oDiv.style.margin="0";
oDiv.style.border="0";
oDiv.style.padding="0";
oDiv.style.pageBreakAfter="always";
oDiv.style.pageBreakInside="avoid";
oDiv.style.breakInside="avoid";
oDiv.style.position="relative";
oDiv.style.top="0";
oDiv.style.left="0";
oDiv.style.width=oData.iPaperWidthMM+"mm";
oDiv.style.height=oData.iPaperHeightMM+"mm";
var oSvg=document.createElement("svg");
oSvg.style.position="absolute";
oSvg.style.left="0";
oSvg.style.top="0";
oSvg.setAttribute("width", oData.iPaperWidthMM+"mm");
oSvg.setAttribute("height", oData.iPaperHeightMM+"mm");
// ------ example begin ------
funcAddOnePageCore(oData, oDiv, oSvg);
// ------ example end ------
// 把 svg 埋在一頁的尾巴(線條是用 svg 模擬出來的)
var oDiv4Svg=document.createElement("div");
oDiv4Svg.setAttribute("style", "margin: 0; border: 0; padding: 0;");
oDiv4Svg.innerHTML=oSvg.outerHTML;
oDiv.appendChild(oDiv4Svg);
// 加入本頁
document.getElementById(oData.strId_divPrinting).appendChild(oDiv);
// 加上分隔線，列印時會隱藏
var oHr=document.createElement("hr");
oHr.setAttribute("class", oData.strClassNameforHR);
document.getElementById(oData.strId_divPrinting).appendChild(oHr);
}
// {strLeft:, strTop:, strTextAlign:"left", strFontFamily:, strFontSize:, strFontWeight:"normal", strText:, strClassName:}
function getOPrn_free_text_v2(oInfo) // 不限寬高範圍的文字
{
var oDiv=document.createElement("div");
oDiv.style.display="inline-block";
oDiv.style.position="absolute";
oDiv.style.margin="0";
oDiv.style.border="0";
oDiv.style.padding="0";
oDiv.style.left=oInfo.strLeft;
oDiv.style.top=oInfo.strTop;
oDiv.style.textAlign=oInfo.strTextAlign;
oDiv.style.fontFamily=oInfo.strFontFamily;
oDiv.style.fontSize=oInfo.strFontSize;
oDiv.style.fontWeight=oInfo.strFontWeight;
if(oInfo.strClassName!="") { oDiv.classList.add(oInfo.strClassName); }
oDiv.innerHTML=oInfo.strText;
return oDiv;
}
// {strLeft:, strTop:, strWidth:, strHeight:, strTextAlign:"left", strFontFamily:, strFontSize:, strFontWeight:"normal", strText:, strClassName:}
function getOPrn_box_text_v2(oInfo) // 限定寬高範圍的文字
{
var oDiv=document.createElement("div");
oDiv.style.display="block";
oDiv.style.width=oInfo.strWidth;
oDiv.style.height=oInfo.strHeight;
oDiv.style.wordBreak="break-all";
oDiv.style.overflow="hidden";
oDiv.style.position="absolute";
oDiv.style.margin="0";
oDiv.style.border="0";
oDiv.style.padding="0";
oDiv.style.left=oInfo.strLeft;
oDiv.style.top=oInfo.strTop;
oDiv.style.textAlign=oInfo.strTextAlign;
oDiv.style.fontFamily=oInfo.strFontFamily;
oDiv.style.fontSize=oInfo.strFontSize;
oDiv.style.fontWeight=oInfo.strFontWeight;
if(oInfo.strClassName!="") { oDiv.classList.add(oInfo.strClassName); }
oDiv.innerHTML=oInfo.strText;
return oDiv;
}
// {strX1:, strY1:, strX2:, strY2:, strStroke:"black", strStrokeWidth:"1px"}
function getOPrn_line(oInfo) // 畫線
{
var oLine=document.createElement("line");
oLine.setAttribute("x1",oInfo.strX1);
oLine.setAttribute("y1",oInfo.strY1);
oLine.setAttribute("x2",oInfo.strX2);
oLine.setAttribute("y2",oInfo.strY2);
oLine.setAttribute("stroke",oInfo.strStroke);
oLine.setAttribute("stroke-width",oInfo.strStrokeWidth);
return oLine;
}
// {strX:, strY:, strWidth:, strHeight:, strFill:"rgba(0,0,0,0)", strStroke:"black", strStrokeWidth:"1px"}
function getOPrn_rect(oInfo) // 畫矩形, rgba(0,0,0,0) 代表透明
{
var oRect=document.createElement("rect");
oRect.setAttribute("x",oInfo.strX);
oRect.setAttribute("y",oInfo.strY);
oRect.setAttribute("width",oInfo.strWidth);
oRect.setAttribute("height",oInfo.strHeight);
oRect.setAttribute("fill",oInfo.strFill);
oRect.setAttribute("stroke",oInfo.strStroke);
oRect.setAttribute("stroke-width",oInfo.strStrokeWidth);
return oRect;
}
</script>
</body>
</html>