使用了麻友建议的# vue-print-nb，使用page-break-after来进行分页，结果都不尽人意，最后选择了Print.js
使用 Print.js解决打印table，数据量超出一张纸，导致打印不全
- 安装好 Print.js:
npm install print-js --save - 引用包(在你页面里面或者全局)：
import printJS from "print-js"; - 实现一个按钮或者啥触发打印页面方法：
<el-button style="height: fit-content; margin-top: auto;" type="success" plain @click="printHtmlCss">打印</el-button> - 在打印方法中实现样式，以及对应 ID的 div:
建议引用 css文件只保留需要打印页面的样式，因为我把所有样式引用发现不分页
// 直接引用 css文件
printHtmlCss() {
printJS({
printable: "container",
type: "html",
css: [
"../../../../static/css/processinfo.css",
"../../../../static/css/element-ui/index.css"
], //引入css文件
scanStyles: false
});
},
// 直接引用样式
printHtmlCustomStyle() {
const style = "@page { margin: 0 } @media print { h1 { color: blue } }"; //直接写样式
printJS({
printable: "container",
type: "html",
style: style,
scanStyles: false
});
},
-
查看结果：
需要打印的页面
弹出的打印页面
有人会问为啥你那个按钮怎么在打印的页面中不显示，而且表单的数据也变少了， 嘿嘿，那是因为我在该页面 把需要打印的复制了一份，因为我发现如果有滚动条他打印不会分页，会把滚动条也打印上（见”弹出的打印页面“的第二张的横向滚动条）而系统为了用户的体验需要滚动条，所以我复制了一份使其没有滚动条，并且把一些不需要打印的去除，使其不显示即可，当然你也可以不需要复制一份，把重写的样式放在printJS 中css指定的文件中即可，到此结束，有问题可以咨询，谢谢。
个人博客
