Início / coding / Perguntas / 79126060
Accepted
Oki
Asked: 2024-10-25 22:09:01 +0800 CST

@react-pdf/renderer não pode usar fontes ao construir para o nó

  • 772

Estou tentando construir um aplicativo que usa react-pdf/renderer. Vou enviar uma resposta em PDF do servidor node js express. As fontes que uso em react-pdf/renderer(.ttf) parecem ser obtidas via XMLHttpRequest(dentro da biblioteca). Na construção final, posso ver que ele usa XMLHttpRequest. Quando tento executar isso no node js, ele trava por causa disso, não existe. Como posso convertê-lo em node-fetch ou outra coisa para fazê-lo funcionar? Preciso fazer polyfill disso? E como? Eu uso rollup

As fontes são registradas com a maneira padrão Font.register() com url externa

configuração 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"]
}

configuração base do rollup:

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(),
  ],
};

configuração de rollup:

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(),
    ],
  },
];

Posso construí-lo com "rollup -c".

No servidor node eu apenas faço:

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

Funciona sem as fontes.

Como posso corrigir o problema do XMLHttpRequest?

xmlhttprequest

1 respostas

  1. Best Answer

    A maneira como resolvi o problema:

    Na verdade não foi um XMLHttpRequestproblema.

    Acontece que renderToStreamprecisa desses registros de fontes também. Registrá-los apenas na compilação não foi o suficiente. Se eu registrar as fontes no servidor node, posso omitir o registro na compilação.

    O Fontque é usado na compilação é diferente do Fontque é usado no servidor de nó.

    Se eu usar PDFViewerpara renderizar no navegador, então preciso registrar as fontes lá. Mas se eu estiver fazendo uma compilação para node js que usará renderToStream, então devo registrá-las no node, em vez da compilação.

    • 0

relate perguntas