如何对动态更新的HTML执行wkhtmltopdf批量生成多份PDF文件

由于浏览器端JavaScript没有直接调用本地系统命令的权限，推荐使用Node.js本地脚本的方式实现该需求，逻辑最稳定可控。

前置依赖准备 #

• 安装wkhtmltopdf到本地设备，完成后在终端执行wkhtmltopdf --version确认能正常输出版本信息
• 新建项目目录，执行npm init -y初始化Node项目，安装所需依赖：npm install ejs wkhtmltopdf（ejs为模板引擎，可替换为你习惯的任意模板工具）

目录结构 #

项目根目录
├── staff.json       # 存储所有人员信息的JSON文件
├── form-template.ejs # 通用表单HTML模板
├── generate-pdf.js  # 批量生成执行脚本
└── output/          # PDF导出目录，需提前手动新建

核心代码实现 #

1. 人员信息JSON示例（staff.json） #

[
  {"id": 1001, "name": "张三", "department": "技术部", "position": "前端开发工程师", "entryDate": "2022-03-15"},
  {"id": 1002, "name": "李四", "department": "产品部", "position": "高级产品经理", "entryDate": "2021-09-01"}
]

2. 表单HTML模板（form-template.ejs） #

用模板变量占位对应人员字段，样式可根据需求自行调整：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>员工信息登记表</title>
  <style>
    body { padding: 20px; font-size: 16px; }
    .form-item { margin: 15px 0; }
    label { font-weight: bold; margin-right: 10px; }
  </style>
</head>
<body>
  <h1>员工信息登记表</h1>
  <div class="form-item">
    <label>姓名：</label>
    <span><%= name %></span>
  </div>
  <div class="form-item">
    <label>工号：</label>
    <span><%= id %></span>
  </div>
  <div class="form-item">
    <label>部门：</label>
    <span><%= department %></span>
  </div>
  <div class="form-item">
    <label>岗位：</label>
    <span><%= position %></span>
  </div>
  <div class="form-item">
    <label>入职日期：</label>
    <span><%= entryDate %></span>
  </div>
  <!-- 其余表单字段按需补充 -->
</body>
</html>

3. 批量生成脚本（generate-pdf.js） #

const fs = require('fs');
const path = require('path');
const ejs = require('ejs');
const wkhtmltopdf = require('wkhtmltopdf');

// 读取人员信息和模板
const staffList = JSON.parse(fs.readFileSync('./staff.json', 'utf-8'));
const formTemplate = fs.readFileSync('./form-template.ejs', 'utf-8');

// 串行生成PDF，避免资源占用过高
async function runGenerateTask() {
  for (const staff of staffList) {
    // 渲染当前人员的专属HTML内容
    const renderHtml = ejs.render(formTemplate, staff);
    // 定义输出PDF路径，用工号+姓名避免重名
    const outputPath = path.join(__dirname, 'output', `${staff.id}_${staff.name}.pdf`);

    // 调用wkhtmltopdf生成PDF
    await new Promise((resolve, reject) => {
      wkhtmltopdf(renderHtml, {
        pageSize: 'A4',
        encoding: 'UTF-8',
        // 可补充其他wkhtmltopdf配置，比如边距、页眉页脚、是否打印背景等
        'margin-top': '20mm',
        'margin-bottom': '20mm'
      }, (err, stream) => {
        if (err) return reject(err);
        const writeStream = fs.createWriteStream(outputPath);
        stream.pipe(writeStream);
        writeStream.on('finish', resolve);
        writeStream.on('error', reject);
      });
    });
    console.log(`已生成PDF：${outputPath}`);
  }
  console.log('所有人员PDF生成完毕');
}

runGenerateTask().catch(console.error);

执行方式 #

在项目根目录终端执行node generate-pdf.js，所有生成的PDF会自动存入output目录。

可选调整方案 #

如果已经用前端原生JS写好了表单渲染逻辑，不想用模板引擎，可以替换为Puppeteer（无头浏览器）替代wkhtmltopdf，逻辑一致：遍历人员列表，逐个传入数据渲染页面，调用PDF导出接口即可。

内容的提问来源于stack exchange，提问作者TWilliamson