html转图片并下载

两种插件

1. html2canvas

<!-- 引入插件 -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js"></script>

<script>
  // 获取要导出的dom元素
  var target = document.querySelector(".ant-layout-content");

  // 使用html2canvas捕获生成canvas图像
  html2canvas(target, {
    useCORS: true,
    foreignObjectRendering: true,
  }).then(canvas => {
    // 将canvas转换为H5的blob对象
    canvas.toBlob(function (blob) {
      // 使用fileSaver插件中saveAs函数下载到本地
      saveAs(blob, name);
    });
  });
</script>

2. dom-to-image

dom-to-image.min.js


// 浏览器直接引入
<script src="path/to/dom-to-image.min.js"