vue + el-table +Print.js 实现前端打印分页多页表格_前端打印el-table

Print.js 官方文档：https://printjs.crabbly.com/

前言：近来项目有个需求，很简单的打印功能，但是需要纯前端来实现。

需求：一个分页表格，点击打印的时候，需要把所有的页面的数据一次性全部打印出来。

前端打印：利用浏览器的打印功能，可以把页面上的元素打印出来。

如果打印的只是屏幕上的内容，完全可以用一个大div 把元素包起来，然后打印，vue 有现成插件，（这里不做描述），如果打印内容特别宽，会出现A4 纸放不下的情况，可以采用先把打印内容转化成图片（html2canvas），然后打印图片 , 这样会等比例缩放，但是也不太好看。如果想1:1 还原，就要在设计页面的时候，按照A4 纸来设计（宽800PX 大概），样式不要写死，在打印的时候先把宽度变为800px ,然后生成图片，在打印，这样就可以1:1还原了，打印完成之后，在把页面复原。

重点：多页打印

经过读文档，print.js 有个功能是打印JSON。所以我们在打印JSON 的时候，只需要调接口拿到所有的数据，然后在打印就可以了。

    import printJS from "print-js";

代码如下：

printJS({
                        printable: result, //所有数据
                        properties: [{field: 'PatientName', displayName: '姓名'}, // 数据字段 表格头名
                            {field: 'Patient.PATIENT_ID', displayName: '病历号'},
                            {field: 'Patient.GENDER', displayName: '性别'},
                            {field: 'Patient.PHONE', displayName: '联系方式'},
                            {field: 'OperType', displayName: '术式'},
                            {field: 'TimeStr', displayName: '时间段'},
                            {field: 'AppDoctorName', displayName: '手术医生'},
                            {field: 'AlreadyPay', displayName: '是否确费'},
                            {field: 'DistributeDrugs', displayName: '是否发药'},
                        ],
                        type: 'json',
                        gridHeaderStyle: 'border: 1px solid #909399;', //表格头样式
                        gridStyle: 'border: 1px solid #909399; text-align:center;', // 表哥体样式
                        // style:'@media print{@page {size:landscape}}' //横行打印
                    })