html2canvas 实现页面截图并自动下载功能

安装 

yarn add html2canvas

引入

 import html2canvas from 'html2canvas'

使用

  <div id="map" class="map" ref="map"></div>

  html2canvas(document.getElementById("map"), {
    logging: true,
    useCORS: true,
    foreignObjectRendering: false,
    allowTaint: false,
  }).then((canvas) => {
    var dataUrl = canvas.toDataURL();
    var a = document.createElement("a");
    a.setAttribute("href", dataUrl);
    a.setAttribute("download", "image.png");
    document.body.appendChild(a);
    a.click();
    a.remove();
  });

常用配置项

allowTaint    false  是否允许跨源图像污染画布

useCORS    false  是否尝试使用CORS从服务器加载图像

logging         true    为调试目的启用日志记录

踩坑记录

截图出来的是白屏，首先确认useCORS为true，如果是截屏地图可以参考下Unable to clone WebGL context as it has preserveDrawingBuffer=false-CSDN博客