vue中下载图片功能：

Change!!

于 2024-07-13 11:45:14 发布

阅读量63

点赞数

分类专栏：下载图片到浏览器文章标签：前端下载图片

本文链接：https://blog.csdn.net/weixin_46172085/article/details/140397358

版权

下载图片到浏览器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点击按钮-下载图片：

例1：
//html: img的后台返回格式为base64
merData.mer_qrcode：
iVBORw0KGgoAAAANSUhEUgAAALQAAAC0AQMAAAAHA5RxAAAABlBMVEX///8AAABVwtN+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABcUlEQVRYhe2Xy5HDMAxD2QH77xIdcAFQcdbnwJNLOI4tPx1o/pWqn3xZZgbNR/VMFfQa5dBLTxe4Gt3CnGvikUoieCvMp3s3HuJCdFuDEue8aBn16gPq5s8EV6D/yS0fEnyFqdV3kuJ889XMLPmOzyi3RhcEvHXcFuPjqEB5hXLkEeVc88f7qLob/XJciNMcuo22bfZikOW0iU2JG63QUPlkuau51Jj8BYWrHjO87KjxFpy7Ya7AwI0DXiHLue59YjaLK8rLUVc64dQdspy6cIpC97ffQlwVobSiYS6PiXMVBrY11dtvIc5p6YTC5q3NS3KFHdpS+9P4rywfF7OTao6JUa5ubVUyTW/XXAhxT55tGR4+17krxKe3KcE9ry9/5rjz1ingQ0BF+bHN2++o5/iqOn1bB5crnzMc2zjcs9U34nyPXTQKs/IEL4+G8oR4gPe2DHg8h7lTy33bB4v7/5HP+fjU6POF1NdLb4r/5IvyB60KDRvj7fNxAAAAAElFTkSuQmCC

<img  :src="'data:image/png;base64,'+ merData.mer_qrcode" v-if="merData.mer_qrcode" class="everydayImg"/>
<el-button type="primary" @click="downLoadEwm(merData.mer_qrcode)">下载二维码</el-button>
//js
downLoadEwm(imageUrl){
 	const link = document.createElement('a');
    link.href = 'data:image/png;base64,' + imageUrl;
    link.download = 'Ewm.png'; // 下载的文件名为Ewm.png
    document.body.appendChild(link);
    link.click(); // 触发点击链接进行下载
    document.body.removeChild(link); // 下载完成后移除链接
},