插件官網(wǎng)地址 https://www.npmjs.com/package/vue-print-nb
1. 安裝
npm install vue-print-nb --save
2. 導(dǎo)入打印插件
//main.js
import Print from 'vue-print-nb'
Vue.use(Print);
3. 配置參數(shù)
4. 頁(yè)面使用
<div id="printDiv">打印內(nèi)容</div>
<el-button v-print="'#printDiv'">打印</el-button>
或
<el-button v-print="'printConfig'">打印</el-button>
<script>
export default {
data() {
return {
printConfig:{
id:'printPage', //被打印部分的id
popTitle: '配置頁(yè)眉標(biāo)題', // 打印配置頁(yè)上方的標(biāo)題
extraHead: '打印', // 最上方的頭部文字础钠，附加在head標(biāo)簽上的額外標(biāo)簽，使用逗號(hào)分割
preview: true, // 是否啟動(dòng)預(yù)覽模式霍狰，默認(rèn)是false
previewTitle: '預(yù)覽的標(biāo)題', // 打印預(yù)覽的標(biāo)題
previewPrintBtnLabel: '預(yù)覽結(jié)束够吩，開(kāi)始打印', // 打印預(yù)覽的標(biāo)題下方的按鈕文本，點(diǎn)擊可進(jìn)入打印
zIndex: 20002, // 預(yù)覽窗口的z-index湿弦，默認(rèn)是20002欺税，最好比默認(rèn)值更高
previewBeforeOpenCallback () { console.log('正在加載預(yù)覽窗口分唾！'); console.log(that.msg, this) }, // 預(yù)覽窗口打開(kāi)之前的callback
previewOpenCallback () { console.log('已經(jīng)加載完預(yù)覽窗口勿璃，預(yù)覽打開(kāi)了擒抛！') }, // 預(yù)覽窗口打開(kāi)時(shí)的callback
beforeOpenCallback () { console.log('開(kāi)始打印之前！') }, // 開(kāi)始打印之前的callback
openCallback () { console.log('執(zhí)行打印了补疑！') }, // 調(diào)用打印時(shí)的callback
closeCallback () { console.log('關(guān)閉了打印工具歧沪！') }, // 關(guān)閉打印的callback(無(wú)法區(qū)分確認(rèn)or取消)
clickMounted () { console.log('點(diǎn)擊v-print綁定的按鈕了！') },
// url: 'http://localhost:8080/', // 打印指定的URL莲组，確保同源策略相同
// asyncUrl (reslove) {
// setTimeout(() => {
// reslove('http://localhost:8080/')
// }, 2000)
// },
standard: '',
extarCss: ''
},
}
}
}
</script>
5. 打印樣式設(shè)置
<style scoped media="print">
/*指定打印的分頁(yè)*/
/deep/ section{
page-break-after:always;
}
/*避免出現(xiàn)空白尾頁(yè)*/
html,body,#app{
height: 98% !important;
margin: 0px;
padding: 0px;
}
</style>
設(shè)置打印內(nèi)容樣式诊胞，不影響頁(yè)面原有樣式
以下內(nèi)容為設(shè)置 element table 在打印時(shí)的樣式，防止打印不全
@page {
size: auto;
margin: 3mm;
}
@media print {
html {
background-color: #ffffff;
height: auto;
margin: 0px;
}
body {
border: solid 1px #ffffff;
/* margin: 10mm 15mm 10mm 15mm; */
}
#print table {
table-layout: auto !important;
}
#print .el-table__header-wrapper .el-table__header {
width: 100% !important;
border: solid 1px #f2f2f2;
}
#print .el-table__body-wrapper .el-table__body {
width: 100% !important;
border: solid 1px #f2f2f2;
}
#print #pagetable table {
table-layout: fixed !important;
}
#print .el-table__empty-block {
width: 100% !important;
height: auto !important;
}
#print .el-input-number--small{
width: 100% !important;
}
}
6. 分頁(yè)
在要進(jìn)行分頁(yè)的標(biāo)簽上锹杈，添加以下樣式
page-break-after:always
例如
<div id="printPage">
<section>
第一頁(yè)的內(nèi)容
</section>
<section>
第二頁(yè)的內(nèi)容
</section>
</div>
<style>
section{
page-break-after: always;
}
</style>
或者 在需要分頁(yè)的內(nèi)容最后加上
<p style="page-break-after: always;"></p>
7. 移除末尾的空白頁(yè)
若打印時(shí)撵孤，末尾總是出現(xiàn)空白頁(yè)，則存在定義了height:100%的元素嬉橙，刪除掉此樣式即可
通常都是因?yàn)榇嬖谝韵聵邮綄?dǎo)致,通常被定義在全局樣式文件中早直，或index.html中
html,body,#app{
height: 100%;
}
8. 隱藏打印區(qū)域中的某個(gè)div
您可以通過(guò)在需要隱藏的div上添加class="no-print"，然后在打印樣式中設(shè)置該類的display屬性為none來(lái)實(shí)現(xiàn)隱藏市框。具體步驟如下：
- 在需要隱藏的 div 上(測(cè)試 必須是 div 標(biāo)簽)添加
class="no-print"，例如：
<div class="no-print">
這是需要隱藏的內(nèi)容
</div>
- 在打印樣式中設(shè)置該類的display屬性為none糕韧，例如：
@media print {
.no-print {
display: none;
}
}
這樣枫振，在打印預(yù)覽或者實(shí)際打印時(shí)喻圃，帶有 class="no-print" 的 div 就會(huì)被隱藏掉。
9. window.print() 瀏覽器打印功能
js 執(zhí)行 window.print() 就會(huì)調(diào)用谷歌瀏覽器的打印功能粪滤。
