在上一篇文章中，我介绍了很多关于文件下载的内容。当然，也有跨域映像下载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软件包。

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