vue-print-nb实现页面打印

1、安装、引入和页面使用

• 安装依赖：npm install vue-print-nb --save
• 在main.js中引入

import Print from 'vue-print-nb'
Vue.use(Print);

• 在需要打印的标签上加 id="myPrint"

<div id="myPrint">需要打印的内容</div>

• 在打印按钮标签上使用指令 v-print="print"

<el-button type="primary" v-print="print" class="printBtn">打印</el-button>

• 在data中定义print配置对象

 print: {
    id: 'myPrint',
    popTitle: '付款审核表', // 打印配置页上方标题
    extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
    extraCss: '',
 },

 2、打印过滤

如果在打印区域中有不需要打印的内容，可以在给需要隐藏的内容的标签上添加类名，比如hidden

然后使用@media print 将其隐藏，@media print 里面是打印时才生效的样式

 @media print {