安装
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>
