VUE 实现点击下载对应图片

1. HTML代码

      <van-button icon="plus" type="primary" v-on:click="download()" id="mubanId">下载模板</van-button>

    

2. 在data中设置图片变量/地址

    data() {
               return {
                   adImg:'/UpLoadFiles/AdImg/liuyifei.jpg',
               }
           

   这个图片地址(adImg)换成自己的图片地址.

3. 按钮点击事件

     methods: {
               //下载图片
               download(){
                   var image = new Image();
                   image.setAttribute("crossOrigin", "anonymous");
                   var _this = this;
                   image.onload = function () {
                       var canvas = document.createElement("canvas");
                       canvas.width = image.width;
                       canvas.height = image.height;
                       var context = canvas.getContext("2d");
                       context.drawImage(image, 0, 0, image.width, image.height);
                       var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                       var a = document.createElement("a"); // 生成一个a元素
                       var event = new MouseEvent("click"); // 创建一个单击事件
                       a.download = _this.projectName || "myImage"; // 设置图片名称
                       a.href = url; // 将生成的URL设置为a.href属性
                       a.dispatchEvent(event); // 触发a的单击事件
                   };
                   image.src = this.adImg;
               },
           }

   原创： https://www.cnblogs.com/bomdeyada/p/10839022.html