vue打印表格动态数据 print-js_vue 打印表格

使用print-js直接打印动态表格数据

1、安装print-js

npm install print-js --save

2、在需要的页面上引入

import printJS from 'print-js'

3、打印按钮添加方法

 
<a-button type="primary" @click="printData()"><a-icon type="printer" />打印</a-button>

4、方法

printData(){
 
      printJS({
        printable: this.data,
        properties: [
          { field: 'name', displayName: '学生' }, // field 要对应this.data里的字段
          { field: 'age', displayName: '年龄' },
          { field: 'grade.chinese', displayName: '语文' },
          { field: 'grade.engilsh', displayName: '英语' },
          { field: 'grade.math', displayName: '数学' },
        ],
        type: 'json',
        gridHeaderStyle: 'border: 1px solid #000;text-align:center',
        gridStyle: 'border: 1px solid #000;text-align:center'
      })
 
},

完成！

this.data的数据结构是这样的,grade是一个对象：

this.data = [

{

name:'张三',

age:'18',

grade:{ math:'100', chinese:'90', engilsh:'99' }

}

]