8

我正在尝试使用 react-pdf 打开一个 pdf 文档

const PDFDocument = () => {

  const [PDFData, setPDFData] = useState(() => {
    const data = localStorage.getItem('pdfData')
    return JSON.parse(data)
  })

  useEffect(() => {
    console.log(PDFData)
  }, [PDFData])

  const { NameOfService, AccessibilityDetails, AddressLine1, AddressLine2, AddressLine3, Postcode, OtherDetailedInformation, MondayStart, MondayEnd, TuesdayStart, TuesdayEnd, WednesdayStart, WednesdayEnd, ThursdayStart, ThursdayEnd, FridayStart, FridayEnd, SaturdayStart, SaturdayEnd, SundayStart, SundayEnd, Cost,  Buses, TubeAndTrains, CarParkingDetails, Name1, PhoneNumber1, Email1, Name2, PhoneNumber2, Email2, Website, OtherContactInfo  } = PDFData

  return (
    <PDFViewer>
      <Document>
        <Page size="A4" style={styles.page}>
          <View style={styles.heading}>
            <Text>{NameOfService}</Text>
          </View>
          <View style={styles.text}>
            <Text>{AddressLine1}</Text>
            <Text>{AddressLine2}</Text>
            <Text>{AddressLine3}</Text>
            <Text>{Postcode}</Text>
          </View>
          <View style={styles.text}>
            <Text>{OtherDetailedInformation}</Text>
          </View>
          <View style={styles.text}>
            {MondayStart ? <Text>Monday: {MondayStart} - {MondayEnd}</Text> : null}
            {TuesdayStart ? <Text>Tuesday: {TuesdayStart} - {TuesdayEnd}</Text> : null}
            {WednesdayStart ? <Text>Wednesday: {WednesdayStart} - {WednesdayEnd}</Text> : null}
            {ThursdayStart ? <Text>Thursday: {ThursdayStart} - {ThursdayEnd}</Text> : null}
            {FridayStart ? <Text>Friday: {FridayStart} - {FridayEnd}</Text> : null}
            {SaturdayStart ? <Text>Saturday: {SaturdayStart} - {SaturdayEnd}</Text> : null}
            {SundayStart ? <Text>Sunday: {SundayStart} - {SundayEnd}</Text> : null}
          </View>
          <View style={styles.text}>
            <Text>Cost: {Cost}</Text>
          </View>
          <View style={styles.text}>
            <Text>Transport:</Text>
            <Text>Buses: {Buses}</Text>
            <Text>Tube and Trains: {TubeAndTrains}</Text>
            <Text>Car park Availibility: {CarParkingDetails}</Text>
          </View>
          <View style={styles.text}>
            {AccessibilityDetails ? <Text>Accessibility: {AccessibilityDetails}</Text> : null}
          </View>
          <View style={styles.text}>
            <Text>Contact Details:</Text>
            <Text>{Name1}: {PhoneNumber1}; {Email1}</Text>
            {Name2 ? <Text>{Name2}: {PhoneNumber2}; {Email2}</Text> : null}
          </View>
          <View style={styles.text}>
            {Website ? <Text>{Website}</Text> : null}
          </View>
          <View style={styles.text}>
            {OtherContactInfo ? <Text>{OtherContactInfo}</Text> : null}
          </View>
        </Page>
      </Document>
    </PDFViewer>
  )
};

export default PDFDocument;

当有人单击“打印”按钮时，本地存储数据会在 App 组件中设置。

handlePrint = (pdfData) => {
    localStorage.setItem('pdfData', JSON.stringify(pdfData))
  }

pdf 使用 react-router 在新选项卡中打开

<Route path="/pdf" render={ () => <PDFDocument/> } />

该选项卡以 pdf 格式打开，但没有数据、两页和控制台中的错误stream.push() after EOF in react-pdf

无法打开 pdf 的实时站点。

4

1 回答 1

3

我今天刚刚开始工作，我遇到了相同的 EOF 错误和两个空白页。我认为问题在于 PDF 渲染器或文档尚未完全加载/生成，因此您需要先调用一个函数来实际生成 pdf，然后在该函数完成后显示 PDF 查看器以查看或获取此文档是我所做的修复：

import React from 'react';
import { Button } from 'react-bootstrap';
import { Text, Image, View, Page, Document, PDFDownloadLink } from '@react-pdf/renderer';

import './App.css';

export default class App extends React.Component {
    constructor() {
        super();

        this.state = {
            ready: false
        }
    }

    toggle() {
        this.setState((prevState) => ({
            ready: false
        }), () => {     // THIS IS THE HACK
            setTimeout(() => {
                this.setState({ ready: true });
            }, 1);
        });
    }

    render() {
        const { ready } = this.state;

        const MyDocument = (
            <Document>
                <Page size="A4">
                    <View>
                        <Text>
                            some text
                        </Text>
                    </View>
                </Page>
            </Document>
        );

        return (
            <div>
                {ready && (
                    <PDFDownloadLink document={MyDocument} fileName="PDF">
                        {
                            ({ blob, url, loading, error }) => (loading ? 'Loading document...' :
                                <Button onClick={() => (this.setState({ ready: false }))}>
                                    download pdf
                                </Button>
                            )
                        }
                    </PDFDownloadLink>
                  )}
                {!ready && (
                   <Button onClick={() => this.toggle()}>
                        generate pdf
                    </Button>
                )}
            </div>
        );
    }
}
于 2020-06-18T16:41:49.387 回答