js-table-print
Version:
一款智能打印插件，目标是处理表格的打印，实现自定义页头、页尾、水印、分页方式等
1 lines • 14.2 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("js-table-print",[],t):"object"==typeof exports?exports["js-table-print"]=t():e["js-table-print"]=t()}(window,(function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(e,t,n){"use strict";var i=n(2),r=n.n(i)()((function(e){return e[1]}));r.push([e.i,"@page {\n size: 210mm 297mm;\n margin: 0; }\n\n.A4 {\n width: 209mm;\n height: 296mm;\n padding: 15mm;\n page-break-inside: avoid; }\n .A4 .A4-content {\n width: 100%;\n height: 100%; }\n\n.table-print-root[landscape] .A4 {\n width: 296mm;\n height: 209mm; }\n\n@media print {\n body > *:not(.table-print-root) {\n display: none !important; }\n html, body {\n margin: 0 !important;\n padding: 0 !important;\n border: 0 !important;\n outline: 0 !important; } }\n\n@media screen {\n .table-print-src {\n position: relative;\n margin: 20px; }\n .A4 {\n border: 1px dashed red; }\n .A4 .A4-content {\n border: 1px dashed green;\n padding: 2px; } }\n\n.table-print-dialog {\n position: absolute;\n display: flex;\n flex-direction: column;\n align-items: center;\n z-index: 99;\n left: 0;\n top: 10px;\n width: 70%;\n height: 720px;\n background-color: white;\n overflow: scroll;\n transform: translateX(25%);\n box-shadow: 0px 0px 10px 2px #555;\n padding: 24px 4px; }\n .table-print-dialog * {\n position: relative;\n box-sizing: border-box; }\n .table-print-dialog .table-print-dialog-title {\n padding: 8px 0; }\n .table-print-dialog .table-print-dialog-btn-group {\n display: flex;\n justify-content: center;\n align-items: center; }\n .table-print-dialog .table-print-dialog-btn-group .table-print-dialog-btn-ok,\n .table-print-dialog .table-print-dialog-btn-group .table-print-dialog-btn-cancel {\n min-width: 32px;\n height: 32px;\n padding: 0 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #1890ff;\n color: white;\n border-radius: 4px;\n font-size: 14px; }\n .table-print-dialog .table-print-dialog-btn-group .table-print-dialog-btn-ok:not(:last-child),\n .table-print-dialog .table-print-dialog-btn-group .table-print-dialog-btn-cancel:not(:last-child) {\n margin-right: 4px; }\n\n.table-print-src .table-print-src-content {\n width: 100%;\n height: 100%; }\n\n.table-print-root {\n position: relative; }\n .table-print-root * {\n position: relative;\n box-sizing: border-box; }\n .table-print-root table {\n width: 100%;\n border: 2px solid black;\n border-collapse: collapse;\n border-spacing: 0; }\n .table-print-root table + table {\n border-top: 0; }\n .table-print-root th,\n .table-print-root td {\n padding: 10px;\n border-bottom: 1px solid black;\n border-right: 1px solid black; }\n .table-print-root th:last-child,\n .table-print-root td:last-child {\n border-right: 0; }\n .table-print-root tr:last-child td {\n border-bottom: 0; }\n .table-print-root h1,\n .table-print-root footer,\n .table-print-root header {\n text-align: center; }\n .table-print-root footer {\n position: absolute;\n bottom: -40px;\n left: 0;\n width: 100%;\n page-break-inside: avoid;\n z-index: 2; }\n\n.table-print-footer-content {\n text-align: center;\n font-size: 12px;\n width: 100%; }\n\n.table-print-header-content {\n text-align: center;\n font-size: 12px;\n width: 100%;\n border-bottom: 1px solid #888; }\n\n.table-print-water-box {\n position: absolute;\n z-index: 999;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 1px;\n height: 1px;\n transform-origin: center;\n left: 0;\n bottom: 0; }\n\n.table-print-water {\n width: 200px;\n height: 80px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 28px;\n color: #ccc;\n opacity: .8;\n border: 4px solid #ccc;\n position: absolute; }\n .table-print-water span {\n font-size: inherit;\n color: inherit; }\n",""]),t.a=r},function(e,t,n){"use strict";var i,r=function(){return void 0===i&&(i=Boolean(window&&document&&document.all&&!window.atob)),i},o=function(){var e={};return function(t){if(void 0===e[t]){var n=document.querySelector(t);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}e[t]=n}return e[t]}}(),a=[];function l(e){for(var t=-1,n=0;n<a.length;n++)if(a[n].identifier===e){t=n;break}return t}function d(e,t){for(var n={},i=[],r=0;r<e.length;r++){var o=e[r],d=t.base?o[0]+t.base:o[0],c=n[d]||0,s="".concat(d," ").concat(c);n[d]=c+1;var p=l(s),h={css:o[1],media:o[2],sourceMap:o[3]};-1!==p?(a[p].references++,a[p].updater(h)):a.push({identifier:s,updater:g(h,t),references:1}),i.push(s)}return i}function c(e){var t=document.createElement("style"),i=e.attributes||{};if(void 0===i.nonce){var r=n.nc;r&&(i.nonce=r)}if(Object.keys(i).forEach((function(e){t.setAttribute(e,i[e])})),"function"==typeof e.insert)e.insert(t);else{var a=o(e.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}return t}var s,p=(s=[],function(e,t){return s[e]=t,s.filter(Boolean).join("\n")});function h(e,t,n,i){var r=n?"":i.media?"@media ".concat(i.media," {").concat(i.css,"}"):i.css;if(e.styleSheet)e.styleSheet.cssText=p(t,r);else{var o=document.createTextNode(r),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(o,a[t]):e.appendChild(o)}}function u(e,t,n){var i=n.css,r=n.media,o=n.sourceMap;if(r?e.setAttribute("media",r):e.removeAttribute("media"),o&&"undefined"!=typeof btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var m=null,b=0;function g(e,t){var n,i,r;if(t.singleton){var o=b++;n=m||(m=c(t)),i=h.bind(null,n,o,!1),r=h.bind(null,n,o,!0)}else n=c(t),i=u.bind(null,n,t),r=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)};return i(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;i(e=t)}else r()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=r());var n=d(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var i=0;i<n.length;i++){var r=l(n[i]);a[r].references--}for(var o=d(e,t),c=0;c<n.length;c++){var s=l(n[c]);0===a[s].references&&(a[s].updater(),a.splice(s,1))}n=o}}}},function(e,t,n){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n=e(t);return t[2]?"@media ".concat(t[2]," {").concat(n,"}"):n})).join("")},t.i=function(e,n,i){"string"==typeof e&&(e=[[null,e,""]]);var r={};if(i)for(var o=0;o<this.length;o++){var a=this[o][0];null!=a&&(r[a]=!0)}for(var l=0;l<e.length;l++){var d=[].concat(e[l]);i&&r[d[0]]||(n&&(d[2]?d[2]="".concat(n," and ").concat(d[2]):d[2]=n),t.push(d))}},t}},function(e,t,n){"use strict";n.r(t);var i=n(1),r=n.n(i),o=n(0),a={insert:"head",singleton:!1};r()(o.a,a),o.a.locals;const l="table-print-root",d="table-print-src";t.default=class{constructor({landscape:e=!1,footer:t=null,header:n=null,children:i=[],water:r=null,debug:o=!1,waterHeight:a=0}){this.state={landscape:e,children:i,footer:t,header:n,water:r,debug:o,waterHeight:a},this.footer_default=document.createElement("p"),this.footer_default.className="table-print-footer-content",this.footer_default.innerHTML="@page/@total",this.dialog=null,this.oldPageSize=null}getDomHeight(e){let t=e.offsetHeight,n=e.currentStyle||document.defaultView.getComputedStyle(e),i=n.marginTop.match(/(\d+)/g);i=i?+i[0]:0;let r=n.marginBottom.match(/(\d+)/g);return r=r?+r[0]:0,t+=i+r,t}mm2px(e){let t=document.querySelector("#table-print-src");var n=document.createElement("div");n.style.cssText=`width:1mm;height:${e}mm;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden`,t.appendChild(n);let i=this.getDomHeight(n);return n.parentNode.removeChild(n),i}preRenderGetHeight(e){let t=document.querySelector("#table-print-src");var n=document.createElement("div");n.style.cssText="position:absolute;left:0px;top:0px;z-index:99;visibility:hidden",n.appendChild(e),t.appendChild(n);let i=this.getDomHeight(n);return n.parentNode.removeChild(n),i}getThead(e){return e.children[0]&&"thead"===e.children[0].nodeName.toLocaleLowerCase()?e.children[0]:null}getTBody(e){return e.children[1].nodeName&&"tbody"===e.children[1].nodeName.toLocaleLowerCase()?e.children[1]:null}moveDom(e,t,n){let i=this.getDomHeight(e),r=t[t.length-1];const o=(e,t,n,i)=>{let r={children:[],curHeight:0,maxHeight:i};e.push(r),r.children.push(t),r.curHeight+=n};if("always"!==e.style.pageBreakBefore){if(r.curHeight+i<n)return r.children.push(e),void(r.curHeight+=i);if("table"===e.nodeName.toLocaleLowerCase()&&this.getThead(e)){let i=this.getThead(e),o=this.getTBody(e);const a=()=>{let t=e.cloneNode(),n=o.cloneNode();return t.appendChild(i.cloneNode(!0)),t.appendChild(n),{table:t,tbody:n}};let l=a();for(let e=0;e<o.children.length;e++){let i=o.children[e].cloneNode(!0);l.tbody.appendChild(i);let d=this.preRenderGetHeight(l.table);if(r.curHeight+d>n)if(o.children.length>1){l.tbody.removeChild(i),l.tbody.children.length>0&&r.children.push(l.table);let o={children:[],curHeight:0,maxHeight:n};t.push(o),r=o,l=a(),e--}else{let e={children:[],curHeight:0,maxHeight:n};t.push(e),r=e,r.children.push(l.table),r.curHeight+=d,l=a()}}if(l.tbody.children.length>0){let e=this.preRenderGetHeight(l.table);r.children.push(l.table),r.curHeight+=e}}else o(t,e,i,n)}else o(t,e,i,n)}setPageLandscape(e){for(var t,n,i=0;i<document.styleSheets.length;i++){for(var r=document.styleSheets[i],o=0;o<r.cssRules.length;o++)if((n=r.cssRules[o])&&n.constructor===CSSPageRule){t=n.style.size;break}if(t)break}t=(t=[...t.matchAll(/(\d+)/g)]).map((e=>+e[1])),e?t[0]<t[1]&&t.reverse():t[0]>t[1]&&t.reverse(),t=t.map((e=>e+"mm")),n.style.size=t.join(" ")}print(e=!1){let{landscape:t}=this.state;this.setPageLandscape(t);let n=this.createPrintRootDom(e);this.showDialog(n,e);let i=document.querySelector("#table-print-src"),r=document.createElement("header"),o=0;if(this.state.header){let e=this.state.header.cloneNode(!0);r.appendChild(e),o=this.preRenderGetHeight(r)}let a=t?this.mm2px(178):this.mm2px(265);a-=o;let d=[{children:[],curHeight:0,maxHeight:a}];for(let e=0;e<i.children.length;e++)this.moveDom(i.children[e],d,a);let c,s=this.state.water;if(s){!0===s?(s=document.createElement("div"),s.className="table-print-water",s.innerHTML="<span>还有下一页</span>"):s=s.children[0].cloneNode(!0),c=document.createElement("section"),c.className="table-print-water-box",c.appendChild(s);let e=this.rand(35,89),t=this.rand(15,60),n=s.offsetHeight||s.height||this.state.waterHeight;c.style.transform=`rotate3d(0,0,1,${e}deg)`,c.style.left=`${t}%`,c.style.bottom="-"+n/2+"px"}for(let e=0;e<d.length;e++){let t=document.createElement("section");t.className="A4";let n=document.createElement("div");n.className="A4-content",t.appendChild(n);let i=document.createElement("footer");if(this.state.header&&n.appendChild(r.cloneNode(!0)),d[e].children.forEach((e=>{n.appendChild(e)})),this.state.footer){!0===this.state.footer&&(this.state.footer=this.footer_default);let t=this.state.footer.cloneNode(!0),r=t.innerText;r=r.replace("@page",e+1),r=r.replace("@total",d.length),t.innerText=r,i.appendChild(t),n.appendChild(i)}e!=d.length-1&&s&&n.appendChild(c.cloneNode(!0)),this.dialog.querySelector(`#${l}`).appendChild(t)}i.style.display="none",e||this.doPrint()}rand(e,t,n){return n||(n=Math.random()),Math.ceil(n*(t-e+1)-1)+e}closeDialog(){this.dialog&&(document.body.removeChild(this.dialog),this.dialog=null)}doPrint(){let e=document.querySelector("#table-print-root");document.body.appendChild(e),this.closeDialog(),window.print(),this.state.debug||document.body.removeChild(e)}showDialog(e,t){let n=document.createElement("section");n.className="table-print-dialog",n.id="table-print-dialog",this.dialog=n;var i=document.createElement("hgroup");i.className="table-print-dialog-btn-group",(r=document.createElement("div")).className="table-print-dialog-btn-cancel",r.innerText="取消";var r,o=document.createElement("div");o.className="table-print-dialog-btn-ok",o.innerText="打印",(r=document.createElement("div")).className="table-print-dialog-btn-cancel",r.innerText="取消",i.appendChild(o),i.appendChild(r);var a=document.createElement("div");a.className="table-print-dialog-title",a.innerText="打印预览",n.appendChild(a),n.appendChild(i),n.appendChild(e),o.onclick=()=>{this.doPrint()},r.onclick=()=>{this.closeDialog()},document.body.appendChild(n)}createPrintRootDom(){const{children:e,landscape:t}=this.state;let n=document.createElement("section");n.className=l,n.id=l,t?n.setAttribute("landscape",!0):n.removeAttribute("landscape");let i=document.createElement("section");i.className=d,i.id=d;for(let t=0;t<e.length;t++)i.appendChild(e[t].cloneNode(!0));return n.appendChild(i),n}}}])}));