html : 코드
<div class="btnWrap" style="margin-top:30px;">
<el-button type="success" @click="downLoad_lower">线下二维码下载</el-button>
</div>
백그라운드에서 사진 주소 요청 :
// 线下二维码下载
downLoad_lower() {
let data = {
type: 2,
id: this.id
};
queryGoodsQRCode(data).then(res => {
console.log(res);
if (res.data.messageCode == "MSG_1001") {
this.download(res.data.content);
} else {
this.$message.error(res.data.message);
}
});
},
사진 다운로드 :
// 下载文件
download(data) {
if (!data) {
return;
}
this.getUrlBase64(data).then(base64 => {
let a = document.createElement("a");
a.style.display = "none";
a.download = this.name;
a.href = base64;
document.body.appendChild(a);
a.click();
});
},
注意:
여기에 구덩이가 있습니다. 백그라운드에서 이미지를 요청하는 경우 a 태그의 href가 IP 주소이면 a 태그의 다운로드 속성이 현재 유효하지 않으며 a가 일반 링크로 사용됩니다.
해결 방법 1 : 라우팅 점프를 방지하기 위해 다운로드 할 이미지 링크를 base64 형식으로 변환
getUrlBase64(url) {
return new Promise(resolve => {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let img = new Image();
img.crossOrigin = "Anonymous"; //允许跨域
img.src = url;
img.onload = function() {
canvas.height = 300;
canvas.width = 300;
ctx.drawImage(img, 0, 0, 300, 300);
let dataURL = canvas.toDataURL("image/png");
canvas = null;
resolve(dataURL);
};
});