浏览器打印导出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、异步数据加载完成标志，这些节点没等稳，后面所有方案都会导出残缺内容。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！