使用了麻友建議的# vue-print-nb，使用page-break-after來進(jìn)行分頁娃属，結(jié)果都不盡人意，最后選擇了Print.js
使用 Print.js解決打印table护姆，數(shù)據(jù)量超出一張紙矾端，導(dǎo)致打印不全
- 安裝好 Print.js:
npm install print-js --save - 引用包(在你頁面里面或者全局)：
import printJS from "print-js"; - 實(shí)現(xiàn)一個(gè)按鈕或者啥觸發(fā)打印頁面方法：
<el-button style="height: fit-content; margin-top: auto;" type="success" plain @click="printHtmlCss">打印</el-button> - 在打印方法中實(shí)現(xiàn)樣式，以及對應(yīng) ID的 div:
建議引用 css文件只保留需要打印頁面的樣式卵皂，因?yàn)槲野阉袠邮揭冒l(fā)現(xiàn)不分頁
// 直接引用 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
});
},
-
查看結(jié)果：
需要打印的頁面
彈出的打印頁面
有人會問為啥你那個(gè)按鈕怎么在打印的頁面中不顯示秩铆，而且表單的數(shù)據(jù)也變少了， 嘿嘿渐裂，那是因?yàn)槲以谠擁撁? 把需要打印的復(fù)制了一份豺旬，因?yàn)槲野l(fā)現(xiàn)如果有滾動條他打印不會分頁，會把滾動條也打印上（見”彈出的打印頁面“的第二張的橫向滾動條）而系統(tǒng)為了用戶的體驗(yàn)需要滾動條柒凉，所以我復(fù)制了一份使其沒有滾動條族阅，并且把一些不需要打印的去除，使其不顯示即可膝捞，當(dāng)然你也可以不需要復(fù)制一份坦刀，把重寫的樣式放在printJS 中css指定的文件中即可，到此結(jié)束蔬咬，有問題可以咨詢鲤遥，謝謝。
個(gè)人博客
