前端预览pdf文件(后端返回pdf文件流)

前端预览pdf文件(后端返回pdf文件流)

怎么判断后端是不是返回的文件流?

我的后端给的接口直接在浏览器输入完整地址会自动下载pdf文件,这样就是返回的pdf文件流,亲试比较方便的有iframe和直接window.open临时地址.

window.open临时地址.
复制代码
 fetch(
          `${this.$config.VUE_APP_BASE_API}/api/ai/knowledge/api/preview?fileId=${data.fileId}`,//你的pdf文件下载路径
          {
            headers: {
              Authorization: getToken(),
            },
            method: "GET",
            responseType: "arraybuffer",//一定是这个 前面一直填的"blob"一直不成功,改成这个就好了
          }
        )
          .then((res) => res.blob())
          .then((res) => {
            const binaryData = [];
            binaryData.push(res);
            //获取blob链接
            this.pdfSrc = window.URL.createObjectURL(
              new Blob(binaryData, { type: "application/pdf" })
            );
            window.open(this.pdfSrc); //此地址也可直接填入iframe的src中以达到预览的目的
          });
iframe
复制代码
<iframe style="width: 800px; height: 500px" :src="pdfSrc"></iframe>
    </div>
相关推荐
不会算法的小灰7 分钟前
HTML简单入门—— 基础标签与路径解析
前端·算法·html
zero13_小葵司10 分钟前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing10 分钟前
前端框架篇——Vue&React篇
前端·javascript
面向星辰12 分钟前
css其他选择器(精细修饰)
前端·css
子兮曰16 分钟前
WebSocket 连接:实现实时双向通信的前端技术
前端·javascript·websocket
宁雨桥18 分钟前
从视口到容器:CSS 容器查询完全指南
前端·css
wu~9701 小时前
web服务器有哪些?服务器和web服务器有什么区别
运维·服务器·前端
FIN66681 小时前
募投绘蓝图-昂瑞微的成长密码与未来布局
前端·后端·5g·云原生·信息与通信·射频工程·芯片
cooldream20091 小时前
深度解析中秋节HTML5动画的实现
前端·html·html5
zhangfeng11332 小时前
R 导出 PDF 时中文不显示 不依赖 showtext** 的最简方案(用 extrafont 把系统 TTF 真正灌进 PDF 内核)
开发语言·r语言·pdf·生物信息