vue-pdf的使用方法及解決在線打印預覽亂碼

最近在用vue作項目的時候，頁面中須要展現後端返回的PDF文件，因而便用到了vue-pdf，其使用方法爲 ：

npm install --save vue-pdf

官網地址：https://www.npmjs.com/package/vue-pdf

很少說了，直接上代碼：

<template>
  <div>
    <div class="parent">
      <button @click="$refs.pdf.print()">打印</button>
      <pdf ref="pdf" :src="src" :page='currentPage' @progress='getProgress' @page-loaded="currentPage=$event" @loaded="loadPdfHandler"></pdf>
    </div>
    <el-pagination background layout="prev, pager, next" :page-size="1" :total="numPages" @current-change="changePage">
    </el-pagination>
  </div>
</template>

<script> import pdf from 'vue-pdf'
  const src = pdf.createLoadingTask('./static/bm.pdf'); export default { data() { return { src, numPages: 100, currentPage: 1 } }, methods: { changePage(page) { this.currentPage = page; }, getProgress(e) { console.log('加載進度：',e); }, loadPdfHandler(){ console.log('PDF加載完成啦'); } }, mounted() { this.src.then(pdf => { this.numPages = pdf.numPages; }); }, components: { pdf }, } </script>

<style scoped> .parent { width: 1000px; margin: 0 auto; } </style>

代碼中引用了element-UI中的分頁，能夠將PDF文件分頁展現在頁面中，可是在點擊打印按鈕時，卻出現了亂碼：

 

 最後經過尋找答案，發現原始的打印頁面,PDF格式亂碼,主要是由於PDF裏使用了自定義字體,不能識別，其解決方案爲：

須要修改 node_moduls 中 vue-pdf 安裝包的 pdfjsWrapper.js 文件

其中pdfjsWrapper.js爲我修改後的文件，pdfWrapper1.js爲原始未修改過的文件。

其修改可參考如下連接：

git-hup地址:https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7,

修改以後，在此點擊打印按鈕，發現已經正常了：