插件官网地址：vue-print-nb - npm
1.安装
npm install vue-print-nb --save
2.导入打印插件
//main.js
import Print from 'vue-print-nb'
Vue.use(Print);3.配置参数
4.页面使用
<div id="printDiv">打印内容</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: '配置页眉标题', // 打印配置页上方的标题extraHead: '打印', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割preview: true, // 是否启动预览模式，默认是falsepreviewTitle: '预览的标题', // 打印预览的标题previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); console.log(that.msg, this) }, // 预览窗口打开之前的callbackpreviewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callbackbeforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callbackopenCallback () { console.log('执行打印了！') }, // 调用打印时的callbackcloseCallback () { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)clickMounted () { console.log('点击v-print绑定的按钮了！') },// url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同// asyncUrl (reslove) {// setTimeout(() => {// reslove('http://localhost:8080/')// }, 2000)// },standard: '',extarCss: ''},}}
}
</script>
5.打印样式设置
<style scoped media="print">/*指定打印的分页*//deep/ section{page-break-after:always;}/*避免出现空白尾页*/html,body,#app{height: 98% !important;margin: 0px;padding: 0px;}
</style>设置打印内容样式，不影响页面原有样式 以下内容为设置 element table 在打印时的样式，防止打印不全
@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.分页
在要进行分页讹标签上，添加以下样式
page-break-after:always例如:
<div id="printPage"><section>第一页的内容</section><section>第二页的内容</section>
</div><style>
section{page-break-after: always;
}
</style>
或者 在需要分页的内容最后加上
<p style="page-break-after: always;"></p>7.移除末尾的空白页
若打印时，末尾总是出现空白页，则存在定义了height：100%的元素，删除掉此央视即可通常都是因为存在以下样式导致，通常被定义在全局样式文件中，或index.html中
html,body,#app{height: 100%}8.隐藏打印区域中的某个div
您可以通过在需要隐藏的div上添加 class="no-print" ，然后在打印样式中设置该类的 display属性为 none 来实现隐藏。具体步骤如下：
1.在需要隐藏的div上(测试 必须是div标签)添加 class="no-print" ,例如：
<div class="no-print">这是需要隐藏的内容
</div>2.在打印样式中设置该类的display属性为none，例如:
@media print {.no-print {display: none;}
}这样，在打印预览或者实际打印时，带有 class="no-print" 的div就会被隐藏掉。
9.window.print() 浏览器打印功能
js 执行 window.print() 就会调用谷歌浏览器的打印功能。
