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

问题描述 投票:0回答:1

我正在尝试构建一个使用

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 问题?

xmlhttprequest rollup polyfills react-pdf react-pdfrenderer
1个回答
0
投票

我解决问题的方法:

其实这不是一个

XMLHttpRequest
的问题。

事实证明

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

构建中使用的

Font
与节点服务器中使用的
Font
不同。

如果我使用

PDFViewer
在浏览器中渲染,那么我需要在那里注册字体。但是如果我正在为将使用
renderToStream
的 Node js 进行构建,那么我必须在 Node 中注册它们,而不是构建。

© www.soinside.com 2019 - 2024. All rights reserved.