How to render HTML on the backend and generate a PDF file

This article describes how to dynamically render HTML pages and generate high-quality PDFs through a headless browser (such as Puppeteer) on the Node.js backend, which is suitable for automated archiving scenarios of user-customized documents.

When building SaaS or enterprise-level applications, it is often necessary to generate personalized documents (such as contracts, reports, invoices) for each user. The front-end uses React to dynamically fill in data and support printing; however, front-end printing alone cannot meet the needs of automatic archiving, auditing, or asynchronous processing on the server side. At this time, the closed loop of HTML rendering and PDF generation must be completed on the backend - and "running React" directly on the server is not feasible (React is a client-side framework that relies on the DOM and browser environment). The correct path is: the server provides a pre-rendered HTML interface (SSR or static routing) that can be accessed by the browser, and then the headless browser accesses the URL and screenshots/exports it as PDF .

✅ Recommended solution: Puppeteer Express pre-rendering interface

First, ensure that the backend exposes an HTTP interface that returns user-specific HTML (for example, /api/docs/:id/pdf). The interface should:

• Query user data based on request parameters (such as userId or docId);
• Use a template engine (such as EJS, Handlebars) or pure string concatenation to generate complete HTML (including inline CSS to avoid external resource loading failure);
• Return standard HTML response (Content-Type: text/html) to ensure complete style and controllable layout.

Example Express route:

 app.get('/api/docs/:id/pdf', async (req, res) => {
  const { id } = req.params;
  const user = await db.getUser(id); // Replace with your data source const html = `
    
    
      
        <meta charset="UTF-8">
        <style>
          body { font-family: sans-serif; margin: 2cm; }
          .header { color: #2c3e50; text-align: center; }
        </style>
      
      
        <div class="header"><h1>User Agreement</h1></div>
        <p><strong>Name:</strong>${user.name}</p>
        <p><strong>Email:</strong>${user.email}</p>
        <p><strong>Signing date:</strong>${new Date().toLocaleDateString()}</p>
      
    
  `;
  res.send(html);
});

Next, use Puppeteer to access the URL and generate the PDF:

 const puppeteer = require('puppeteer');

async function generatePdfFromUrl(url, options = {}) {
  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  try {
    const page = await browser.newPage();
    //Set the viewport to match A4 size (ensures accurate layout)
    await page.setViewport({ width: 1200, height: 800 });
    await page.goto(url, { waitUntil: 'networkidle0', timeout: 30000 });

    const pdfBuffer = await page.pdf({
      format: 'A4',
      printBackground: true,
      margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' },
      ...options
    });

    return pdfBuffer;
  } finally {
    await browser.close();
  }
}

// Call the example (such as saving to the file system)
const pdf = await generatePdfFromUrl('http://localhost:3000/api/docs/123/pdf');
require('fs').writeFileSync('./output/user-123.pdf', pdf);

⚠️Key Notes

• CSS and fonts : PDF export does not support all CSS (for example, flexbox renders abnormally in some versions). It is recommended to use semantic HTML stable CSS (such as float, inline-block or table layout); fonts need to be loaded (@font-face can be inline or system safe fonts can be used).
• Resource loading : Avoid referencing external CDN resources (such as unproxied Google Fonts), otherwise the headless browser may fail due to network policies; it is recommended to convert fonts and images to base64 inline.
• Performance and concurrency : Puppeteer instances are heavy, so the production environment must reuse browser instances (use puppeteer.launch({ headless: true }) single instance browser.newPage() for multi-page reuse), or use connection pool management.
• Security : Never spell user input directly into HTML without escaping to prevent XSS; use DOMPurify.sanitize() or the template engine's automatic escaping mechanism.
• Weighing alternatives : If the document structure is simple and does not require JavaScript interaction, you can consider pdfmake or html-pdf (based on PhantomJS, no longer maintained), but Puppeteer is currently the most stable and compatible choice.

Through the above method, you can not only maintain the interactive experience of front-end React, but also reliably generate, store and manage user-specific PDF documents on the back-end, truly realizing the separation of responsibilities and complementary capabilities of the front-end and back-end.

The above is the detailed content of How to render HTML on the backend and generate a PDF file. For more information, please follow other related articles on the PHP Chinese website!