Question

过去几个小时来，我一直在努力解决与react-pdf软件包相关的问题。我尝试了各种在线示例。但是我面临着同样的错误消息。

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of PDFContainer.

PDF容器文件

import React from 'react';
import { Document, PDFDownloadLink } from 'react-pdf';
import { connect } from 'react-redux';
import exportPDF from 'Components/ExportAnswersPdf';
import { fetchQuestionnaireResults } from 'Actions/QuestionnaireResultsAction';
import ServiceFactory from '../service-factory';

export class PDFContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      export: null,
    };
  }

  handleApprove = (Params) => {
    ServiceFactory.exportAnswers(
      Params
    ).then((response) => {
      this.handleCloseModal();
      this.setState({
        export: response,
      });
    });
  }

  render() {
    return (
      <div>
        { this.state.export !== null ? (
          <div className='document'>
            <PDFDownloadLink
              document={(
                <Document>
                  <exportPDF />
                </Document>
                )}
              fileName='answers.pdf'
            >
              {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
            </PDFDownloadLink>
          </div>
        ) : null }
      </div>
    );
  }
}


export default PDFContainer;

导出PDF页面功能

import React from 'react';
import { Page, Text, View } from 'react-pdf';

const exportPDF = () => {
  return (
    <Page>
      <View>
        <Text>Section #1</Text>
      </View>
    </Page>
  );
};

export default exportPDF;

在尝试填充任何数据之前，我想我会测试一下仅下载PDF并随后使用状态值填充数据的基本实现。任何帮助将不胜感激。

Answer 1

您可能没有注意到在第8行和第51行中导出了组件PDFContainer。尝试删除其中一个导出。请注意错误文字。

无法使用react-pdf和react-js下载PDF

1 个答案: