vue文件流轉換成pdf預覽(pdf.js+iframe)&&使用vue-pdf實現pdf預覽

需求：后端返回文件流前端將文件流轉為成blob地址預覽pdf文件

兩種方式：

1，PDFJS: https://mozilla.github.io/pdf.js/ 支持獲取文件流到客戶端，生成blob地址預覽

2，Vue-pdf https://github.com/FranckFreiburger/vue-pdf 會出現空白頁( 推薦使用iframe方法 )

一，官網(https://mozilla.github.io/pdf.js/getting_started/#download)下載PDFJS，注意放在static文件目錄下，如果vue最新版本放在public文件中（本項目@vue/cli 4.4.6）

 在axios請求中設置響應類型,此方法是自己項目中封裝的axios請求，可根據自己情況加這行代碼

responseType: 'blob',

頁面中使用

    <el-dialog title="PDF 預覽" :visible.sync="viewVisible" width="70%" center>
      <template>
        <iframe class="prism-player" :src="pdfUrl" width="100%" height="800px"></iframe>
      </template>
    </el-dialog>

   data() {

      return {

        pdfUrl:'',

        viewVisible:false,

      }

  }

在返回的數據將文件流轉為成blob地址預覽pdf文件

            let urlPdf  = window.URL.createObjectURL(new Blob([res.data]))
            console.log('urlPdf',urlPdf) //blob:http://localhost:8080/e8451cb8-3238-4272-b490-0420df4a5b88
            this.pdfUrl = '/pdf/web/viewer.html?file=' + encodeURIComponent(urlPdf)
            this.viewVisible = true

后台返回的文件流：

 

 pdf預覽：

 

 

二，vue-pdf

下載vue-pdf包

npm i vue-pdf -save

局部引入使用

    <el-dialog title="PDF 預覽" :visible.sync="viewVisible" width="70%" center>

      <template>

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

      </template>

    </el-dialog>

<script>
import pdf from 'vue-pdf'
export default {
    components: {pdf},
　data:{
　　return {
　　　　pdfUrl : ""
　　}
　}
    create(){

    　　let path = 'http://image.cache.timepack.cn/nodejs.pdf' //后台返回pdf文件路徑

    　　this.pdfUrl = pdf.createLoadingTask(path)

　}
}
</script>