vue-pdf 实现blob数据的预览

  1. 安装vue-pdf

npm install vue-pdf

  1. 页面引用:

    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加载失败");
                    });
                  } 
})
相关推荐
csgo打的菜又爱玩1 小时前
Vue 基础(实战模板与命名指南)
前端·javascript·vue.js
gerrgwg3 小时前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端·javascript·vue.js
开心不就得了5 小时前
自定义脚手架
前端·javascript
星晨雪海7 小时前
怎么格式化idea中的vue文件
前端·vue.js·intellij-idea
没事多睡觉6667 小时前
Vue 虚拟列表实现方案详解:三种方法的完整对比与实践
前端·javascript·vue.js
excel7 小时前
Vue3 EffectScope 源码解析与理解
前端·javascript·面试
细节控菜鸡8 小时前
【2025最新】ArcGIS for JS 实现地图卷帘效果
开发语言·javascript·arcgis
心.c10 小时前
一套完整的前端“白屏”问题分析与解决方案(性能优化)
前端·javascript·性能优化·html
俺会hello我的11 小时前
舒尔特方格开源
前端·javascript·开源