HTML批量转PDF方法及命名技巧

本文详解如何利用 Puppeteer 脚本实现 HTML 文件批量转 PDF 并精准保留原始文件名——通过读取 HTML 目录、正则替换后缀、安全拼接路径，并用 setContent() 规避中文文件名导致的 Chromium 解析错误；相比 wkhtmltopdf 等工具，Puppeteer 基于 Chromium，对现代 CSS 兼容性更强，且跨平台可控性高，真正解决批量命名混乱、布局错位、路径报错等实战痛点，是开发者高效、稳定完成 HTML→PDF 自动化转换的首选方案。

HTML 文件批量转 PDF 时，文件名怎么自动对应？

直接用浏览器“打印→另存为 PDF”无法批量处理，更不会保留原始 HTML 文件名。真正可行的批量命名转换，得靠命令行工具或脚本控制输出路径和文件名。

用 puppeteer 脚本实现 HTML 到 PDF 的精准命名

Node.js 生态中，puppeteer 是最可控的方式：它能加载本地 HTML、等页面渲染完成、再调用 page.pdf() 输出，并自由拼接目标文件名。

• 输入 HTML 文件名是 report_20240501.html，输出就该是 report_20240501.pdf，不能硬编码成 output.pdf
• 关键在读取 fs.readdirSync() 获取 HTML 列表，再对每个文件名做 .replace(/\.html$/, '.pdf')
• 注意路径处理：用 path.join() 拼接输出目录，避免 Windows 下反斜杠导致写入失败
• PDF 选项里加 printBackground: true，否则 CSS 中的背景色/图可能丢失

const puppeteer = require('puppeteer');
const fs = require('fs');
const path = require('path');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const htmlDir = './html';
  const pdfDir = './pdf';

  if (!fs.existsSync(pdfDir)) fs.mkdirSync(pdfDir);

  fs.readdirSync(htmlDir)
    .filter(f => f.endsWith('.html'))
    .forEach(async (file) => {
      const htmlPath = path.join(htmlDir, file);
      const pdfPath = path.join(pdfDir, file.replace(/\.html$/, '.pdf'));
      await page.goto(`file://${path.resolve(htmlPath)}`, { waitUntil: 'networkidle0' });
      await page.pdf({ path: pdfPath, format: 'A4', printBackground: true });
      console.log(`✅ ${pdfPath}`);
    });

  await browser.close();
})();

为什么不用 wkhtmltopdf 直接批量？

wkhtmltopdf 命令行确实支持批量，但「命名一致性」容易翻车：

• 它不内置文件名替换逻辑，wkhtmltopdf *.html out.pdf 会把所有 HTML 合并进一个 PDF，且名字固定为 out.pdf
• 想逐个生成，得靠 shell 循环：for f in *.html; do wkhtmltopdf "$f" "${f%.html}.pdf"; done —— 但 macOS / Linux 的 sh 不支持 ${f%.html}，得用 bash 显式运行
• Windows cmd 几乎无法可靠做字符串截取，PowerShell 可以但语法割裂，跨平台维护成本高
• 更重要的是：wkhtmltopdf 对现代 CSS（Flex/Grid/变体字体）支持弱，常出现布局错位，而 puppeteer 基于 Chromium，兼容性好得多

PDF 输出路径和中文文件名的坑

如果 HTML 文件名含中文（如 用户统计.html），直接传给 page.pdf() 在某些系统上会报 ERR_INVALID_ARGUMENT 错误。

• 不是编码问题，而是 Chromium 对含 Unicode 的本地 file:// URL 解析不稳定
• 稳妥做法：用 fs.readFileSync() 读取 HTML 字符串，再用 page.setContent(htmlString) 加载，绕过文件路径
• 输出 PDF 路径仍可用中文，但建议统一转拼音或时间戳（如 user-stats-20240501.pdf），避免协作时乱码或 Git 提交异常
• Linux 下若提示 No such file or directory，检查 pdfDir 是否已存在——page.pdf() 不会自动创建父目录

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。