vue + el-table +Print.js 实现前端打印分页多页表格
Print.js 官方文档:https://printjs.crabbly.com/
重点:多页打印
经过读文档,print.js 有个功能是打印JSON。所以我们在打印JSON 的时候,只需要调接口拿到所有的数据,然后在打印就可以了。
import printJS from "print-js";
代码如下:
// loading
const printLoading = this.$loading({ lock: true, text: '打印页面生成中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }) // 进行格式处理的数据 api.getList(this.tableQuery).then(res => { this.printList = res.data for (var i = 0, len = this.printList.length; i < len; i++) { switch (this.printList[i].helpType) { case '1' : this.printList[i].helpType = '七一慰问' break // 停止执行,跳出switch case '2' : this.printList[i].helpType = '十一慰问' break // 停止执行,跳出switch case '3' : this.printList[i].helpType = '春节慰问' break // 停止执行,跳出switch default : // 上述条件都不满足时,默认执行的代码 this.printList[i].helpType = '无' } if (this.printList[i].helpStartime !== null) { this.printList[i].helpStartime = this.printList[i].helpStartime.slice(0, this.printList[i].helpStartime.indexOf('-')) } } printLoading.close() // 打印 printJS({ printable: this.printList, // 所有数据 properties: [{ field: 'perName', displayName: '人员姓名' }, // 数据字段 表格头名 { field: 'helpType', displayName: '类型' }, { field: 'helpStartime', displayName: '慰问时间' } ], type: 'json', scanStyles: false, // 不适用默认样式 repeatTableHeader: false, // 打印json表头只显示在第一页 gridHeaderStyle: 'border: 1px solid #909399;text-align:center;', // 表格头样式 gridStyle: 'border: 1px solid #909399; text-align:center;', // 表哥体样式 style: '@page{size:auto;margin: 0cm 1cm 0cm 1cm;}'// 去除页眉页脚 // style:'@media print{@page {size:landscape}}' //横行打印 }) }, errorRes => {
printLoading.close()
}) this.printList = []
截图: