我正在尝试使用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))
}
使用react-router在新标签中打开pdf
<Route path="/pdf" render={ () => <PDFDocument/> } />
该标签随pdf一起打开,但没有数据,只有两页,并且控制台stream.push() after EOF in react-pdf
中出现错误
Live site pdf无法打开。
答案 0 :(得分:0)
我今天才开始使用它,却遇到了同样的EOF错误和两个空白页。我认为问题在于PDF渲染器或文档尚未完全加载/生成,因此您需要先调用一个函数来实际生成pdf,而不是一旦该函数完成后就显示PDF Viewer来查看或获取该文档。是我要做的修正:
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>
);
}
}