React-pdf: Generating two blank pages

[Chandee]

Describe the bug
When i try to generate a pdf file on browser, the content of my file are two blank pages, no matter what i try to put inside.

To Reproduce
This is the code what i call to generate

<PDFDownloadLink document={<RelFatura dados={this.state.excel} titulo={'Voucher a faturar'} />} fileName="Vouchers.pdf">
    {({ blob, url, loading, error }) => (loading ? <i className="fa fa-file-pdf-o"> Loading document...</i> : <i className="fa fa-file-pdf-o"> Gerar pdf </i>)}
</PDFDownloadLink>

this is my RelFatura

export const RelFatura = (props) => (
  <Document>
    <Page size="A4" style={styles.page}>
      <Text style={styles.text}> hi</Text>
    </Page>
  </Document>
);

and these are my styles

const styles = StyleSheet.create({
  page: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
    paddingRight: 35,
  },
  text: {
    margin: 10,
    fontSize: 12,
    textAlign: 'justify',
    fontFamily: 'Times-Roman'
  }
});

i have two pages that use the pdf generator, in one of them he works perfectly i take the RelFatura and put there where it is working and the output was what i expected ( the page with hi written ) but in the other page he give the blank page bug, i try put the same code on both pages nevertheless it did the same bug (one of them still working and the other give me the bug)

Expected behavior
A single page with hi written

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu, Windows
• Browser: chorme
• React-pdf version: 1.4.0

[xuchong0211]

I have a same problem render with two blank pages in Chrome.
"@react-pdf/renderer version": "1.6.3",
"react version": "16.2.0",

My code is quite similar with Chandee's coding

const MyDocument = () => ( <Document title="testing 1" onRender={e => { console.log("Document onRender..................", e); }} > <Page size="A4" style={{ backgroundColor: "tomato" }} ruler={true} verticalRuler={true} > <View style={{ color: "black", textAlign: "center", margin: 30 }}> <Text style={{ color: "black", textAlign: "center", margin: 10, height: 30 }} render={e => { console.log("text onRender..................", e); }} > Section #1 </Text> </View> </Page> </Document> );

[movaldivia]

@Chandee @xuchong0211 I had the same problem, could you solve it?

[birch-jayton]

same issue

[jdsystemdeveloper]

mesmo problema, alguém conseguiu resolver?

[laraimut]

i got the exactly same issue, please help :(

[birch-jayton]

This was happening to me due to my component triggering a re-render from a state change before my document viewer was finished mounting. This happened because the state change happened on mount.

function MyPdfAppComponent(){
   const [dataForPdf, setDataForPdf] = React.useState()
   React.useEffect(()=>{
      goFetchTheData().then(res=> setDataForPdf(res))
   },[])
   return(
      <PDFViewer>
         <MyDocument data={dataForPdf}/>
      </PDFViewer>
   )
}

this can be fixed by making sure your PDF viewer has everything it needs before its initial render:

function MyPdfAppComponent(){
   const [dataForPdf, setDataForPdf] = React.useState()
   React.useEffect(()=>{
      goFetchTheData().then(res=> setDataForPdf(res))
   },[])
   return{
      dataForPdf && (
      <PDFViewer>
         <MyDocument data={dataForPdf}/>
      </PDFViewer>
      )
   }
}

[Chandee]

Hello guys, what i did was this
https://github.com/diegomura/react-pdf/issues/476#issuecomment-470086990
I hope this will help you

[Chandee]

@birch-jayton nice, the same solution but updated haha, i like it and hope this may help more people

[lucas-wilmart]

I was facing the same issue with the PDFDownloadLink Component. Thanks to the suggestions above, I was able to figure a solution out and resolved it by memoizing it with React's hook useMemo

const stuff = useMemo(
  () => (
    <PDFDownloadLink document={<AccountingPDF />} fileName="somename.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
  ), [])

I think the documentation should mention this behavior more clearly as it's confusing.