精準定位列印 Part V - 方便類別
<!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={
"strUnit":"cm",
"fPaperWidth":29.7,
"fPaperHeight":21.0,
"fOffsetX":0,
"fOffsetY":0,
"strId_divCssPage":"divCssPage",
"strId_divControlPanel":"divControlPanel",
"strId_divPrinting":"divPrinting",
"strClassNameforHR":"classHr"};
var oPrn=new c_liujiaje_com_printer(oData);
oPrn.clearAll();
// 第一頁
var strText="戒<br>定<br>慧";
oPrn.beginPage();
oPrn.addRect({fX:11.95, fY:5.95, fWidth:1.4, fHeight:4.6, strFill:"rgba(0,0,0,0)", strStroke:"black", strStrokeWidth:"1px"});
oPrn.addFreeText({fLeft:11.95, fTop:5.95, strTextAlign:"left", strFontFamily:"標楷體", strFontSize:"36pt", strFontWeight:"bold", strText:strText, strClassName:""});
oPrn.endPage();
// 第二頁
var strText="聞<br>思<br>修";
oPrn.beginPage();
oPrn.addRect({fX:11.95, fY:5.95, fWidth:1.4, fHeight:4.6, strFill:"rgba(0,0,0,0)", strStroke:"black", strStrokeWidth:"1px"});
oPrn.addFreeText({fLeft:11.95, fTop:5.95, strTextAlign:"left", strFontFamily:"標楷體", strFontSize:"36pt", strFontWeight:"bold", strText:strText, strClassName:""});
oPrn.endPage();
}
</script>
<script>
class c_liujiaje_com_printer
{
oData=null;
oLastDiv=null;
oLastSvg=null;
gebi(strId) { return document.getElementById(strId); }
constructor(oData)
{
this.oData=oData;
this.gebi(this.oData.strId_divCssPage).innerHTML
="<style>"
+"@page { size: "+this.oData.fPaperWidth+this.oData.strUnit+" "+this.oData.fPaperHeight+this.oData.strUnit+"; margin: 0; } "
+"@media print { #"+this.oData.strId_divCssPage+", #"+this.oData.strId_divControlPanel+", ."+this.oData.strClassNameforHR+" { display: none !important; } }"
+"</style>";
}
clearAll()
{
this.gebi(this.oData.strId_divPrinting).innerHTML="";
}
beginPage()
{
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=this.oData.fPaperWidth+this.oData.strUnit;
oDiv.style.height=this.oData.fPaperHeight+this.oData.strUnit;
var oSvg=document.createElement("svg");
oSvg.style.position="absolute";
oSvg.style.left="0";
oSvg.style.top="0";
oSvg.setAttribute("width", this.oData.fPaperWidth+this.oData.strUnit);
oSvg.setAttribute("height", this.oData.fPaperHeight+this.oData.strUnit);
this.oLastDiv=oDiv;
this.oLastSvg=oSvg;
}
endPage()
{
// 把 svg 埋在一頁的尾巴(線條是用 svg 模擬出來的)
var oDiv4Svg=document.createElement("div");
oDiv4Svg.setAttribute("style", "margin: 0; border: 0; padding: 0;");
oDiv4Svg.innerHTML=this.oLastSvg.outerHTML;
this.oLastDiv.appendChild(oDiv4Svg);
// 加入本頁
this.gebi(this.oData.strId_divPrinting).appendChild(this.oLastDiv);
// 加上分隔線，列印時會隱藏
var oHr=document.createElement("hr");
oHr.setAttribute("class", this.oData.strClassNameforHR);
this.gebi(this.oData.strId_divPrinting).appendChild(oHr);
}
// {strLeft:, strTop:, strTextAlign:"left", strFontFamily:, strFontSize:, strFontWeight:"normal", strText:, strClassName:}
#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:}
#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"}
#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"}
#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;
}
// 不限寬高範圍的文字
// {fLeft:, fTop:, strTextAlign:"left", strFontFamily:, strFontSize:, strFontWeight:"normal", strText:, strClassName:}
addFreeText(oInfo)
{
var oInfo2={
strLeft:String(oInfo.fLeft+this.oData.fOffsetX)+this.oData.strUnit,
strTop:String(oInfo.fTop+this.oData.fOffsetY)+this.oData.strUnit,
strTextAlign:oInfo.strTextAlign,
strFontFamily:oInfo.strFontFamily,
strFontSize:oInfo.strFontSize,
strFontWeight:oInfo.strFontWeight,
strText:oInfo.strText,
strClassName:oInfo.strClassName};
this.oLastDiv.appendChild(this.#getOPrn_free_text_v2(oInfo2));
}
// 限定寬高範圍的文字
// {fLeft:, fTop:, fWidth:, fHeight:, strTextAlign:"left", strFontFamily:, strFontSize:, strFontWeight:"normal", strText:, strClassName:}
addBoxText(oInfo)
{
var oInfo2={
strLeft:String(oInfo.fLeft+this.oData.fOffsetX)+this.oData.strUnit,
strTop:String(oInfo.fTop+this.oData.fOffsetY)+this.oData.strUnit,
strWidth:String(oInfo.fWidth)+this.oData.strUnit,
strHeight:String(oInfo.fHeight)+this.oData.strUnit,
strTextAlign:oInfo.strTextAlign,
strFontFamily:oInfo.strFontFamily,
strFontSize:oInfo.strFontSize,
strFontWeight:oInfo.strFontWeight,
strText:oInfo.strText,
strClassName:oInfo.strClassName};
this.oLastDiv.appendChild(this.#getOPrn_box_text_v2(oInfo2));
}
// 畫線
// {fX1:, fY1:, fX2:, fY2:, strStroke:"black", strStrokeWidth:"1px"}
addLine(oInfo)
{
var oInfo2={
strX1:String(oInfo.fX1+this.oData.fOffsetX)+this.oData.strUnit,
strY1:String(oInfo.fY1+this.oData.fOffsetY)+this.oData.strUnit,
strX2:String(oInfo.fX2+this.oData.fOffsetX)+this.oData.strUnit,
strY2:String(oInfo.fY2+this.oData.fOffsetY)+this.oData.strUnit,
strStroke:oInfo.strStroke,
strStrokeWidth:oInfo.strStrokeWidth};
this.oLastSvg.appendChild(this.#getOPrn_line(oInfo2));
}
// 畫矩形, rgba(0,0,0,0) 代表透明
// {fX:, fY:, fWidth:, fHeight:, strFill:"rgba(0,0,0,0)", strStroke:"black", strStrokeWidth:"1px"}
addRect(oInfo)
{
var oInfo2={
strX:String(oInfo.fX+this.oData.fOffsetX)+this.oData.strUnit,
strY:String(oInfo.fY+this.oData.fOffsetY)+this.oData.strUnit,
strWidth:String(oInfo.fWidth)+this.oData.strUnit,
strHeight:String(oInfo.fHeight)+this.oData.strUnit,
strFill:oInfo.strFill,
strStroke:oInfo.strStroke,
strStrokeWidth:oInfo.strStrokeWidth};
this.oLastSvg.appendChild(this.#getOPrn_rect(oInfo2));
}
}
</script>
</body>
</html>
精準定位列印 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>
從 excel 到 sql ，遇到 line feed (LF) 的處理步驟。
場景 MySQL/MariaDB。
在 excel 中，要把 LF(line feed) 換成 "\n"，然後變成 SQL 的資料。
1.先把原有資料中的 "\"，換成 "\\"
2.再把 LF(line feed) 換成 "\n"
公式是 =SUBSTITUTE(SUBSTITUTE(A1, "\", "\\"), CHAR(10), "\n")
