js保存页面指定元素为图片

首先安装html2canvas

npm install html2canvas --save

然后引入html2canvas

import html2canvas from 'html2canvas'

打印

function downloadFile(fileName, content) { //下载base64图片
  var base64ToBlob = function(code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for(let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
      type: contentType
    });
  };
  let aLink = document.createElement('a');
  let blob = base64ToBlob(content); //new Blob([content]);
  let evt = document.createEvent("HTMLEvents");
  evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};

function save(elemId) {
  html2canvas(document.getElementById(elemId), {
    allowTaint: false,
    useCORS: true,
  }).then(canvas => {
    //将图片保存到变量
    var image = canvas.toDataURL("image/jpeg");
    downloadFile('杭州市风险地图', image);
  });
}

// 调用save方法

引入html2canvas同样可以去网上找找js文件引入，这里就不提供了:)