github地址：https://github.com/Power-kxLee/vue-print-nb
1.先安装 vue-print-nb插件
npm install vue-print-nb --save
2.main.js中引入并安装此插件
#main.js
import Print from './assets/print'
Vue.use(Print);
3.使用
image.png
image.png
export default {
name: "Report",
data() {
return {
printStatus: true,
printObj: {
id: "printArea",
popTitle: "打印", // 打印配置页上方标题
extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>,<style>#printArea {width:100%;}</style>', //最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
preview: "", // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
previewTitle: "", // 打印预览的标题（开启预览模式后出现）,
previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
zIndex: "", // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
previewBeforeOpenCallback() { }, //预览窗口打开之前的callback（开启预览模式调用）
previewOpenCallback() { }, // 预览窗口打开之后的callback（开启预览模式调用）
beforeOpenCallback() { }, // 开启打印前的回调事件
openCallback() { }, // 调用打印之后的回调事件
closeCallback() {
this.printStatus = false;
}, //关闭打印的回调事件（无法确定点击的是确认还是取消）
url: "",
standard: "",
extraCss: "",
},
};
},
methods: {
handlePrint() {
this.printStatus = true;
}
},
};
