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

最新推荐文章于 2024-07-13 11:45:14 发布

原创最新推荐文章于 2024-07-13 11:45:14 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

日常学习同时被 2 个专栏收录

11 篇文章

订阅专栏

记录问题

3 篇文章

订阅专栏

这篇博客介绍了如何使用HTML5的a标签download属性实现图片下载功能。通过创建一个新的a元素，设置其download属性和href属性为图片源，然后触发点击事件，可以方便地让用户下载图片。

#下载前的准备

首先得有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();
    },