我正在尝试构建一个使用的应用程序react-pdf/renderer
。我将从 node js express 服务器发送一个 pdf 响应。我在react-pdf/renderer
(.ttf) 中使用的字体似乎是通过XMLHttpRequest
(库内)获取的。在最终版本中,我可以看到它使用了XMLHttpRequest
。当我尝试在 node js 中执行它时,它会因此崩溃,它不存在。我如何将其转换为 node-fetch 或其他东西以使其工作?我需要填充它吗?怎么做?我使用 rollup
字体使用标准方式 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 问题?