vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容

一。vue-pdf

1. 安装vue-pdf

npm   install --save  vue-pdf

2.页面引入 js部分

import pdf from "vue-pdf";
 
data(){
   
   
 return {
   
   
 	pdfUrl: "",
    pageTotal: 0,
 }
}

mounted(){
   
   
  this.pdfUrl = pdf.createLoadingTask(pdf文件路径url);
 // 获取页码
 this.pdfUrl.promise .then((pdf) => (this.pageTotal = pdf.numPages))
  .catch((error) => {
   
   });
}

3.html部分

<pdf
  v-for="item in pageTotal"
        :src="pdfUrl"
        :key="item"
        :page="item"
    >
    </pdf