vue项目中引用printJS打印json表格，改变列宽及自定义表头

• 需要打印的表格
  
• printJS打印表格
  
• 实现代码
  • 安装printjs并在所需vue页面引入（局部引入）

    	 npm install print-js --save 
         import printJS from 'print-js'
    

  • 打印方法

  因表格数据多为json类型,type用‘json’，printable为json数据源，header内放头部展示的HTML,动态改变表头内数据用${}包裹就行。properties用来详细定义每列表格数据，需要进行封装处理的单项数据应在printJS()方法之前进行，properties中的filed仅为数据项名称，displayName为表头，columnSize为定义列宽，用百分比来表示大小。

print() {
        // 进行格式处理的数据
        this.dataList.forEach(item => {
          item.Amount = this.formatCurrency(item.amount) // 金额格式处理
        })
        // 打印方法
        printJS({
          printable: this.dataList,
          header: `<div style="display: flex;flex-direction: column;text-align: center">
                        <h3>${this.title}还款情况</h3>
                        <p style="margin-bottom: 20px;font-size: 12px;color: #cc444d;">(此表不具法律效力)</p>
                    </div>`,
          properties: [
            {field: 'account', displayName: '还款账号', columnSize: `25%`},
            {field: 'name', displayName: '姓名'},
            {field: 'Amount', displayName: '还款金额'},
            {field: 'repaymentDate', displayName: '还款日期'},
            {field: 'state', displayName: '状态', columnSize: `10%`},
            {field: 'operator', displayName: '执行者'}
          ],
          type: 'json',
          gridHeaderStyle: 'border: 1px solid #000;text-align:center',
          gridStyle: 'border: 1px solid #000;text-align:center'
        })
      }