vue-print-nb 有兩種打印模式 目前好像只知道支持（圖片、后綴名為pdf）的格式文件

一、異步路徑打印 動(dòng)態(tài)請(qǐng)求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">打印申請(qǐng)表</el-button>

4.vue script data 部分

data() {
  return {
    print: {
        popTitle: '打印', // 打印配置頁(yè)上方標(biāo)題
        extraHead: '', // 最上方的頭部文字，附加在head標(biāo)簽上的額外標(biāo)簽,使用逗號(hào)分隔
        preview: true, // 是否啟動(dòng)預(yù)覽模式，默認(rèn)是false（開(kāi)啟預(yù)覽模式，可以先預(yù)覽后打?。?        previewTitle: '', // 打印預(yù)覽的標(biāo)題（開(kāi)啟預(yù)覽模式后出現(xiàn)）,
        previewPrintBtnLabel: '打印', // 打印預(yù)覽的標(biāo)題的下方按鈕文本，點(diǎn)擊可進(jìn)入打?。ㄩ_(kāi)啟預(yù)覽模式后出現(xiàn)）
        zIndex: '2002', // 預(yù)覽的窗口的z-index，默認(rèn)是 20002（此值要高一些，這涉及到預(yù)覽模式是否顯示在最上面）
        previewBeforeOpenCallback() {
        }, // 預(yù)覽窗口打開(kāi)之前的callback（開(kāi)啟預(yù)覽模式調(diào)用）
        previewOpenCallback() {
        }, // 預(yù)覽窗口打開(kāi)之后的callback（開(kāi)啟預(yù)覽模式調(diào)用）
        beforeOpenCallback() {
        }, // 開(kāi)啟打印前的回調(diào)事件
        openCallback() {
        }, // 調(diào)用打印之后的回調(diào)事件
        closeCallback() {
          console.log('關(guān)閉')
        }, // 關(guān)閉打印的回調(diào)事件（無(wú)法確定點(diǎn)擊的是確認(rèn)還是取消）
        url: '',
        standard: '', // strict
        extraCss: '',
        asyncUrl(reslove, vue) {
          // vue 可以指向 data
        } // 異步url，用于請(qǐng)求Api
      },
   }
}

二、 區(qū)域打印 （也可以理解為頁(yè)面排版答應(yīng) 需要配置 區(qū)域模塊id類名）引入的方式同一樣 一般在data下 print 對(duì)象下 配置

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