Videos
» npm install @react-pdf/renderer
» npm install react-pdf
In case you face the same problem, I found something that help. Replace PDFViewer for the code below:
<PDFDownloadLink document={<FeeAcceptance />} fileName="fee_acceptance.pdf">
{({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>
https://react-pdf.org/components
We can also use ReactPDF.pdf. here's a small code sample of an async function that returns a url (or even blob if the case requires !). We can use this url to download our PDF.
renderUrl = async() => new Promise((resolve, reject) => {
const blob = await ReactPDF.pdf(<FeeAcceptance member_detail={'test'} />).toBlob()
const url = URL.createObjectURL(blob)
if(url && url.length>0){
resolve(url)
}
}
).then(res => res).catch(err => console.log(err))
To Download the generated url we can use the download attribute of a tag. Here's an example
let sampleTab = window.open()
if(sampleTab) {
renderUrl().then(generatedUrl => {
if( generatedUrl ){
let aTag = document.createElement('a')
aTag.href = generatedUrl
aTag.style = "display: none";
aTag.download = 'FeeAcceptance.pdf'
document.body.appendChild(aTag)
aTag.click()
} // else -> means something went wrong during pdf generation
}).catch(err => console.log(err))
} // else -> means new tab can't be opened ... (some Adblock issue)
» npm install @react-pdf/render
For me, this is working like a charm, you can give it a try.
import { PDFViewer, PDFDownloadLink, Document, Page } from "@react-pdf/renderer";
const resume = useMemo(
() => (
<Document
author={name}
title={name}
subject="Document name"
>
<Page size="A4" wrap {...props}>
...
</Page>
</Document>
),
[type, props]
);
<PDFDownloadLink document={resume} fileName={"resume.pdf"}>
<Button size="sm" className="px-4">
Download
</Button>
</PDFDownloadLink>
If in-place download not a must, try using PDFViewer instead of PDFDownloadLink and open it in the new tab. Then set the direct parent of iframe with full screen width and height. Users can download the file by using the browser pdf toolkits.
Something like:
<PDFViewer>
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
</PDFViewer >
.iframe-parent {
height: 100vh;
}
iframe {
width: 100%;
height: 100%;
}
You can pass any data by props or router or httprequest or else.