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

1、安装vue-pdf插件

npm I vue-pdf -S

 2、组件中引入

import pdf\nfrom 'vue-pdf'

components: {
pdf
}

3、组件中使用

<pdf

        v-for="i in pdfInfo.numPages"

        :key="i"

        :src="pdfInfo.src"

        :page="i"

        style="display: inline-block;\nwidth: 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)\n{

        this.pdfInfo.loadFinished = false

        this.pdfInfo.fullscreenLoading = true

        this.pdfInfo.src =\npdf.createLoadingTask(encodeURI(iobsFileUrl));

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

          // 加载完成再显示

          this.pdfInfo.loadFinished = true

          this.pdfInfo.fullscreenLoading =\nfalse

          this.pdfInfo.numPages =\npdfValue.numPages;

        });

      },