//request.jsservice.interceptors.response.use( (response) => { const res = response.data // 下载文件 if (!res.code) { return response } ... }, (error) => { ... }

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 => { console.log(res,'res'); var a = document.createElement('a') document.body.appendChild(a) a.style = 'display: none' let url = window.URL.createObjectURL(res); a.href = url a.download = '二维码.png' a.click() a.remove() window.URL.revokeObjectURL(url) // 释放url})

发现报错：

同时，发现接口是有返回值的：

再看打印的res：

发现打印的res并不是最后我们需要的Blob值，我们需要的是Blob类型的值，发现正是res.data（但是从浏览器控制台并不能看出data），所以应该修改request.js为：

const res = response.data // 下载文件 if (!res.code) { return response.data //等同于 return res }

此时发现打印的res为：

也没有“TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed”这个报错了，成功下载了图片。

还有第二种方法：创建一个Blob

downloadQrcode({ id: this.id}).then(res => { console.log(res,'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 })

发现打印的res没变

但是也没有出现“TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: Overload resolution failed”报错，而且a.download = '二维码.png’变成了a.download = ‘二维码’，也成功下载了图片。