一、需求
1.1、实现如图所示内容的打印
1.2、打印内容分析：
1.2.1、包括：1、页眉；2、页脚；3、表头；4、合并行；5、合并列；6、分页；
二、print.js
1、html打印
2、iframe打印
// 打印内容--可以直接使用 /** * @des 打印的方法 * @param {[String|Object]} body require true * @param {Array} styleList require false 样式 * @param {String} scale require false 缩放比例 * body 1:自定义字符串 可以把样式写到行内 * body 2:html节点 例如：this.$refs.name.$el/this.$el * 可以所有style标签全部传入当作样式--styleList = Array.from(document.getElementsByTagName('style')) */ export const _print = (body, styleList = [], scale = '1') => { // 把所有样式放入打印区域 let styleStr = styleList.map(item => { return item.nodeType ? item.cloneNode(true).outerHTML : '' }) // table字段太多是要缩放打印 let width = 100 / Number(scale) body = body.nodeType ? body.outerHTML : body let printStr = `<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <style media="print"> @page { size: auto; /* auto is the initial value */ margin: 5mm 10mm; /* this affects the margin in the printer settings */ } </style> <style media="print"> html,body{height:100%; margin: 0; padding: 0;}img{max-width:100%;max-height:100%;margin:0 auto} body{width: ${width}%; transform:scale(${scale});transform-origin: left top;} </style> ${styleStr.join('')} </head><body> ` printStr = printStr + body + '</body></html>' // 打印弹窗 _printMotheds(printStr) } // 兼容火狐 谷歌 ie const _printMotheds = (str) => { let browser = myBrowser() if (['FF', 'SOUGOU'].includes(browser)) { printByOpenWindow(str) } else { printByIframe(str) } } // 打开新窗口 const printByIframe = (str) => { let iframe = document.createElement('IFRAME') iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;') document.body.appendChild(iframe) let doc = iframe.contentWindow.document doc.write(str) doc.close() iframe.contentWindow.onload = ()=>{ iframe.contentWindow.focus() iframe.contentWindow.print() // iframe打印 document.body.removeChild(iframe) } } // 利用iframe--避免打印影响原网页 const printByOpenWindow = (str) => { var page = window.open('', '_blank') page.document.write(str) // 写入打印页面的内容 page.print() // html打印 var userAgent = navigator.userAgent if ((userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1) || (userAgent.indexOf('Edge') > -1) || (userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1)) { // IE浏览器 page.document.execCommand('print') } else { console.log('not IE') } page.close() // 关闭打印窗口 } // 获取浏览器类型 const myBrowser = () => { var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf('Opera') > -1 if (isOpera) { return 'Opera' } // 判断是否Opera浏览器 if (userAgent.indexOf('Firefox') > -1) { return 'FF' } // 判断是否Firefox浏览器 if (userAgent.indexOf('Chrome') > -1) { return 'Chrome' } if (userAgent.indexOf('Safari') > -1) { return 'Safari' } // 判断是否Safari浏览器 if (userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 && !isOpera) { return 'IE' } // 判断是否IE浏览器 if (userAgent.toLowerCase().indexOf('se 2.x') > -1) { return 'SOUGOU' } }
二、实现需求
分析：关键是实现所要打印内容的字符串；
这里实现了：
1、根据每页要展示多少行进行分页；
2、通过css实现分页；
3、logo、页眉、页脚的处理；
4、${this.ListStr(index)}表格行数据，这里包括合并行、合并列 单独做处理
printContent() { // 数据已脱敏，请根据自己的数据来使用 let content = ''; const len = Math.ceil(this.data.length / 10);//根据每页打印十条数据进行分页，不足十条也占一页 // style="page-break-after:always; margin: 0;font-size:10px;" 实现分页，分页时会自动带着页眉页脚与表头信息，页眉页脚这里也用表格实现，隐藏边框 for (let index = 0; index < len; index += 1) { content += `<div style="page-break-after:always; margin: 0;font-size:10px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-bottom: 20px;font-size:10px;"> <thead style="border:0;"> <tr> <img style="height:40px;" src="logo.png" alt="logo"> </tr> <h2 style="text-align: center;margin: 0 0 20px 0;padding: 0;font-size:20px;">单据title</h2> <tr style="border:0;"> <td style="border:0;padding:3px;" colspan="6">页眉字段1：${ this.printData.fields1 || '' }</td> <td style="border:0;padding:3px;" colspan="3">字段2：${ this.printData.fields2 || '' }</td> <td style="border:0;padding:3px;" colspan="3">字段3：${ this.printData.fields3 || '' }</td> </tr> <tr> <td style="border:0;padding:3px;" colspan="6">字段4：${ this.printData.fields4 || '' }</td> <td style="border:0;padding:3px;" colspan="3">字段5：${ this.printData.fields5 || '' }</td> <td style="border:0;padding:3px;" colspan="3">字段6：${ this.printData.fields6 || '' }</td> </tr> <tr> <td style="border:0;padding:3px 3px 10px 3px;" colspan="12">备注</td> </tr> <th style="border:1px solid #999;min-width:80px;">表头字段1</th> <th style="border:1px solid #999;min-width:80px;">字段2</th> <th style="border:1px solid #999;min-width:80px;">字段3</th> <th style="border:1px solid #999;min-width:50px;">字段4</th> <th style="border:1px solid #999;min-width:50px;">字段5</th> <th style="border:1px solid #999;">字段6</th> <th style="border:1px solid #999;">字段7</th> <th style="border:1px solid #999;min-width:80px;">字段8</th> <th style="border:1px solid #999;min-width:80px;">字段9</th> <th style="border:1px solid #999;min-width:80px;">字段10</th> <th style="border:1px solid #999;min-width:80px;">字段11</th> <th style="border:1px solid #999;">字段12</th> </thead> // 动态展示表格行数据，包括合并行，合并列，每页展示10条数据 ${this.ListStr(index)} <tfoot style="border:0;"> <tr style="border:0;"> <td style="border:0;padding-top:10px;" colspan="6">页脚字段1：</td> <td style="border:0;padding-top:10px;" colspan="3">字段2：</td> <td style="border:0;padding-top:10px;" colspan="3">字段3：${ this.printData.data3 }</td> </tr> <tr> <td style="border:0;" colspan="6">字段4：${ this.printData.data4|| '' }</td> <td style="border:0;" colspan="3">字段5：${ this.printData.data5|| '' }</td> <td style="border:0;" colspan="3">字段6：${ this.printData.data6|| '' }</td> </tr> <tr> <td style="border:0;" colspan="6">字段7：${ this.printData.data7|| '' }</td> <td style="border:0;" colspan="1">字段8：</td> <td style="border:0;" colspan="2">字段9：</td> <td style="border:0;" colspan="3">字段10：</td> </tr> </tfoot> </table> </div>`; } // 打印弹窗 _print(content); },
行数据的处理，这里我仅介绍我项目的情况，有了上边的代码要打印的内容基本已经实现了，表格的行数据怎样合并合并行、合并列要根据自己的需求具体实现，我仅介绍我项目的情况作为参考。
分析：表格前六行可能会合并列，后两行会合并列
关键点：第一页末尾数据是要实现合并列的，但是已经到了第一页的末尾，剩下还有一行或多行数据要展示在第二页，这是的合并列要再做处理。
通过rowspanLen 实现合并列
一开始我对数据已做了一些处理，数据格式大致如下：
data = [ { rowspanLen: 2,//要合并的列数,仅在要合并的一组数据中的第一条有内容，这里是要合并2列 fields1: '1', fields2: '2' }， { rowspanLen: '', fields1: '1', fields2: '2' }， { rowspanLen: 1,//要合并的列数,仅在要合并的一组数据中的第一条有内容，这里是要合并1列 fields1: '1', fields2: '2' } ]
ListStr(index2) { let str = ''; let curList = cloneDeep(this.data); curList = curList.splice(10 * index2, 10); // 从第二页开始，首行rowspanLen为空的处理 // 第一页是起始页面不需要 let only = 0; if (curList[0].rowspanLen === '') { let flagIndex = 0; curList.forEach((item) => { if (item.rowspanLen === '' && only === 0) { flagIndex += 1; } else { // foreach循环迭代数组元素时，没有数组元素的值 // 因此，这里用only做一个标记，这里只需要执行一次 // 否则同一页如果还有合并项，可能还会执行forEach循环 only += 1; curList[0].rowspanLen = flagIndex; curList[0].data1= ''; curList[0].data2= ''; curList[0].data3 = ''; curList[0].data4= ''; curList[0].data5= ''; curList[0].data6= ''; } }); // 整页rowspanLen为空的处理 if (curList[0].rowspanLen === '') { curList[0].rowspanLen = curList.length; curList[0].data1 = ''; curList[0].data2= ''; curList[0].data3= ''; curList[0].data4= ''; curList[0].data5 = ''; curList[0].data6 = ''; } } curList.forEach((item, index) => { str += `<tr>`; // 前六列，可能会合并列的数据 if (item.rowspanLen !== '') { str += `<td rowspan="${ item.rowspanLen }" style="padding: 3px;border:1px solid #999;width:60px;text-align:center;">${ item.data1|| '' }</td> <td rowspan="${ item.rowspanLen }" style="padding: 3px;border:1px solid #999;width:80px;text-align:center;">${ item.data2|| '' }</td> <td rowspan="${ item.rowspanLen }" style="padding: 3px;border:1px solid #999;width:80px;text-align:center;">${ item.data3|| '' }</td> <td rowspan="${ item.rowspanLen }" style="padding: 3px;border:1px solid #999;width:50px;text-align:center;">${ item.data4|| '' }</td> <td rowspan="${ item.rowspanLen }" style="padding: 3px;border:1px solid #999;width:50px;text-align:center;">${ item.data5|| '' }</td> <td rowspan="${ item.rowspanLen }" style="padding: 3px;border:1px solid #999;width:90px;text-align:center;">${ item.data6|| '' }</td>`; } // 中间不会合并的数据 str += `<td style="padding: 3px;border:1px solid #999;width:90px;text-align:center;">${ item.data7 || '' }</td> <td style="padding: 3px;border:1px solid #999;width:80px;text-align:center;">${ item.data8 || '' }</td> <td style="padding: 3px;border:1px solid #999;width:80px;text-align:center;">${ item.data9|| '' }</td> <td style="padding: 3px;border:1px solid #999;width:80px;text-align:center;">${ item.data10|| '' }</td>`; // 后两行整页的列都要合并 if (index === 0) { str += `<td rowspan="${ this.recordSingleSonVOList.length }" style="padding: 3px;border:1px solid #999;text-align:center;">${ item.data11|| '' }</td> <td rowspan="${ this.recordSingleSonVOList.length }" style="padding: 3px;border:1px solid #999;text-align:center;">${ item.data12|| '' }</td>`; } str += `</tr>`; }); return str; },
三、欢迎交流指正，留言必回。
