React html2canvas打印当前页面内容

想当初对于打印当前页面内容很头疼，现在发现一个非常好用的组件，简直是YYDS。话不多说，上代码。

import { useEffect } from 'react';

import './App.css';

let html2canvas = null;

function Html2canvas() {
  useEffect(() => {
    import('html2canvas').then((OneComponent) => {
      html2canvas = OneComponent.default;
    });
  }, [])

  const downloadCanvas = () => {
    // id包裹的模块即下载的模块
    const contentEl = document.getElementById('download');
    contentEl && html2canvas(contentEl, {
      useCORS: true,
    }).then((canvas) => {
      try {
        // 创建隐藏的可下载链接
        const eleLink = document.createElement('a');
        eleLink.download = `REACT_${new Date().getTime()}.png`;
        eleLink.style.display = 'none';
        // 图片转base64地址
        eleLink.href = canvas.toDataURL('image/png');
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      } catch (e) {
        throw e;
      }
    });
  }

  return (
    <div className="App">
      <header className="App-header" id="download">
        <div>此处是要打印的内容</div>
        <div>
          <button onClick={() => downloadCanvas()}>打印</button>
        </div>
      </header>
      <div>不需要打印的模块</div>
    </div>
  );
}

export default Html2canvas;

记录代码日常