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加载失败");
                    });
                  } 
})
相关推荐
开发者小天3 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
落落鱼20136 小时前
Dompdf库html生成pdf时editor编辑器中文本长度被截断不会自动换行问题处理
pdf·编辑器·php·html生成pdf
学习笔记1017 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
程序员杨工8 小时前
【原创】SpringBoot3+Vue3客户管理系统
vue.js·springboot
theOtherSky9 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
会联营的陆逊10 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over69710 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
「QT(C++)开发工程师」10 小时前
【LUA教程】LUA脚本语言中文教程.PDF
开发语言·pdf·lua
Amy_cx10 小时前
搭建React Native开发环境
javascript·react native·react.js