先上图

背景

环境Vue2.x

之前使用的报表开发插件      vue-easy-print@0.0.8    

能打印pdf报表,但是存在不能打印多页的问题,使用人数较少,文档较少,版本较低,放弃.

改用新的插件     print-js

能在原来的基础上解决打印多页pdf的问题

教程 print-js[官方教程]

1.安装插件

npm install print-js --save

2. 在Vue页面引用

    import printJS from 'print-js'

3.指定要打印标签的id (唯一)

<visa-template  id="aaa"></visa-template>

4.按钮添加打印事件

<el-button type="primary" onclick="printJS( {printable:'aaa', type:'html',scanStyles:false,css:['https://qiniu.smartpilot.cn/myreport.css'],style:''})">

  生成报表

</el-button>

5.添加自己的样式    css压缩工具

例如:

    style:'{div:{color:#008855}}'

    字体缩小  .reportTable{font-size:0.8em !important }

#能分页靠的是这个css

```
.reportBox {

  text-align: center;

  width: 100%;

  margin: auto;

  page-break-after: always;

  margin-top: 20px;

  font-family: "微软雅黑";

}

```