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);
          }
      });
相关推荐
一个游离的指针2 小时前
函数管道:消除深度嵌套调用
前端·javascript
柚yuzumi3 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙3 小时前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript
用户938515635074 小时前
大模型记忆指南:从短时缓存到永久记忆,手把手带你吃透 LangChain Memory 管理
javascript·人工智能
xqchen4 小时前
Web Components 普及困境深度解析:技术标准与工程实践的落差
javascript
爱丶不疚4 小时前
写给前端工程师的现代 Python 工程化最佳实践:从 pnpm 到 uv,从 CommonJS 到 src-layout
javascript·python·typescript
Dreams°1234 小时前
【Java后端+Vue前后端分离:内网正常、公网访问异常|5个高频经典踩坑完整复盘】
java·开发语言·vue.js
小蒜学长5 小时前
基于Springboot+Vue的环保行动志愿者招募系统设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
天道kabuto5 小时前
踩坑复盘:为什么在输入框按个回车,页面就偷偷刷新了?
vue.js
2601_962097486 小时前
JavaScript 异步编程
javascript·ajax·回调函数·异步编程·子线程