vue-pdf 实现blob数据的预览

1. 安装vue-pdf

npm install vue-pdf

2. 页面引用：

   import pdf from "vue-pdf";
   ...
   components: { pdf },

3.页面加入pdf

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

4.获取文件

api.then(res=>{
   let data =res.data
   const binaryData = [];
   binaryData.push(data);
   //获取blob链接
   let pdfUrl = window.URL.createObjectURL(
       new Blob(binaryData, { type: "application/pdf" })
   );
   if (pdfUrl) {
        var loadingTask = pdf.createLoadingTask(pdfUrl);
        that.pdfUrl = pdfUrl;
        loadingTask.promise
                .then((pdf) => {
                    that.pageTotal = pdf.numPages;
                 })
                 .catch((err) => {
                      console.error("pdf加载失败");
                    });
                  } 
})