应直接使用 html-to-image 而非 html2canvas 进行仪表盘截图，因后者对 Canvas 图表、SVG 图形及动态内容支持极差，常导出空白或错位；需确保字体显式声明且跨域可用、禁用 CSS 缩放、等待 DOM 渲染完成。
直接用 html-to-image，别碰 html2canvas 做仪表盘截图——后者对 Canvas 图表、SVG 图形、动态加载内容支持极差，导出常为空白或错位。
为什么 html2canvas 在仪表盘场景大概率失败
仪表盘里常见 ECharts、AntV、Chart.js 等库渲染的图表，它们要么画在 上，要么用 + html2canvas 无法读取已绘制的 canvas 像素（跨域污染或未启用 allowTaint），也难以准确复现 SVG 的坐标变换和滤镜效果。
-
html2canvas遇到元素时，默认跳过或渲染为黑块，除非你手动把图表重绘到另一个 canvas 并注入，成本太高 -
html2canvas不支持 CSStransform: scale()或zoom，但很多响应式仪表盘靠这个适配高分屏，一截就糊 - 它默认忽略
::before/::after，而仪表盘常用伪元素做状态标记、图例装饰，导出后信息缺失 - 滚动容器（如
overflow-y: auto的卡片列表）只截当前视口，要全量得自己算 scrollY + 拼接，极易错位
toPng() 导出模糊？先检查这三件事
调了 pixelRatio: 2 还是发虚，不是参数没设对，而是底层渲染条件没满足。
- 目标 DOM 节点内所有字体必须通过
@font-face显式声明，且字体文件支持跨域（Access-Control-Allow-Origin），否则 fallback 到系统字体，字形错乱 - 显式传
skipFonts: false（虽然默认是false，但不写容易被忽略） - 禁用任何 CSS 缩放：删掉
transform: scale(1.2)、zoom: 1.2、width: 50%配合transform-origin这类组合技——它们会让 canvas 渲染失真
toSvg() 文字变方块？因为字体没“实嵌”
toSvg() 不是截图，是把 DOM 结构转成矢量描述，所有文字依赖浏览器能否真实访问到字体数据。远程字体（如 Google Fonts）或 local('PingFang SC') 在 SVG 中不会自动下载字形。
- 必须启用
embedWebFonts: true（html-to-imagev1.10+ 支持） - 确保字体 URL 可跨域加载；若用本地字体，用户系统无该字体时会 fallback 失败，建议 fallback 到
system-ui或sans-serif - 旧版 Safari（
，此时 toSvg()会静默失败，应降级用toPng()
导出前最易被跳过的一步：等内容真正就绪
仪表盘里图表、表格、异步加载的指标卡片，往往在 DOM 挂载后才开始渲染。直接调 toPng()，拿到的只是空容器或骨架屏。
- 不要只等
mounted（Vue）或DOMContentLoaded（原生），要监听图表库自己的就绪事件，比如 ECharts 的chart.on('finished')或 AntV 的chart.once('afterrender') - 若用 React，避免在
useEffect里立即截图，应在数据 loaded && chartRef.current 不为空 && 图表实例已初始化后再触发 - 加个简单兜底：
await new Promise(r => setTimeout(r, 300))，比硬等 1s 更轻量，多数图表 300ms 内已稳定
真正卡住导出的，从来不是调哪个函数，而是「DOM 节点是否已渲染完成」「字体资源是否可被工具访问」「CSS 是否含不可还原的缩放或混合模式」——这三个点漏一个，图片就废一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
