【vue】中对图片添加下载功能

#下载前的准备

首先得有html，准备好这些，其他就可以举一反三了……

<el-dialog :visible.sync="dialogVisible">
   <img width="25%" :src="dialogImageUrl" id="img" alt="" />
     <div class="right-ewm">
        <span @click="downCode" class="upload-ewm">下载</span>
     </div>
</el-dialog>

#下载图片

按照如下的方法就可以实现下载图片了

downCode() {
      const codeImg = document.getElementById('img')
      const a = document.createElement('a');
      a.download = '图片' || 'img';
      a.href = codeImg.src;
      a.click();
    },

#更多

download属性设置或返回链接的download属性的值。download属性指定在用户单击超链接时将下载目标。download属性是HTML5中a标签的新属性……