JS中FireFox新开窗口预览打印处理的方式

仅提供思路，勿喷如下↓

 

 1 /**
 2      * 打印方法
 3      * @param dom 要被打印的dom元素
 4      * @param parentClassName 该组件的页面根组件class名
 5      * @param pageMargin @page中的maring值
 6      */
 7     static print = (dom, parentClassName = '', pageMargin = '20px') => {
 8 9         if (navigator.userAgent.indexOf("Firefox") > 0) {
10 
11             let previewDom = document.getElementById('previewDom_serviceCharges');
12             if (previewDom && previewDom.offsetHeight) {
13                 const imgNumber = parseInt(String(previewDom.offsetHeight / 1120)) + 1;17                 let webConfig = (<any>window).config;
18                 let hostAddress = webConfig.isDebug ? `http://${window.location.host}` : `http://${window.location.host}/erpfront/dist`;
19                 let backimg = document.createElement('div'), htmlStr = '';
20                 for (let i = 0; i < imgNumber; i++) {
21                     htmlStr += `
22                     <img src='${hostAddress}/assets/images/contract-background.jpg'>
23                     ` ;
24                 }
25                 backimg.innerHTML = htmlStr;
26                 backimg.setAttribute('style', `
27                         position: absolute;
28                         bottom: 0px;
29                         padding: 0px;
30                         margin: 0px;
31                         top: 0;
32                         z-index: -1;
33                         width: 100%;
34                 `);
35                 //backimg.className = 'backimg';
36                 previewDom.appendChild(backimg);
37             }
38 
39 
40             const domPrint = document.createElement('div');
41             domPrint.className = parentClassName;
42             domPrint.id = 'dom-content-for-print-printutils';
43             domPrint.innerHTML = dom.outerHTML;
44 
45             let page = window.open('', '_blank');// 打开一个新窗口，用于打印
46             page.document.body.innerHTML = domPrint.outerHTML;// 写入打印页面的内容
47 
48             const domPrintStyle = document.createElement('style');
49             domPrintStyle.id = 'dom-style-for-print-printutils';
50             domPrintStyle.innerHTML = PrintUtils.getFirefoxStyle(pageMargin);
51 
52             page.document.head.appendChild(domPrintStyle);
53 
54 
55             
56 
57             page.print();// 打印
58             page.close();// 关闭打印窗口
59 
60         }
61 }
 1 static getFirefoxStyle(pageMargin: any) {
 2         PrintUtils.firefoxStyleString = `
 3         @media print {
 4            body {
 5                     float: none !important;
 6                     position: static !important;
 7                     display: inline;
 8                     page-break-after: always;
 9                 }
10                 body > * {
11                     display: none;
12                 }
13                 body * {
14                     color: #000 !important;
15                     border-color: #000 !important;
16                 }
17                 @page {
18                     margin: ${pageMargin}
19                 }
20                 #dom-content-for-print-printutils{
21                     display: block
22                 }
23 
24         }
25         .icon {
26             margin-left: 11px;
27             font-size: 18px;
28             color: #32c5d2;
29             font-weight: 600;
30             cursor: pointer;
31         }
32         .hr {
33             width: 80%;
34             color: #f5f5f5;
35         }
36         .inputCenter {
37             position: relative;
38             top: 20px;
39         }
40         .contractPreview {
41             margin: 0px auto;
42             width: 98%;
43             border: none;
44             position: relative;
45             z-index: 1;
46             overflow: hidden;
47         }
48         return PrintUtils.firefoxStyleString;
49     }

 

posted @ 2019-08-01 17:23  麋鹿星空  阅读(855)  评论(0)  编辑  收藏  举报