在vue中使用print.js打印表格

print.js官网

• 安装 print-js

npm i print-js

import printJS from 'print-js'

• template

<el-button @click="handlePrint" class="print_btn" type="primary">打印</el-button>

• methods

  handlePrint () { let data = [] for(let i = 0; i<this.assignmentResList.length; i++){ data.push({ field1:i+1, field2:this.assignmentResList[i].name, field3:this.assignmentResList[i].idCardNum }) } printJS({ printable:data, properties:[{ field:'field1', displayName:'序号', columnSize:1 },{ field:'field2', displayName:'姓名', columnSize:1 },{ field:'field3', displayName:'身份证号', columnSize:1 }], type: 'json', header: schoolName, //样式设置 gridStyle:'border:1px solid #dedede;color:#3a3a3a;', gridHeaderStyle:'color:red; border:1px solid #dedede;color:#3549ff;' }) }

• 效果

• 参数