前端vue项目中如何把base64转换为图片并下载

项目需求,点击表格中下载二维码按钮弹出二维码,再点击下载,将二维码保存在本地

前端vue项目中如何把base64转换为图片并下载_第1张图片

此时需要用到html2canvas这个插件

npm i html2canvas --save  //现在安装插件

第二步: 

import html2canvas from "html2canvas";   //引入html2canvas 

第三步使用:

html2canvas(document.getElementById("2canvas")).then((canvas) => {
     var pageData = canvas.toDataURL("image/png", 1.0); //第二个参数可以调节下载图片的清晰度
     const link = document.createElement("a");//创建一个a标签
     link.style.display = "none";    //去掉此标签的所有样式避免展示出a标签
     link.href = pageData;           //把获取到的流文件放到href属性里
     link.setAttribute("download", this.organize_task_name + ".png");//调用download属性,并添加名字
     document.body.appendChild(link);//添加这个a标签到body上
     link.click(); //触发click事件
 });

上完整代码:

template部分:


    
      

{{ organize_task_name }}

有效期至:{{ end_date }} 所属社区:{{ organize_name }}
取 消 确 定

js部分:

//下载二维码
    handleDownload(row) {
      if (row.qrCode === null) {
        this.msgError("此数据暂无二维码");
        return;
      }
      this.end_date = row.endDate;
      this.organize_name = row.organizeName;
      this.organize_task_name = row.organizeTaskName;
      this.el_img_url = row.qrCode;
      this.showDownload = true;
    },
    // 根据dom生成图片并下载到本地
    handleDownloadqrCode() {
      html2canvas(document.getElementById("2canvas")).then((canvas) => {
        var pageData = canvas.toDataURL("image/png", 1.0); //第二个参数可以调节下载图片的清晰度
        const link = document.createElement("a");
        link.style.display = "none";
        link.href = pageData;
        link.setAttribute("download", this.organize_task_name + ".png");
        document.body.appendChild(link);
        link.click();
      });
    },

你可能感兴趣的:(前端,vue.js)