尝试呈现 pdf 时出现 React-pdf 错误
React-pdf Error when trying to render pdf
我是 ReactJs 的新手。
我正在尝试从 html 创建一个 pdf。我想在浏览器中显示该文档,然后能够下载它。我正在使用 react-pdf https://react-pdf.org/
我有下面的代码,我在其中创建了我的 PDF 文档,然后我想用 PDFViewer 显示我的文档。此页面不是我的主要 "App" 页面 - 它是我可以导航到的 "Client details" 页面。
当我 运行 时,出现以下错误:
TypeError: Failed to construct 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
错误在这里:renderWithHooks
C:/Users/Marileen/Downloads/react-material-dashboard-master (1)/react-material-dashboard-master/node_modules/@react-pdf/renderer/node_modules/react-reconciler/cjs/react-reconciler.development.js:5671 与行 5671 var children = Component(props, refOrContext);
import React from "react";
import { PDFViewer } from '@react-pdf/renderer';
import { Document, Page, View } from '@react-pdf/renderer';
const PdfDocument = () => (
<Document>
<Page size="A4">
<View>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
const ClientDetails = () => {
return (<PDFViewer>
<PdfDocument />
</PDFViewer>);
}
export default ClientDetails;
我尝试了不同的库,我安装了 babel,但我不明白如何解决 Reactjs 中的问题。
请帮忙?
查看 react-pdf 的文档后,您似乎没有从它的库中导入 Text
,而是在您的组件中使用它。
这就是为什么在这一行中使用文本而不导入它时会抛出错误的原因 -
<Text>Section #1</Text>
改变你的 -
import { Document, Page, View } from '@react-pdf/renderer'; //add Text here//
到-
import { Document, Page, View, Text } from '@react-pdf/renderer';
我是 ReactJs 的新手。
我正在尝试从 html 创建一个 pdf。我想在浏览器中显示该文档,然后能够下载它。我正在使用 react-pdf https://react-pdf.org/
我有下面的代码,我在其中创建了我的 PDF 文档,然后我想用 PDFViewer 显示我的文档。此页面不是我的主要 "App" 页面 - 它是我可以导航到的 "Client details" 页面。
当我 运行 时,出现以下错误:
TypeError: Failed to construct 'Text': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
错误在这里:renderWithHooks
C:/Users/Marileen/Downloads/react-material-dashboard-master (1)/react-material-dashboard-master/node_modules/@react-pdf/renderer/node_modules/react-reconciler/cjs/react-reconciler.development.js:5671 与行 5671 var children = Component(props, refOrContext);
import React from "react";
import { PDFViewer } from '@react-pdf/renderer';
import { Document, Page, View } from '@react-pdf/renderer';
const PdfDocument = () => (
<Document>
<Page size="A4">
<View>
<Text>Section #1</Text>
</View>
</Page>
</Document>
);
const ClientDetails = () => {
return (<PDFViewer>
<PdfDocument />
</PDFViewer>);
}
export default ClientDetails;
我尝试了不同的库,我安装了 babel,但我不明白如何解决 Reactjs 中的问题。
请帮忙?
查看 react-pdf 的文档后,您似乎没有从它的库中导入 Text
,而是在您的组件中使用它。
这就是为什么在这一行中使用文本而不导入它时会抛出错误的原因 -
<Text>Section #1</Text>
改变你的 -
import { Document, Page, View } from '@react-pdf/renderer'; //add Text here//
到-
import { Document, Page, View, Text } from '@react-pdf/renderer';