vue项目通过npm 引入pdf.js 并预览pdf文件

)

废话不多说 直接上才艺

首先需要引入vue-pdf 通过

npm install vue-pdf -D

或者

cnpm install vue-pdf -D

其次，需要在项目中引用

import pdf from 'vue-pdf'

在html中
<pdf :src="pdfSrc" v-for="i in numPages" :key="i" :page="i"/>

components中

 components: { pdf }

data()中

data () {
	return { 
		pdfSrc:'',
 		numPages:0
	}
}

js方法

 let res = await 你的二进制pdf文件流获取函数()
  this.pdfTask(res)
   pdfTask(res){
        var self = this
        self.pdfSrc=  this.getObjectURL(res);
        var loadingTask = pdf.createLoadingTask(self.pdfSrc)  
        loadingTask.then(pdf => {
          self.pdfSrc = loadingTask
          self.numPages = pdf.numPages// 这里得到pdf的页数
        }).catch()
      },
     // 将返回的流数据转换为url
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          try {
            url = window.webkitURL.createObjectURL(file);
          } catch (error) {
            console.log(error)
          }
        } else if (window.URL != undefined) { // mozilla(firefox)
          try {
            url = window.URL.createObjectURL(file);
          } catch (error) {
            console.log(error)
          }
        }
        return url;
      }

结束

请求头部一定要加上 { responseType: 'blob' }