弹框使用vue-pdf实现在线预览pdf文件

<el-dialog
      class="pdfpreview"
      :visible.sync="pdfPreviewDialog"
      title="操作手册在线预览"
      width="70%"
      v-if="pdfPreviewDialog"
      :close-on-click-modal="false"
    >
      <pdf
        v-for="i in numPages"
        :key="i"
        :src="src"
        :page="i"
        style="width: 100%"
        ref="pdf"
      ></pdf>
    </el-dialog>

　　

import pdf from 'vue-pdf';

　　

components: {
         pdf
    },

　　

      HelpCenter() {
       this.pdfPreviewDialog = true;
        // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
         this.src = pdf.createLoadingTask(this.pdfUrl);
        this.src.promise.then((pdf) => {
          this.numPages = pdf.numPages;
        });
        //window.open(this.pdfUrl, '_blank');
      }

　　

1、安装插件

npm install --save vue-pdf

2、卸载插件

npm uninstall vue-pdf