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

main.js引入封装好的print

import {print} from '@/components/print.js'

Vue.prototype.print = print

print.js

import printJS from 'print-js'

function removeNull(obj) {
  Object.keys(obj).forEach(key => {
      if (obj[key] === undefined || obj[key] === null) {
        obj[key] = ''
      }
    }
  );
  return obj;
}

export function print(data, tableList, header) {
  const datas = [...data];
  let arr = datas;
  let fieldList = tableList.field;
  let displayName = tableList.displayName;
  let columnSizes = tableList.columnSize;
  let  properties = []
  $.each(data, function (i, v) {
    arr[i].index = i + 1;
    removeNull(v)
  })
  properties = [{
    field: 'index',
    displayName: '序号',
    columnSize: 1
  }];

  $.each(fieldList, function (i, v) {
    if (v!="index"){
      properties.push({
        field: v == undefined ? '' : v,
        displayName: displayName[i],
        columnSize: 1
      })
    }
  })
  printJS({
    printable: arr,
    properties: properties,
    type: 'json',
    header: header,
    // 样式设置
    gridStyle: 'border: 1px solid #333;font-size:12px;',
    gridHeaderStyle: 'height: 40px;font-size: 13px;border: 1px solid #333;'
  })

}

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, '数据')
                });
            }