版權

國慶突如其來的加班q.q，上午接到的需求，只能起床啦

自己也是第一次接觸這種業(yè)務需求，進行了一頓cv大法，網(wǎng)上有很多版本，個人學習借鑒（cv）了一下，在這里做個學習記錄，歡迎各位指正優(yōu)化，參考學習，如有侵權立即刪除。

printDialog.vue（PDF使用彈窗展示，確認btn打?。?/p>

HTML

<template>

  <div>

    <el-dialog title="打印" :visible.sync="dialogVisible" width="50%">

        <div class="box">

          <pdf ref="pdf" :src="pdfUrl"></pdf>

        </div>

      <span slot="footer" class="dialog-footer">

        <el-button @click="dialogVisible = false">取 消</el-button>

        <el-button

          type="primary"

        @click="$refs.pdf.print()"

          >確 定</el-button

        >

      </span>

    </el-dialog>

  </div>

</template>

js

<script>

//插件vue-pdf-signature

import pdf from "vue-pdf-signature";

import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory.js";

export default {

    components: {

    pdf,

  },

  data() {

    return {

      dialogVisible: false,

      pdfUrl:''

    };

  },

  methods:{

      init(res){

          this.dialogVisible = true;

          this.getObjectURL(res)

      },

      // 將返回的文件流數(shù)據(jù)轉換為url（data: 文件流數(shù)據(jù)）

    getObjectURL(data) {

      let url = null;

      let file = new Blob([data], { type: "application/pdf" });

      if (window.createObjectURL != undefined) {

        // 通用

        url = window.createObjectURL(file);

      } else if (window.webkitURL != undefined) {

        // 兼容谷歌

        try {

          url = window.webkitURL.createObjectURL(file);

        } catch (error) {}

      } else if (window.URL != undefined) {

        // 兼容其他

        try {

          url = window.URL.createObjectURL(file);

        } catch (error) {}

      }

      //這里是重點，將處理的url使用CMapReaderFactory方法在進行處理

      url = pdf.createLoadingTask({ url: url, CMapReaderFactory });

      // 將轉化后url賦值

      this.pdfUrl = url;

    },

  }

};

</script>

父組件.vue（btn點擊）

HTMl

<el-button size="small" type="primary" @click="subscriptionPrinting()"

          >打印</el-button>

//彈窗

<print-dialog ref="printDialog" ></print-dialog>

js

<script>

import printDialog from "./printDialog.vue";

export default {

  components: {

    printDialog,

  },

  methods:{

  subscriptionPrinting() {

      this.$http

        .get(

          `請求~~~`,

          {

            responseType: "blob",//這個必須帶

          }

        )

        .then(({ data: res }) => {

          this.$refs['printDialog'].init(res);

        });

    },

  }

</script>

以上就是全部代碼了，坑還是比較多的以下來進行總結

1.插件的使用

  使用的是vue-pdf-signature而不是vue-pdf，是因為vue-pdf在第一次正常打開會正常顯示，第二次打開會顯示空白，控制臺會提示報錯（Error during font loading: Failed to execute 'postMessage' on 'Worker': ArrayBuffer at index 0 is already detached），vue-pdf-signature是大佬針對vue-pdf出現(xiàn)的這一問題進行的改良版。細看可前往大佬鏈接~

vue-pdf踩坑指南_快進小樹林的博客-CSDN博客

2.不顯示中文

  通過引入CMapReaderFactory.js解決，但是引入會出現(xiàn)1所描述的問題，所以采用了vue-pdf-signature進行解決（崇拜大佬ing）

3.向后端請求解析失敗問題（顯示空白，控制臺提示報錯）

  在請求中添加{

             responseType: "blob",//這個必須帶

            }即可解決。

  請求回的文件流所做的數(shù)據(jù)處理在上面代碼有注釋，詳看翻上

4.打印調(diào)用$refs.pdf.print()即可。

————————————————

版權聲明：本文為CSDN博主「荒蕪 i」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議，轉載請附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/zsz_1309297338/article/details/127185435