安装

yarn add html2canvas

引入

import html2canvas from 'html2canvas';

导出按钮

            <Button
              id='map-down'
              className="map-down"
              onClick={async () => {
                const node = mapRef.current;  // 要导出的元素ref
                if (node) {
                  const canvas = await html2canvas(node, {
                    // 导出时要排除的元素
                    onclone: (document) => {
                      const elementToExclude = document.getElementById('map-down');
                      if (elementToExclude) {
                        elementToExclude.style.display = 'none'; // 隐藏元素
                      }
                    },
                  });
                  const img = canvas.toDataURL('image/png');
                  // 下载
                  var a = document.createElement('a');
                  var event = new MouseEvent('click');
                  a.download = `${barcode}`;
                  a.href = img;
                  a.dispatchEvent(event);
                }
              }}
            >
              <DownloadOutlined />
            </Button>

要导出的内容

const mapRef = useRef(null); // 需要定义ref
<div className="content-box" ref={mapRef}>
</div>