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}}' //横行打印
                    })

Logo

前往低代码交流专区

更多推荐