Vue实现打印功能（vue-print-nb）

1、安装依赖

npm install vue-print-nb --save

2、在main.js中引入

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

3、在组件的打印区域标签上加 id=“printArea”

<div id="printArea"> 打印区域 </div>

4、在组件的打印按钮标签上使用指令 v-print=“print”,print是配置对象

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

5、在组件的data中定义print配置对象

print: {id: 'printArea',popTitle: '打印', // 打印配置页上方标题extraHead: '', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）previewTitle: '', // 打印预览的标题（开启预览模式后出现）,previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）   previewBeforeOpenCallback() {}, //预览窗口打开之前的callback（开启预览模式调用）previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）beforeOpenCallback() {}, // 开启打印前的回调事件openCallback() {}, // 调用打印之后的回调事件closeCallback() {}, //关闭打印的回调事件（无法确定点击的是确认还是取消）url: '',standard: '',extraCss: '',},

打印过滤（隐藏打印区域不需要打印的内容）
只需要在组件的打印区域里，给需要隐藏的内容的标签上添加

class="noprint"
.noprint {display: none}

配置打印的样式
在全局样式中，新增标签，里面是打印时才生效的样式

<style media="print">
@page {size: auto;margin: 3mm;
}html {background-color: #ffffff;height: auto;margin: 0px;
}
</style>