vue实现点击下载图片到本地
html:代码<div class="btnWrap" style="margin-top:30px;"><el-button type="success" @click="downLoad_lower">线下二维码下载</el-button></div>后台请求图片地址:// 线下二维码下载downLoad_lower(...
·
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标签的download属性会失效,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);
};
});
更多推荐
已为社区贡献2条内容
所有评论(0)