时间戳

首页 > 解决方案 > 尝试呈现 pdf 时出现 React-pdf 错误

reactjs - 尝试呈现 pdf 时出现 React-pdf 错误

问题描述

我对 ReactJs 完全陌生。

我正在尝试从 html 创建一个 pdf。我想在浏览器中显示文档，然后能够下载它。我正在使用 react-pdf https://react-pdf.org/

我有下面的代码，我在其中创建了我的 PDF 文档，然后我想用 PDFViewer 显示我的文档。此页面不是我的主要“应用程序”页面 - 它是我可以导航到的“客户详细信息”页面。

当我运行它时，我收到以下错误：

TypeError: Failed to constructor 'Text': Please use the 'new' operator, 此 DOM 对象构造函数不能作为函数调用。

错误在这里：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 中的问题。

请帮忙？

标签： reactjsreact-pdf

解决方案

查看 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';

推荐阅读