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

最新推荐文章于 2024-09-10 19:01:27 发布

guoyufeng1314

最新推荐文章于 2024-09-10 19:01:27 发布

阅读量6k

点赞数 1

文章标签： vue js html javascript

本文链接：https://blog.csdn.net/guoyufeng1314/article/details/106253757

版权

vue项目通过npm 引入pdf.js 并预览后端传来的二进制流pdf文件

废话不多说直接上才艺
- js方法
- 结束

)

废话不多说直接上才艺

首先需要引入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;
      }