備忘錄_20160105(定位)
修改
回首頁
程式 2023-05-23 21:11:03 1684847463 100
精準定位列印 Part II
精準定位列印 Part II
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>列印測試</title>
<style>
/* -- 最重要的 CSS 設定 -- */
*
{
margin: 0;
padding: 0;
}
@page
{
size: A4 portrait;
margin: 0
border: 0;
padding: 0;
}
div.onePage
{
margin: 0;
border: 0;
padding: 0;
page-break-after: always;
page-break-inside: avoid;
break-inside: avoid;
position: relative;
top: 0;
left: 0;
width: 210mm;
height: 297mm;
}
svg.classSvg
{
position: absolute;
left: 0cm;
top: 0cm;
}
@media print
{
@page { margin: 0; }
#divWrapper_htm, .classHr
{
display: none !important;
}
}
</style>
<style>
/* -- 其他 CSS 設定 -- */
#divWrapper_htm
{
margin: 1em;
}
#divWrapper_htm .classHeader
{
margin: 0 auto;
text-align: center;
}
.classHr
{
margin-top: 1em;
margin-bottom: 1em;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div id="divWrapper_htm">
<div class="classHeader">
<h2>列印測試</h2>
</div>
<br>
<div style="margin: 1em;">
<div>
<div>瀏覽器設定說明：</div>
<div>Firefox 113.0.1 (64bit)</div>
<ol>
<li>Paper Size:A4</li>
<li>Orientation:Portrait</li>
<li>Scale:100</li>
<li>Margins:None</li>
<li>Format:Original</li>
<li>Options:[unckecked]Print headers and footers</li>
<li>Options:[unckecked]Print backgrounds</li>
</ol>
</div>
<button type="button" onclick="print_test();" style="padding: 1em; margin: 1em; font-size: 1.3em;">執行測試</button>
</div>
<script>
function print_test()
{
gebi("divPrintTest").innerHTML="";
var iPages=20;
for(var iPageIdx=1; iPageIdx<=iPages; iPageIdx++)
{
var oDiv=document.createElement("div");
oDiv.classList.add("onePage");
var oSvg=document.createElement('svg');
oSvg.classList.add("classSvg");
oSvg.setAttribute("width","21.0cm");
oSvg.setAttribute("height","29.7cm");
// 繪製表格-垂直線
var straX=[];
for(var iTmp=1, iParts=2; iTmp<iParts; iTmp++) { straX.push(iTmp*210/iParts); }
for(var iX=0; iX<straX.length; iX++)
{ oSvg.appendChild(getOPrn_line(oSvg,straX[iX]+"mm","0mm",straX[iX]+"mm","297mm","black","0.2mm")); }
// 繪製表格-水平線
var straY=[];
for(var iTmp=1, iParts=7; iTmp<iParts; iTmp++) { straY.push(iTmp*297/iParts); }
for(var iY=0; iY<straY.length; iY++)
{ oSvg.appendChild(getOPrn_line(oSvg,"0mm",straY[iY]+"mm","210mm",straY[iY]+"mm","black","0.2mm")); }
// 不限範圍文字
oDiv.appendChild(getOPrn_text("10mm","10mm","標楷體","18pt","10mm,10mm test"));
oDiv.appendChild(getOPrn_text("150mm","10mm","新細明體","12pt","頁次："+iPageIdx+" / "+iPages));
// 限定範圍文字
oDiv.appendChild(getOPrn_box_text("20mm","30mm","新細明體","14pt","Hello, CSS and print! This is a box! Good! Great! Out of box!","40mm","20mm","left"));
// 把 svg 埋在一頁的尾巴(線條是用 svg 模擬出來的)
var oDiv4Svg=document.createElement("div");
oDiv4Svg.setAttribute("style","margin: 0; border: 0; padding: 0;");
oDiv4Svg.innerHTML=oSvg.outerHTML;
oDiv.appendChild(oDiv4Svg);
// 把一頁的 div 加入
gebi("divPrintTest").appendChild(oDiv);
// 分隔線，列印時會隱藏
var oHr=document.createElement("hr");
oHr.setAttribute("class","classHr");
gebi("divPrintTest").appendChild(oHr);
}
}
function getOPrn_line(oSvg,strX1,strY1,strX2,strY2,strStroke,strStrokeWidth)
{
// 畫線
var oLine=document.createElement("line");
oLine.setAttribute("x1",strX1);
oLine.setAttribute("y1",strY1);
oLine.setAttribute("x2",strX2);
oLine.setAttribute("y2",strY2);
oLine.setAttribute("stroke",strStroke);
oLine.setAttribute("stroke-width",strStrokeWidth);
return oLine;
}
function getOPrn_text(strLeft,strTop,strFontFamily,strFontSize,strText)
{
// 不限範圍文字
var oDiv=document.createElement("div");
oDiv.style.display="inline-block";
oDiv.style.position="absolute";
oDiv.style.left=strLeft;
oDiv.style.top=strTop;
oDiv.style.fontFamily=strFontFamily;
oDiv.style.fontSize=strFontSize;
oDiv.innerHTML=strText;
return oDiv;
}
function getOPrn_box_text(strLeft,strTop,strFontFamily,strFontSize,strText,strWidth,strHeight,strTextAlign)
{
// 限定範圍文字
var oDiv=document.createElement("div");
oDiv.style.display="block";
oDiv.style.width=strWidth;
oDiv.style.height=strHeight;
oDiv.style.margin="0";
oDiv.style.border="0";
oDiv.style.padding="0";
oDiv.style.position="absolute";
oDiv.style.left=strLeft;
oDiv.style.top=strTop;
oDiv.style.wordBreak="break-all";
oDiv.style.overflow="hidden";
oDiv.style.fontSize=strFontSize;
oDiv.style.textAlign=strTextAlign;
oDiv.innerHTML=strText;
return oDiv;
}
function gebi(strId)
{
return document.getElementById(strId);
}
</script>
</div>
<div id="divPrintTest"></div>
</body>
</html>