vue-pdf在线预览pdf文件及遇到的问题

vue-pdf在线预览pdf文件

1. 安装vue-pdf

 cnpm i -D vue-pdf    // 

2. 在页面中使用（.vue）

<template>
   <div>
   	<pdf  :src="srcPdf"/>
   </div>
 </template>
<script>
import pdf from 'vue-pdf' // 引入插件
  components: { pdf },
  data() {
    return {
      pdfsrc: '',  // pdf文件地址
         };
  }
};
</script>

即此时pdf文件展示，且只展示一页，
如需展示多页需使用createLoadingTask函数进行如下操作：
html代码改写为：

<pdf ref="pdf" v-for="i in page" :key="i" :src="srcPdf" :page="i"/>

js代码改写为：

<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf
  },
  data() {
    return {
      pdfUrl:"", //pdf文件路径
      page: 1,
      srcPdf:'' //需要预览得pdf
    }
  },
 mounted(){
 this.getDetails()
 },
  methods: {
    getDetails() {
      this.srcPdf = pdf.createLoadingTask(this.pdfUrl);
      this.srcPdf.then(pdf => {
              this.page = pdf.numPages;
            })
            .catch(err => {
              console.error("pdf加载失败");
            });
    },
  }
}
</script>

至此显示全部页面的pdf页面

引入vue-pdf遇到得问题：

1. 页面提示，如下图
   
   this.srcPdf为自己定义得变量，视自己情况而定
   解决方法： this.srcPdf后添加promise

 this.srcPdf.promise.then(pdf => {
              this.numPages = pdf.numPages;
            })
            .catch(err => {
              console.error("pdf加载失败");
            });

运行后提示取消，页面正常显示