html2canvas 截图 下载

html2canvas官方地址http://html2canvas.hertzen.com/

安装

npm install --save html2canvas
或
yarn add html2canvas

代码示例

//引入
import html2canvas from 'html2canvas';

  /** 点击下载简历 */
const onClickDownResume = () => {
// 调用html2canvas方法，传入dom节点(想要截屏的那部分的dom元素)
 html2canvas(document.getElementById('resume-details') as HTMLElement).then(function (canvas) {
 	// 回调函数里面的第一个参数就是截屏下来的canvas
 	// 将canvas转为blob数据，通过a标签进行下载
    canvas.toBlob((blobObj) => {
      const link = document.createElement('a');
      link.href = window.URL.createObjectURL(blobObj);
      link.download = 'file';
      //将a标签的点击事件自动触发
      link.click();
    });
  });
};

<Button
   key="down"
   type="primary"
   style={{ background: '#52C41A', borderColor: '#52C41A', cursor: 'pointer' }}
   onClick={onClickDownResume}
 >
   下载简历
 </Button>


<div className="resume-details" id="resume-details">
......
</div>

缺点: 这也是html2canvas官网里面提到过的，如果在截屏的内容中，有跨域的网址（图片，视频，文件等）,将无法被直接下载下来