DEV Community

Discussion on: Generating Pdf documents in React Using React-pdf

View post
Collapse
 
revskill10 profile image
Truong Hoang Dung •

I tried downloading pdf from your codesandbox but the pdf is empty.
Is there anything wrong here ?

Collapse
 
finallynero profile image
Nero Adaware •

Did you select a year first? I just modified it to hide the download tag until you have selected a year. If it still doesnt work then tell me

Collapse
 
revskill10 profile image
Truong Hoang Dung •

I tried to install using webpack (with Razzle.js), but keep getting error:

Uncaught RangeError: Offset is outside the bounds of the DataView
    at DataView.getUint32 (<anonymous>)
    at new UnicodeTrie (index.js:52)

Do you know how to fix this ?

Collapse
 
pam8351 profile image
pam8351 •

I selected year, but the page still shows "Loading please wait". I also, developed the similar page and seeing the same response when the content is more than 1 page of PDF.

Can you please help me to resolve this issue?

return (

    <Document>
        <Page style={styles.page} wrap>
            <View style={styles.movieDetails}>
                                    <Text style={styles.documentTitle}>Release 20.1 US</Text>
                                    <Text style={styles.documentTitle}>Test Execution detailed report</Text>
            </View>
            </Page>

            <Page pageNumber={25} width={600}  wrap>
            {props.data
                ? props.data.map((a, index) => {
                        return (


                               <View style={styles.TestContainer}>
                                <View style={styles.movieDetails}>
                                    <Text style={styles.testTitle}>{a.Test_name}</Text>


                                    </View>

                                    <View style={styles.detailsFooter}>
                                    <Text style={styles.testStatus}>Test Status :{a.Test_status}</Text>
                                    <Text style={styles.textLeft}>Test Application :{a.Application}</Text>
                                    <Text style={styles.textLeft}>Testing cycle :{a.Target_cycle}</Text>
                                    </View>
                                    <View style={styles.detailsFooter}>
                                    <Text style={styles.textRight}>Testing Type     :{a.Testing_type}</Text>
                                    <Text style={styles.textRight1}>  Executed by    :{a.Executed_by}</Text>
                                    </View>
                           </View>
            );
            })
        : ""}
        <Text style={styles.pageNumber} render={({ pageNumber, totalPages }) => (
    `${pageNumber} / ${totalPages}`
  )} fixed />
        </Page>
    </Document>
);