@react-pdf/renderer在Node环境使用字体时XMLHttpRequest报错的解决

问题根源 #

react-pdf/renderer在浏览器环境下依赖XMLHttpRequest加载字体资源，但Node.js环境原生没有这个API，导致执行崩溃。你的Rollup配置中设置了resolve({ browser: true })，会优先打包库的浏览器适配版本，进一步触发了该问题。

以下是三种可行的解决方案：

方案1：直接注册本地字体文件（推荐） #

将字体文件下载到项目本地，通过Node.js文件系统读取Buffer后注册，完全规避网络请求和XHR依赖：

1. 将.ttf字体文件放到项目目录（比如src/fonts/custom-font.ttf）
2. 在字体注册代码中读取文件Buffer：

import { Font } from '@react-pdf/renderer';
import fs from 'fs';
import path from 'path';

const fontBuffer = fs.readFileSync(path.resolve(__dirname, '../fonts/custom-font.ttf'));

Font.register({
  family: 'CustomFont', // 自定义字体族名
  src: fontBuffer,
});

方案2：添加XMLHttpRequest Polyfill #

如果必须使用外部URL加载字体，可通过xhr2库在Node环境中模拟XHR：

1. 安装依赖：

npm install xhr2 --save

2. 在Node服务器入口文件顶部注入polyfill：

global.XMLHttpRequest = require('xhr2');

方案3：调整Rollup配置适配Node环境 #

修改构建配置，让react-pdf加载Node兼容版本的代码：

1. 修改rollup.base.config.js中的resolve选项：

resolve({
  browser: false, // 禁用浏览器环境适配，加载Node版本
  preferBuiltins: true,
}),

2. 调整tsconfig.json的lib配置，移除DOM相关依赖：

"lib": ["ES2020"]

3. 重新执行构建：

rollup -c

验证 #

完成任一方案后，重新运行Node服务器并调用renderToStream，字体加载不会再触发XMLHttpRequest相关错误。

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