vue保存当前页为图片

好久没写文章了，今天分享最近遇到的问题，vue保存当前页为图片

image.png
1、npm i html2canvas （官网地址http://html2canvas.hertzen.com/?utm_source=caibaojian.com）
2、import html2canvas from "html2canvas";

 <div class="export-btn right" @click="handleExportImg">导出</div>




 /** @desc 图片导出 */
    handleExportImg() {
      let canvas = document.getElementById("canvas");
      let that = this;
      html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
        function(canvas) {
          let type = "png";
          let imgData = canvas.toDataURL(type);
          // 照片格式处理
          let _fixType = function(type) {
            type = type.toLowerCase().replace(/jpg/i, "jpeg");
            let r = type.match(/png|jpeg|bmp|gif/)[0];
            return "image/" + r;
          };
          imgData = imgData.replace(_fixType(type), "image/octet-stream");
          let filename = "图片" + "." + type;
          that.saveFile(imgData, filename);
        }
      );
    },
    saveFile(data, filename) {
      let save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;

      let event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },