vue-pdf 预览pdf (数据流)

页面有个要预览pdf的需求,数据是从后台传递过来的数据流:

1.安装插件:

复制代码
npm install vue-pdf
  1. 在页面引用:

    import pdf from 'vue-pdf'

    ...
    components: {pdf},

  2. html中添加:

    <pdf :src="pdfUrl"></pdf>

4.通过接口获取数据:

javascript 复制代码
  downloadFile({ id: this.id }).then((res) => {
        if (
          (!res && res.status != 200) ||
          (res.data &&
            res.data.type == "application/json")
        ) {
          this.$message.error("找不到该文件");
          return;
        }
          var binaryData = [];
          binaryData.push(res.data);
          // 记得一定要设置application的类型
          let url = window.URL.createObjectURL(
            new Blob(binaryData, {
              type: "application/pdf;charset=utf-8",
            })
          );
          if (url) {
            this.pdfUrl = pdf.createLoadingTask(url);
          }
      });
相关推荐
Sheldon一蓑烟雨任平生1 小时前
Vue3 插件(可选独立模块复用)
vue.js·vue3·插件·vue3 插件·可选独立模块·插件使用方式·插件中的依赖注入
鱼与宇3 小时前
苍穹外卖-VUE
前端·javascript·vue.js
用户47949283569153 小时前
Safari 中文输入法的诡异 Bug:为什么输入 @ 会变成 @@? ## 开头 做 @ 提及功能的时候,测试同学用 Safari 测出了个奇怪的问题
前端·javascript·浏览器
开开心心就好3 小时前
电子报纸离线保存:一键下载多报PDF工具
网络·笔记·macos·pdf·word·音视频·phpstorm
裴嘉靖3 小时前
Vue 生成 PDF 完整教程
前端·vue.js·pdf
毕设小屋vx ylw2824263 小时前
Java开发、Java Web应用、前端技术及Vue项目
java·前端·vue.js
冴羽4 小时前
今日苹果 App Store 前端源码泄露,赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁4 小时前
Angular【router路由】
前端·javascript·angular.js
时间的情敌4 小时前
Vite 大型项目优化方案
vue.js
西洼工作室5 小时前
高效管理搜索历史:Vue持久化实践
前端·javascript·vue.js