vue-pdf 预览pdf (数据流)

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

1.安装插件:

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

    import pdf from 'vue-pdf'

    ...
    components: {pdf},

  2. html中添加:

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);
          }
      });
相关推荐
小新1103 分钟前
最简单但完整的 Vue 响应式示例(一个简单的计数器按钮)
前端·javascript·vue.js
川冰ICE5 分钟前
JavaScript进阶④|Symbol与元编程,对象的隐藏身份
开发语言·javascript·ecmascript
2601_961194029 分钟前
2026六级词汇PDF下载|大学英语六级单词表+音频PDF
windows·git·eclipse·pdf·github
水煮白菜王23 分钟前
开源 AI 桌宠 Clawd on Desk:让 Claude Code 的状态从终端‘蹦‘到桌面
javascript·人工智能·开源
吃口巧乐兹1 小时前
异步异常处理:AggregateException 的拆解与最佳实践
javascript
柒和远方1 小时前
每日一学V017:用 Prompt 做 NLP:解构赋值与 AI 全栈的第一次实战
javascript·架构·代码规范
刘海不能乱161 小时前
Java JUC源码分析系列笔记-Synchronized
vue.js
砍材农夫1 小时前
物联网实战:Spring Boot MQTT | 模拟器Paho客户端拆解高性能
java·javascript·spring boot·后端·物联网·struts
代码小库2 小时前
【2026前端最新面试题——day10】JavaScript 高频面试题
开发语言·前端·javascript
零陵上将军_xdr2 小时前
后端转全栈学习-Day4-JavaScript 基础-2
开发语言·javascript·学习