vue引入print，自定义打印表格 


main.js引入封装好的print

import {print} from '@/components/print.js'
Vue.prototype.print = print
print.js
 1 import printJS from 'print-js'
 2 
 3 function removeNull(obj) {
 4   Object.keys(obj).forEach(key => {
 5       if (obj[key] === undefined || obj[key] === null) {
 6         obj[key] = ''
 7       }
 8     }
 9   );
10   return obj;
11 }
12 
13 export function print(data, tableList, header) {
14   const datas = [...data];
15   let arr = datas;
16   let fieldList = tableList.field;
17   let displayName = tableList.displayName;
18   let columnSizes = tableList.columnSize;
19   let  properties = []
20   $.each(data, function (i, v) {
21     arr[i].index = i + 1;
22     removeNull(v)
23   })
24   properties = [{
25     field: 'index',
26     displayName: '序号',
27     columnSize: 1
28   }];
29 
30   $.each(fieldList, function (i, v) {
31     if (v!="index"){
32       properties.push({
33         field: v == undefined ? '' : v,
34         displayName: displayName[i],
35         columnSize: 1
36       })
37     }
38   })
39   printJS({
40     printable: arr,
41     properties: properties,
42     type: 'json',
43     header: header,
44     // 样式设置
45     gridStyle: 'border: 1px solid #333;font-size:12px;',
46     gridHeaderStyle: 'height: 40px;font-size: 13px;border: 1px solid #333;'
47   })
48 
49 }

vue调用

 //打印功能
            handlePrint() {
                let data = [];
                let pageSize = this.queryParams.pageSize;
                let params = this.queryParams;
                let tableList = {
                    field: ["testBatch", "createTime"],
                    displayName: ["文件名称", "创建时间"]
                }
                params.pageSize = this.total;
                listData(params).then(response => {
                    data = response.rows;
                    this.queryParams.pageSize = pageSize;
                    this.print(data, tableList, '数据')
                });
            }

 

posted @ 2021-08-24 17:02  小码农+1  阅读(999)  评论(0)  编辑  收藏  举报