前端导出图片到本地

最近使用highcharts做了一个图， 但是导出图片功能没有网络不能使用， 所以自己写了一个， 记录一下。

一：首先要下载html2Canvas 插件，然后在页面引入。

import html2Canvas from "html2canvas"

二：html

  <div  id="pdfDom">
            <div class="contentFooter" ref="getAttuEchart"></div>
   </div>

必须用id包裹这个highcharts或echarts或任何实例，

三：方法

    //生成图片
    getPdfBase64() {
      html2Canvas(document.querySelector("#pdfDom"), {  //这里是拿到id为pdfDom的实例
        allowTaint: true,
      }).then(function (canvas) {
        let pageData = canvas.toDataURL(); // 这是获取到了base64编码
        console.log(pageData, "base644444");

        var eventPayload = {
          content: pageData,//图片base64格式，包含前缀：data:image/png;base64,
          fileName: "图形绘制.png",
          imageType: "png",
        };
        console.log(eventPayload);
        var content = eventPayload.content;
        var imageType = eventPayload.imageType;
        var fileName = eventPayload.fileName;
        if (content) {
          // 接口返回的数据部分
          // 解析图片
          // 因接口直接返回了base64代码部分，所以不需要截取，如果含"data:image/png;base64," 则需要自己做截取处理
          var base64List = content.slice(22); //截取base64的"data:image/png;base64,"
          var raw = window.atob(base64List);
          var rawLength = raw.length;
          var uInt8Array = new Uint8Array(rawLength);
          for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
          }
          var blob = new Blob([uInt8Array], { type: "image/" + imageType });
          // //保存图片
          var aLink = document.createElement("a");
          var evt = document.createEvent("HTMLEvents");
          evt.initEvent("click", true, true);
          aLink.download = fileName;
          aLink.href = URL.createObjectURL(blob);
          aLink.click();
        } else {
          console.log("没有base64代码");
        }
      });
    },