后端返回二进制流，前端处理二进制文件流，实现预览图片以及PDF

__冬七

已于 2025-02-10 16:57:23 修改

阅读量6.1k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： js vue2 文章标签： javascript vue.js

于 2023-02-22 21:28:25 首次发布

本文链接：https://blog.youkuaiyun.com/snows_l/article/details/129170798

js 同时被 2 个专栏收录

20 篇文章

订阅专栏

13 篇文章

订阅专栏

文章讲述了前端如何处理后端返回的PDF内容以实现预览，关键在于后端设置Content-Type为application/pdf，前端使用get方法并设定responseType为blob。通过window.URL.createObjectURL将响应转换为本地预览地址，利用window.open进行预览。对于图片，相同方法可将本地预览地址赋值给Vue中的el-image组件实现显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

个人博客（纯手戳产物 vue3 + nodejs + mysql ）http://snows-l.site

1、首先预览PDF需要后端将响应头Content-Type 设置为PDF类型application/pdf，不能预览，会直接下载

2、前端定义接口：并设置相应类型responseType为blob

// 合同预览Pdf
export function viewContractTypePdf(id) {
  return request({
    url: `/attract/talentApartment/exportContract/${id}`,
    method: "get",
    responseType: "blob"
  })
}

请求数据：通过window.URL.createObjectURL(res)转成本地预览地址，在通过window.open()方法打开转成本地预览地址即可预览PDF,如下图

图一

预览图片：直接将window.URL.createObjectURL(res)转成的本地预览地址赋值给Img的src即可展示图片

// vue中
// template
<el-image :src="imgUrl" fit="fill" ></el-image>


//methods
handleViewPDF() {
   viewContractTypePdf(this.baseInfo.talentId).then(res => {
     this.imgUrl = window.URL.createObjectURL(res)
   })
}