1.vue实现打印功能vue-print-nb

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;
    }
  },
};