源码哥,靠谱的网站源码下载站 帮助 每日签到

源码哥

广告位《资讯详情页横幅-1150*?》

后端response响应返回图像,前端怎么下载图片?

  • 发布者:源码哥 时间:2022-09-23 10:17 阅读:31
  • 扫一扫,手机访问
广告位《资讯详情页摘要上方横幅-828*?》
摘要:在上一篇文章中,我介绍了很多关于文件下载的内容。当然,也有跨域映像下载JFIF格式的解决方案和前端zip包的下载等映像的下载。后端返回cdn图像地址。要下载吗?上一篇文章介绍了下载方法和遇到的问题。但是,这里发生了问题。后端返回cdn地址。前端下载将转换为原始图像,而不是原始图像。如果后端图像大小为30kb,则它是压缩的,但后续图像的大小通常为60kb,而不是原始后端图像的大小。那么,如何直接下载从后端返回的图像?响应将图像直接返回到前

在上一篇文章中,我介绍了很多关于文件下载的内容。当然,也有跨域映像下载JFIF格式的解决方案和前端zip包的下载等映像的下载。后端返回cdn图像地址。要下载吗?上一篇文章介绍了下载方法和遇到的问题。


但是,这里发生了问题。后端返回cdn地址。前端下载将转换为原始图像,而不是原始图像。如果后端图像大小为30kb,则它是压缩的,但后续图像的大小通常为60kb,而不是原始后端图像的大小。那么,如何直接下载从后端返回的图像?响应将图像直接返回到前端。前端怎么下载图片?


有几种方法可以下载前端从后端返回的文件。实际响应中返回的图像和Excel分为get请求和post请求。如果是get请求方法,则非常简单,可以通过Excel直接打开后端接口的地址。可以下载,可以直接模拟照片点击,可以下载后端接口地址的照片。不好。必须在ajax请求之后下载。关于帖子格式的响应,有图片或视频。无论后端如何,数据流都保持二进制缓冲区。下载表格只有一个,我来介绍一下。


返回帖子地址响应的图像下载方法


将responseType:'blob'添加到请求request中,例如1:axiso。


请记住,在其他地方必须是无效的请求。例如:


const service = axios.create({
  baseURL: 'https://www.ymg.cc', // url = base url + request url
  withCredentials: true // send cookies when cross-domain requests
})
service.interceptors.request.use(
  config => {
    if(config.url.indexOf('haorooms/imagedownload')!=-1){
      config.responseType ='blob'
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

二、转换为blob


let blob = new Blob([res])

三、创建地址,下载图片


let url = window.URL.createObjectURL(blob)
let downloadElement = document.createElement("a")
downloadElement.style.display = "none";
downloadElement.href = url
downloadElement.download = `${haorooms.imageName}${imageType == 'JPG' ? '.jpg' : '.png'}`
document.body.appendChild(downloadElement)
downloadElement.click()
document.body.removeChild(downloadElement)
window.URL.revokeObjectURL(url)

此方法对各种后端二进制数据均有效。


get请求下载excel

window.location.href 
= `${origin}/downloadExcel?haoroomsquery=${encodeURIComponent
(JSON.stringify(queryData))}`


扩展阅读


关于canvas下载图片,JFIF格式下载jpg图片,可以阅读文章https://www.ymg.cc/post/jpg_jfif_change_zipzip软件包。


相关连接: 网站源码 企业网站源码

  • 全部评论(0)
上一篇:如何轻松学习JavaScript
下一篇:已是最后一篇内容
广告位《资讯详情页最新发布上方横幅-828*?》
最新发布的资讯信息
【网站开发|HTML】html编码设置(2022-10-17 11:26)
【网站开发|HTML】html添加注释的方法(2022-10-17 11:25)
【网站开发|HTML】html元素(2022-10-17 11:23)
【网站开发|HTML】html属性介绍(2022-10-17 11:22)
【网站开发|HTML】html标签说明(2022-10-17 11:21)
【网站开发|HTML】html的基本结构(2022-10-17 11:20)
【行业资讯|】如何学习好网站前端开发?(2022-10-14 14:53)
【网站开发|JavaScript】如何轻松学习JavaScript(2022-10-14 14:26)
【网站开发|node.js】NodeJS Service Docker映像终极优化指南(2022-10-14 14:14)
【网站开发|JavaScript】后端response响应返回图像,前端怎么下载图片?(2022-09-23 10:17)
联系我们
Q Q:472206683
微信:472206683
邮箱:472206683@qq.com
时间:09:00 - 24:00
联系客服
售前咨询 网站搭建 技术支持 联系客服
18639176864
手机版
手机版二维码
扫一扫进手机版
返回顶部