@react-pdf/renderer 在为节点构建时无法使用字体

Question

我正在尝试构建一个使用

react-pdf/renderer

的应用程序。我将从 Node js Express 服务器发送 pdf 响应。我在

react-pdf/renderer

(.ttf) 中使用的字体似乎是通过

XMLHttpRequest

（在库内）获取的。在最终版本中我可以看到它使用了

XMLHttpRequest

。当我尝试在 Node js 中执行它时，它崩溃了，因为它不存在。我如何将其转换为节点获取或其他东西以使其工作？我需要填充它吗？又如何呢？我使用汇总

字体通过标准方式 Font.register() 和外部 url 进行注册

ts配置：

{
    "compilerOptions": {
    "baseUrl": "src/",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src"]
}

汇总基础配置：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { babel } from '@rollup/plugin-babel';
import json from '@rollup/plugin-json';

export default {
  plugins: [
    peerDepsExternal(),
    resolve({
      browser: true,
      preferBuiltins: false,
    }),
    // resolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      exclude: /node_modules/,
      presets: ["@babel/preset-react", "@babel/preset-typescript"],
    }),
    typescript({
      tsconfig: "./tsconfig.json",
      outputToFilesystem: true,
    }),
    json(),
  ],
};

汇总配置：

import terser from '@rollup/plugin-terser';
import baseConfig from './rollup.base.config.js';

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'dist/module.js',
        format: 'cjs',
        sourcemap: true,
      },
    ],
    external: ['react', 'react-dom'],
    preserveModules: true,
    plugins: [
      ...baseConfig.plugins,
      terser(),
    ],
  },
];

我可以用“rollup -c”构建它。

在节点服务器中我只是这样做：

await renderToStream(
    t(data)   // t is something that is imported from the build
  );

无需字体即可工作。

如何解决 XMLHttpRequest 问题？

Answer 1

我解决问题的方法：

其实这不是一个

XMLHttpRequest

的问题。

事实证明

renderToStream

也需要这些字体注册。仅在构建中注册它们是不够的。如果我在节点服务器中注册字体，我可以在构建中省略注册。

构建中使用的

Font

与节点服务器中使用的

Font

不同。

如果我使用

PDFViewer

在浏览器中渲染，那么我需要在那里注册字体。但是如果我正在为将使用

renderToStream

的 Node js 进行构建，那么我必须在 Node 中注册它们，而不是构建。