vue-pdf插件实现pdf在线预览

作者: 图恩分类: 开发笔记阅读: 872字数: 955发布时间： 2021-05-31 18:48:01

1、安装vue-pdf插件

npm I vue-pdf -S

2、组件中引入

import pdf from 'vue-pdf'

components: {
pdf
}

3、组件中使用

<pdf

v-for="i in pdfInfo.numPages"

:key="i"

:src="pdfInfo.src"

:page="i"

style="display: inline-block; width: 100%;border-bottom:10px solid #eee">

</pdf>

4、定义pdfInfo变量，主要用到src跟numpages，分别为pdf文件地址和页码

Data:

pdfInfo:{

loadFinished: false,

src: null,

numPages: undefined,

fullscreenLoading: false

5、方法调用，一般在获取文件地址后调用该方法，

this.loadPdfFile(this.iobsFileUrl)

Methods:

loadPdfFile(iobsFileUrl) {

this.pdfInfo.loadFinished = false

this.pdfInfo.fullscreenLoading = true

this.pdfInfo.src = pdf.createLoadingTask(encodeURI(iobsFileUrl));

this.pdfInfo.src.promise.then(pdfValue => {

// 加载完成再显示

this.pdfInfo.loadFinished = true

this.pdfInfo.fullscreenLoading = false

this.pdfInfo.numPages = pdfValue.numPages;

});