利用html2canvas实现点击按钮下载图片功能

安装

npm i html2canvas

页面中引入

import html2canvas from "html2canvas";

html中的操作

把需要生成图片的元素标签内加入ref属性

<template>
  <div>
    <div class="message" ref="html2canvas">
      <img src="../assets/img/message/logo.png" class="logo-img" alt="" />
      <div>
      	一些文字内容
      </div>
    </div>
    <button @click="saveImage('html2canvas', '消息')">打印</button>
  </div>
</template>

js中使用

  methods: {
    //图片格式转换方法
    dataURLToBlob(dataurl) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    //点击方法(第一个参数为需要生成图片的元素ref，第二个参数为生成图片的名字)
    saveImage(divText, imgText) {
      let canvasID = this.$refs[divText];
      let that = this;
      let a = document.createElement("a");
      html2canvas(canvasID).then(canvas => {
        let dom = document.body.appendChild(canvas);
        dom.style.display = "none";
        a.style.display = "none";
        document.body.removeChild(dom);
        let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        //这块是保存图片操作  可以设置保存的图片的信息
        a.setAttribute("download", imgText + ".png");
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
      });
    }
  }