vue 使用vue-print-nb打印

vue-print-nb 有两种打印模式 目前好像只知道支持（图片、后缀名为pdf）的格式文件

一、异步路径打印 动态请求api打印方式

1.安装依赖：npm install vue-print-nb --save

2.在main.js中引入

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

3.vue template 部分 v-print="print"

<el-button v-print="print" class="m-px-l-16">打印申请表</el-button>

4.vue script data 部分

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

二、 区域打印 （也可以理解为页面排版答应 需要配置 区域模块id类名）引入的方式同一样 一般在data下 print 对象下 配置

1.vue template 部分

<el-button id="printArea" v-print="print" class="m-px-l-16">打印</el-button>

4.vue script data 部分

data() {
  return {
    print: {
      id: 'printArea',
    }
  }
}