如何在后端渲染HTML并保存为PDF？后端生成React填充文档PDF方案问询

完全可以在后端完成从React组件渲染、数据填充到PDF生成的全流程，以下是两种成熟的实现方案，均基于Node.js生态（和React技术栈适配性最佳）：

方案一：ReactDOMServer + Puppeteer（适配现有前端组件） #

如果你的前端已经有现成的文档React组件，优先选这个方案，无需重构组件，只需确保组件不依赖浏览器专属API。

核心步骤 #

1. 抽离可复用的文档组件：确保组件仅接收props渲染数据，不依赖window、document等浏览器对象。
2. 后端渲染组件为静态HTML：用ReactDOMServer将填充用户数据的组件转换成HTML字符串。
3. 无头浏览器生成PDF：用Puppeteer启动无头Chrome，加载生成的HTML并导出PDF。

代码示例 #

1. 可复用的文档组件（DocumentTemplate.jsx）

export default function DocumentTemplate({ userInfo }) {
  return (
    <div style={{ padding: '2rem', fontFamily: 'Arial, sans-serif' }}>
      <h1>用户定制文档</h1>
      <div style={{ margin: '1rem 0' }}>
        <p><strong>姓名：</strong>{userInfo.name}</p>
        <p><strong>邮箱：</strong>{userInfo.email}</p>
        <p><strong>联系地址：</strong>{userInfo.address}</p>
      </div>
      {/* 其他文档内容，比如合同条款、自定义字段等 */}
    </div>
  );
}

2. 后端处理逻辑（Node.js + Express）

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const puppeteer = require('puppeteer');
const DocumentTemplate = require('./DocumentTemplate').default;
const fs = require('fs');
const path = require('path');

const app = express();
app.use(express.json());

// 生成并保存PDF的接口
app.post('/api/generate-document', async (req, res) => {
  try {
    const userInfo = req.body;
    // 1. 将React组件渲染为静态HTML
    const componentHtml = ReactDOMServer.renderToStaticMarkup(
      React.createElement(DocumentTemplate, { userInfo })
    );
    const fullHtml = `
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <style>
            * { box-sizing: border-box; }
            body { margin: 0; }
            /* 添加打印专属样式，确保PDF渲染效果一致 */
            @media print {
              body { padding: 0; }
            }
          </style>
        </head>
        <body>${componentHtml}</body>
      </html>
    `;

    // 2. 用Puppeteer生成PDF
    const browser = await puppeteer.launch({ headless: 'new' });
    const page = await browser.newPage();
    await page.setContent(fullHtml, { waitUntil: 'networkidle0' });
    const pdfBuffer = await page.pdf({
      format: 'A4',
      printBackground: true,
      margin: { top: '1cm', right: '1cm', bottom: '1cm', left: '1cm' }
    });
    await browser.close();

    // 3. 保存PDF到文件系统（或写入数据库）
    const savePath = path.join(__dirname, 'documents', `user-${userInfo.id}.pdf`);
    fs.writeFileSync(savePath, pdfBuffer);
    // 若存入数据库，直接将pdfBuffer作为二进制数据写入Blob/Bytea类型字段即可

    res.status(200).json({ success: true, message: 'PDF已生成并保存' });
  } catch (err) {
    console.error('PDF生成失败:', err);
    res.status(500).json({ success: false, error: 'PDF生成异常' });
  }
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

方案二：@react-pdf/renderer（轻量PDF专属方案） #

如果不需要复用前端HTML组件，追求更轻量的后端PDF生成，可使用@react-pdf/renderer——专门用于React生成PDF的库，无需依赖浏览器，直接在Node环境生成PDF。

核心步骤 #

1. 用@react-pdf专属组件定义文档结构：替换普通HTML标签为库提供的<Document>、<Page>、<Text>等组件。
2. 后端传入用户数据渲染组件：直接生成PDF Buffer/流，保存到文件系统或数据库。

代码示例 #

1. PDF文档模板（PdfTemplate.jsx）

import { Document, Page, View, Text, StyleSheet } from '@react-pdf/renderer';

// 定义PDF样式
const styles = StyleSheet.create({
  page: { padding: 30, fontFamily: 'Helvetica' },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 25 },
  field: { fontSize: 14, marginBottom: 10 }
});

export default function PdfTemplate({ userInfo }) {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <Text style={styles.title}>用户定制文档</Text>
        <View>
          <Text style={styles.field}><Text style={{ fontWeight: 'bold' }}>姓名：</Text>{userInfo.name}</Text>
          <Text style={styles.field}><Text style={{ fontWeight: 'bold' }}>邮箱：</Text>{userInfo.email}</Text>
          <Text style={styles.field}><Text style={{ fontWeight: 'bold' }}>联系地址：</Text>{userInfo.address}</Text>
        </View>
      </Page>
    </Document>
  );
}

2. 后端处理逻辑

const express = require('express');
const React = require('react');
const { renderToBuffer } = require('@react-pdf/renderer');
const PdfTemplate = require('./PdfTemplate').default;
const fs = require('fs');
const path = require('path');

const app = express();
app.use(express.json());

app.post('/api/generate-pdf', async (req, res) => {
  try {
    const userInfo = req.body;
    // 渲染组件为PDF Buffer
    const pdfBuffer = await renderToBuffer(
      React.createElement(PdfTemplate, { userInfo })
    );

    // 保存PDF
    const savePath = path.join(__dirname, 'documents', `user-${userInfo.id}.pdf`);
    fs.writeFileSync(savePath, pdfBuffer);

    res.status(200).json({ success: true, message: 'PDF已生成并保存' });
  } catch (err) {
    console.error('PDF生成失败:', err);
    res.status(500).json({ success: false, error: 'PDF生成异常' });
  }
});

app.listen(3001, () => console.log('后端服务运行在3001端口'));

关键注意事项 #

• 组件兼容性：方案一中的组件不能包含浏览器专属API（如useEffect操作DOM、window对象），若有此类代码需抽离或做环境判断。
• 样式一致性：方案一需确保HTML样式在无头Chrome中渲染正常，可添加@media print专属样式；方案二需遵循@react-pdf/renderer的样式规则。
• 性能优化：方案一中Puppeteer启动浏览器有开销，高并发场景可复用浏览器实例；方案二性能更优，但样式能力有限。
• 字体支持：如需自定义字体，方案一可在HTML中引入字体文件；方案二需用Font组件注册字体。

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