如何在Node.js中使用pdfkit将EJS文件的表格数据导出为PDF文件

以下两种方案适配你现有的技术栈，可根据后续业务复杂度选择：

方案一：直接用PDFKit手动绘制表格（推荐，适配现有技术基础） #

你当前的成绩数据结构简单，直接用PDFKit绘制不需要额外安装依赖，和你已掌握的PDFKit用法完全兼容。

• 第一步：把成绩数据抽成公共复用数组，保证EJS页面渲染和PDF导出用同一份数据，避免两边内容不一致
• 第二步：修改原有路由把数据传给EJS，同时新增PDF导出路由直接生成文件返回给前端

公共数据示例： #

// 可单独抽成公共配置文件，路由和EJS都可引用
const scoreData = [
  {subject: 'Physics', marks: 80},
  {subject: 'Chemistry', marks: 80},
  {subject: 'Mathematics', marks: 80},
  {subject: 'Computer', marks: 80}
]

修改原有渲染路由： #

router.get("/result",async(req,res)=>{
  res.render("result", {scoreData}); // 把数据传给EJS模板
})

对应改造result.ejs为动态渲染： #

<div style="width: 50%; margin: auto;">
  <table class="table">
    <thead>
      <tr>
        <th>SUBJECT</th>
        <th>MARKS OBTAINED</th>
      </tr>
    </thead>
    <tbody>
      <% scoreData.forEach(item => { %>
      <tr>
        <th><%= item.subject %></th>
        <td><%= item.marks %></td>
      </tr>
      <% }) %>
    </tbody>
  </table>
</div>

新增PDF导出路由： #

const PDFDocument = require('pdfkit');

router.get("/export-result-pdf", (req, res) => {
  // 设置响应头，告诉浏览器返回的是可下载的PDF文件
  res.setHeader('Content-Type', 'application/pdf');
  res.setHeader('Content-Disposition', 'attachment; filename="student-result.pdf"');

  const doc = new PDFDocument();
  // 直接把PDF流输出到响应对象，不需要在服务器本地存文件
  doc.pipe(res);

  // 绘制标题
  doc.fontSize(20).text('Student Score Result', {align: 'center'});
  doc.moveDown(2);

  // 表格基础坐标配置，可根据需要调整
  const tableTop = 150;
  const subjectColX = 100;
  const marksColX = 300;
  const rowHeight = 30;

  // 绘制表头
  doc.fontSize(14).font('Helvetica-Bold');
  doc.text('SUBJECT', subjectColX, tableTop);
  doc.text('MARKS OBTAINED', marksColX, tableTop);
  // 绘制表头底部分割线
  doc.moveTo(subjectColX, tableTop + 15)
    .lineTo(500, tableTop + 15)
    .stroke();

  // 绘制表格内容
  doc.font('Helvetica').fontSize(12);
  scoreData.forEach((item, index) => {
    const rowY = tableTop + rowHeight * (index + 1);
    doc.text(item.subject, subjectColX, rowY);
    doc.text(item.marks.toString(), marksColX, rowY);
    // 绘制行分割线
    doc.moveTo(subjectColX, rowY + 15)
      .lineTo(500, rowY + 15)
      .stroke();
  });

  // 结束PDF生成
  doc.end();
})

后续你只需在result.ejs页面加一个跳转/export-result-pdf的按钮，点击即可直接下载PDF文件。

方案二：EJS渲染为HTML后转PDF（适合表格样式复杂的场景） #

如果后续你的表格需要增加复杂样式、动态字段很多，不想手动用PDFKit绘制，可以选择这个方案：

• 调用ejs.render方法把result.ejs模板和数据渲染为完整的HTML字符串
• 用html-pdf或者puppeteer工具把HTML字符串直接转换为PDF返回给前端

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