浏览器打印导出PDF最稳，90%的HTML仪表盘需求无需写代码；必须勾选Background graphics、设Margin为None、等JS渲染完成后再打印，否则背景丢失、内容截断或导出空白。
直接用浏览器打印最稳，90% 的 HTML 仪表盘导出 PDF 需求，根本不需要写代码。 你花两分钟调好打印设置，比折腾前端截图或部署 Puppeteer 更快、更准、更少出错。
浏览器打印导出 PDF 怎么调才不丢样式
很多人按 Ctrl+P 后导出 PDF，发现背景色没了、表格被截断、字体变细——不是页面问题，是打印设置没开对。
- 必须勾选
Background graphics（Chrome/Firefox 叫“背景图形”，Edge 叫“打印背景”），否则所有background-color和background-image全部消失 - Margin 设为
None或Minimum；Chrome 需点「更多设置」展开后手动改，否则默认边距会把右侧图表切掉 - 如果仪表盘用 Vue/React/ECharts 渲染，务必等右下角加载动画停了、图表完全显示后再按 Ctrl+P，否则导出的是空白或骨架屏
- 页面里用了
@media print样式？很好，这是你控制页眉、分页、隐藏操作按钮的唯一可靠方式——html2canvas不认它，jsPDF更不认
为什么 html2canvas + jsPDF 容易导出模糊或空白
这套组合不是“渲染 HTML”，而是“对 DOM 截图”。一旦页面结构复杂，就暴露本质缺陷。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
html2canvas对transform、position: fixed、overflow: hidden区域支持极差，仪表盘顶部导航栏或侧边栏常被截断或错位 - 不加
scale: 2参数，导出文字一定模糊；但加了之后 canvas 内存暴涨，1080p 以上分辨率页面容易在低端设备上崩溃 -
useCORS: true只对同域图片生效；跨域图表（比如 ECharts 引用 CDN 上的图标）会触发 canvas 污染，报Failed to execute 'toDataURL' on 'HTMLCanvasElement' - iframe 内容（如嵌入的 Grafana 面板、外部监控看板）100% 空白，
html2canvas根本无法读取其内容
Puppeteer 或 wkhtmltopdf 什么情况下必须上
当你的导出需求越过“单页快照”边界，进入“自动化报表”阶段时，前端截图方案就撑不住了。
立即学习“前端免费学习笔记（深入）”；
- 需要定时生成：比如每天早上 8 点自动导出昨日仪表盘 PDF 并邮件发送——
inject节点 +exec调用wkhtmltopdf命令是最轻量解法 - 要合并多个 Dashboard 页面：Node-RED 中多个 tab 下的图表需拼进同一份 PDF，必须靠服务端统一加载、布局、分页，
html2canvas无法跨 DOM 树协调 - 含登录态或权限校验：前端导出时 cookie 自动带上，但 Puppeteer 必须显式传
cookies或复用已认证的browser实例，否则打开就是登录页 - 中文字体要嵌入 PDF：wkhtmltopdf 支持
--enable-local-file-access加载本地 .ttf，Puppeteer 则需提前在系统级安装字体（如 Ubuntu 的fonts-wqy-zenhei），漏一步就变方块
真正卡住人的从来不是“怎么导出”，而是“导出前页面是否真的 ready”——ECharts 图表的 setOption 回调、Vue 的 nextTick、异步数据加载完成标志，这些节点没等稳，后面所有方案都会导出残缺内容。
