//request.js
service.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 であることがわかりました (ただし、データはブラウザーのコンソールからは見ることができません) ) なので、request.js を次のように変更する必要があります。
const res = response.data
// 下载文件
if (!res.code) {
return response.data //等同于 return res
}
この時点で、印刷された解像度には、「TypeError: 'URL' で 'createObjectURL' の実行に失敗しました: オーバーロードの解決に失敗しました」というエラー レポートはなく、画像は正常にダウンロードされたことがわかりました。
2 番目の方法があります: 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
})
印刷された解像度は変更されていないことがわかります
が、「TypeError: Failed to run 'createObjectURL' on 'URL': Overload solution failed」エラーはなく、a.download = 'QR code.png' が a.download になっていることがわかります。 =「QRコード」、画像も正常にダウンロードされました。