vue 图片下载，下载后端接口返回的blob类型的文件（图片）

qq_46302247

已于 2023-04-07 16:34:38 修改

阅读量639

点赞数

文章标签： vue.js javascript ecmascript

于 2023-04-07 15:11:53 首次发布

本文链接：https://blog.csdn.net/qq_46302247/article/details/130012844

版权

这段代码展示了如何使用一个名为downloadQrcode的函数来调用接口下载二维码。通过设置请求方法为GET，响应类型为blob，并处理返回的数据创建一个可下载的PNG图片链接。最后，通过创建HTML的a标签模拟点击下载，并释放内存中的URL。

摘要由CSDN通过智能技术生成

参考：https://www.jianshu.com/p/cda41dd5a3df

export function downloadQrcode(params) {
  return request({
    url: '/multiplayer-draw/download-qrcode',
    method: 'get',
    // headers: { 'Content-Type': 'image/png; charset=UTF-8' }, //此行可以省略
    responseType: 'blob',		// response类型
    params
  })
}

 downloadQrcode({id: this.id}).then(res => {
   var a = document.createElement('a')
   document.body.appendChild(a)
   a.style = 'display: none'
   let blob = new Blob([res], {
     type: "image/png",
   }); 
   let url = window.URL.createObjectURL(blob); 
   a.href =  url
   a.download = '二维码'
   a.click()
   a.remove()
   window.URL.revokeObjectURL(url) // 释放url
 })