html-pdf-chrome CreateOptions 5分钟配好

html-pdf-chrome CreateOptions 5分钟配好【免费下载链接】html-pdf-chromeHTML to PDF or image (jpeg, png, webp) converter via Chrome/Chromium项目地址: https://gitcode.com/gh_mirrors/ht/html-pdf-chromehtml-pdf-chrome 让 Chrome 直接渲染 HTML吐出 PDF 或图片。整套配置就收在一个 CreateOptions 对象里。输出和你浏览器里看到的一致。它比 wkhtmltopdf 强的地方在 CSS3 和 JS 支持完整不会出现渲染偏差。比 puppeteer 轻不背大框架还能直接挂到一个常驻的 Chrome 上复用。 如何复用 Chrome 实例接法只有两条路二选一。第一条连常驻 Chrome。你自己把 Chrome 拉起来打开调试端口Node 连上去。每次生成 PDF 都不用重启浏览器最快。官方也推荐这么做。第二条自动拉起。不传 host 和 port库自己用 chrome-launcher 起一个 Chrome用完就杀掉。省事但慢高频场景别用。用 pm2 把常驻 Chrome 拉起来崩了能自动重启pm2 start google-chrome \ --interpreter none \ -- \ --headless --disable-gpu \ --hide-scrollbars \ --remote-debugging-port9222代码里写port: 9222就连上它。走自动拉起的话改传chromePath或chromeFlags指定二进制和启动参数。 printOptions 常用 8 个字段怎么调printOptions 原样透传给 Chrome 的 printToPDF。不用全设最常调的是下面 8 个。字段类型作用踩坑提示landscapebooleanfalse 竖版true 横版横版时记得和纸张宽高一起换printBackgroundboolean印不印背景色和图片默认 false彩色表头想显示就得开marginTop/Bottom/Left/Rightnumber四边边距单位英寸开页眉页脚时上下边距得大于 0paperWidth/paperHeightnumber纸张尺寸单位英寸默认美版 LetterA4 是 8.27×11.69scalenumber内容缩放0.1 到 2内容被裁就调小displayHeaderFooterboolean渲不渲染页眉页脚不开的话模板写了也白写headerTemplate/footerTemplatestring页眉页脚的 HTML可用 pageNumber、totalPages 占位pageRangesstring页码范围如 1-5不写就打印全部页页眉页脚模板用得多看一段就懂const options: htmlPdf.CreateOptions { port: 9222, printOptions: { displayHeaderFooter: true, headerTemplate: div classtitle月度报表/div, footerTemplate: div第 span classpageNumber/span 页 / span classtotalPages/span 页/div, marginTop: 0.5, marginBottom: 0.5, }, };占位类名写好Chrome 自动填页码。模板里想放图片得 base64 内联外链加载不出来。 截图想截手机效果就改哪三个数传了 screenshotOptions输出就是图片不传就是 PDF。screenshotOptions: { format: png, // png、jpeg 或 webp quality: 85, // 只对 jpeg 生效 clip: { x: 0, y: 0, width: 800, height: 600 }, // 裁剪区域 }, deviceMetrics: { width: 375, // 手机逻辑宽 height: 667, // 逻辑高 deviceScaleFactor: 2, // 2 倍清晰 mobile: true, },deviceMetrics 管视口。要手机效果就盯住width、height、deviceScaleFactor这三个数。前两个填手机逻辑分辨率最后一个给 2 或 3图才够锐。顺手把mobile设 true让 Chrome 模拟移动端的 UA。⏱️ 什么时候再转五种 completionTrigger页面打开后别急着转等内容好了再动。completionTrigger 五种挑一个触发方式适合什么页面超时怎么给Timer不知道等什么就等固定时长参数是毫秒new CompletionTrigger.Timer(3000)Element数据回来后才渲染的内容SPA第二个参数new CompletionTrigger.Element(#app, 5000)Event页面会主动派发自定义事件第三个参数new CompletionTrigger.Event(rendered, #chart, 5000)LifecycleEvent等网络或绘制信号稳定第二个参数new CompletionTrigger.LifecycleEvent(networkIdle, 5000)Variable你自己控制变量完成后置 true第二个参数new CompletionTrigger.Variable(pageReady, 5000)静态页用networkIdle就够。SPA 建议用Element等关键元素出现。超时比实际加载时间略大一点外层timeout再做一道兜底。 端到端报表 PDF 和移动截图带鉴权的报表 PDF靠请求头带 tokenimport * as htmlPdf from html-pdf-chrome; async function monthlyReport() { const options: htmlPdf.CreateOptions { port: 9222, extraHTTPHeaders: { Authorization: Bearer report-token }, printOptions: { landscape: true, printBackground: true, marginTop: 0.5, marginBottom: 0.5, }, completionTrigger: new htmlPdf.CompletionTrigger.Timer(2000), timeout: 60000, }; const html h1月度报表/h1p数据……/p; const pdf await htmlPdf.create(html, options); await pdf.toFile(monthly-report.pdf); }移动端整页截图还是改 deviceMetrics 那三个数import * as htmlPdf from html-pdf-chrome; async function mobileShot() { const options: htmlPdf.CreateOptions { port: 9222, screenshotOptions: { format: png }, deviceMetrics: { width: 375, height: 667, deviceScaleFactor: 2, mobile: true, }, completionTrigger: new htmlPdf.CompletionTrigger.LifecycleEvent(networkIdle), }; const img await htmlPdf.create(https://example.com/mobile, options); await img.toFile(mobile.png); }结果用 toFile 落盘也能用 toBase64、toBuffer、toStream 转成别的形态。 五个翻车现场连不上 9222 端口报 Connection refused。确认 Chrome 是用--remote-debugging-port9222起的代码里的 port 要一致。中文和 emoji 变方块。HTML 没声明字符集。补上meta charsetUTF-8并确认服务器装有中文字体。页面没加载完就转了图是空的或内容残缺。把默认等待换成networkIdle或改用Element等关键元素。内存一直涨常驻 Chrome 越跑越肥。用 pm2 定时重启或开启clearCache: true。headful 下字体缺失可见模式里部分字变方块。装上 fonts-noto-cjk 之类的字体包再试。完整字段含义以源码为准类型定义在 CreateOptions.ts用法示例见 README.md。配置心法五句话优先连常驻 Chrome别每次都重启。 超时给得比加载时间大一点留余量。 completionTrigger 跟页面类型走别傻等。 挂上 console 处理器先看到报错。 字符集写死 UTF-8少踩乱码坑。【免费下载链接】html-pdf-chromeHTML to PDF or image (jpeg, png, webp) converter via Chrome/Chromium项目地址: https://gitcode.com/gh_mirrors/ht/html-pdf-chrome创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考