前端预览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>
相关推荐
爱分享的程序员几秒前
前端面试专栏-算法篇:17. 排序算法
前端·javascript·node.js
lichenyang4531 分钟前
react案例动态表单(受控组件)
前端
Jackson_Mseven1 分钟前
面试官:useEffect 为什么总背刺?我:闭包、ref 和依赖数组的三角恋
前端·react.js·面试
哎呦你好18 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放27 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao44 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo44 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er1 小时前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年1 小时前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er1 小时前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js