客户端使用PDF生成库时出现Uncaught ReferenceError: require未定义错误

兄弟，你踩了个典型的环境适配坑！dynamic-html-pdf和phantom-html2pdf这俩库是专门给Node.js服务端设计的，它们内部深度依赖Node的核心模块（比如你看到的fs文件系统模块），而浏览器客户端环境根本没有这些模块，也不支持Node的require语法——这就是你编译能过但运行时报错的核心原因。

正确的解决思路：把PDF生成逻辑移到服务端 #

你需要把HTML转PDF的代码放到Node.js后端服务里，客户端只负责传递需要转换的HTML内容，后端生成PDF后再返回给客户端下载。给你个简单的实现示例：

1. 后端（Express为例）代码

const express = require('express');
const pdf = require('dynamic-html-pdf');
const app = express();
app.use(express.json());

app.post('/generate-pdf', async (req, res) => {
  const { htmlContent } = req.body;
  
  try {
    const options = {
      format: 'A4',
      orientation: 'portrait'
    };
    const document = {
      type: 'string',
      value: htmlContent
    };
    
    const pdfBuffer = await pdf.create(document, options);
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename="output.pdf"');
    res.send(pdfBuffer);
  } catch (err) {
    res.status(500).send('生成PDF失败：' + err.message);
  }
});

app.listen(3000, () => console.log('服务启动在3000端口'));

2. 客户端前端代码

// 假设你有一个要转换的HTML字符串
const htmlToConvert = `
  <div>
    <h1>测试PDF内容</h1>
    <p>这是客户端传递的HTML</p>
  </div>
`;

async function generatePdf() {
  try {
    const response = await fetch('http://localhost:3000/generate-pdf', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ htmlContent: htmlToConvert })
    });
    
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'output.pdf';
    a.click();
    URL.revokeObjectURL(url);
  } catch (err) {
    console.error('请求后端生成PDF失败：', err);
  }
}

如果非要在客户端直接生成PDF #

那你得换用纯前端的PDF生成库，比如：

• jsPDF + html2canvas：先把HTML转成Canvas，再导出为PDF，适合简单的HTML结构
• pdfmake：用JSON语法定义文档结构，再生成PDF，适合需要精确排版的场景
  这些库完全基于浏览器环境，不依赖Node的任何核心模块，不会出现require或fs相关的错误。

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