当前位置:首页 » 《关注互联网》 » 正文

有关后端返回文件流或base64文件,前端如何实现图片展示和下载

15 人参与  2024年09月23日 11:21  分类 : 《关注互联网》  评论

点击全文阅读


后端返回的文件流,前端怎么把图片显示出来

 1.多年前端开发经验的我目前用的最多的是:直接将请求地址写在src里面,如:
<img src="/file/preview/picture.png" alt="图片">

 2.由于后台加上鉴权后,需要每个接口在header里面加上token,上面的做法就行不通了,需要发送请求获得文件流

const file_data = res.data // 后端返回的文件流 const blob = new Blob([file_data])const url = window.URL.createObjectURL(blob) // image中src的链接

3.后台返回base64文件

srcurl= 'data:application/octet-stream;base64,' + res
js下载后端返回的文件

1.后端返回文件流形式,前端下载

// res 为后端返回的响应对象 const file_data = res.data // 后端返回的文件流 const blob = new Blob([file_data])const url = window.URL.createObjectURL(blob) // 创建下载的链接const file_name = decodeURI(res.headers['content-disposition'].replace('attachment;filename=', '')) // 需要后端暴露请求头'Content-Disposition'console.log(file_name) // 从请求头获取文件名const downloadElement = document.createElement('a')downloadElement.style.display = 'none'downloadElement.href = urldownloadElement.download = file_name // 下载后文件名document.body.appendChild(downloadElement)downloadElement.click()document.body.removeChild(downloadElement) // 下载完成移除元素window.URL.revokeObjectURL(url) // 释放掉blob对象注:如果下载文件变大打不开,可以设置 responseType: 'arraybuffer'async reqestApi(param) {    const res = await axios.get('exportExeclData', { params: param, responseType: 'arraybuffer' })    }

2.后端返回base64格式,前端下载

// res 后端返回的文件base64 const link = document.createElement('a')link.href = 'data:application/octet-stream;base64,' + reslink.download = '下载的文件名'link.click()


点击全文阅读


本文链接:http://zhangshiyu.com/post/163344.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1