-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
PDFDownloadLink should generate pdf on click #736
Comments
@tomasmatulis0 have you seen substantial performance gains from the alternative method you posted with |
@rishipr not quite, I just try to think ahead as it is a good thing to do and having n number of PDFs just ready to be downloaded feels like a waste of resources. Most of the times the user won't even need to download the PDF so it will be just laying there most of the time. I believe it would be an improvement in rare cases when you have more and heavier PDFs on the same page (this would be the way to test it). But again, I believe thinking ahead and saving resources is a good practice. |
@idrisadetunmbi not sure about fixing those two problems, but yes using |
Thanks @tomasmatulis0, that makes sense. Solves that problem for me and I think this should be the default. |
What is documentData in OP's example code? I am assuming that < PdfDocument /> is:
|
@mdodge-ecgrow amm... documentData is just any kind of dynamic data that is passed to the component and add to the pdf (like data got from the API etc.). |
That makes sense, thank you. |
Nice alternative , thanks tomasmatulis0. Works very well in addition with a spinner state , it's perfect for my letter generation. |
The OP's work-around with I also found that with the download link, it doesn't change when the parameters to the PDF document changes. It seems like the initial document is cached. Therefore I was always getting a blank PDF page without any results, because the first time my page is displayed, the parameters are just an empty array resulting in a PDF document without any data |
hmm, i'm trying the code snippet above, but for some reason it trows an err import React from "react";
import { saveAs } from "file-saver";
import { pdf, Document, Page } from "@react-pdf/renderer";
const generatePDFDocument = async () => {
const blob = await pdf(
<Document>
<Page>// My document data</Page>
</Document>
).toBlob();
console.log(blob);
saveAs(blob, "pageName");
};
export default generatePDFDocument; Uncaught (in promise) TypeError: Cannot read property 'slice' of undefined |
Hi, we don't have the full picture there .. if slice is coming from an object defined asynchronously , it needs to be initalized for the first render.. otherwise you might use yourObject?.slice to get undefined returned instead of an error.. |
@Pat1420 that's very curious because i have no other promises. it's just a click event that's calling <button onClick={() => generatePDFDocument("doc name")}>
download
</button> |
there's also this issue |
Hi I also have the same issue. It takes 8sec to render a 300 record data. The page will freeze for 8 sec now until the rendering is complete. I can't image how many min it will freeze if the record runs into thousands. If you know of any way to overcome this, please let me know. |
Great support - this has helped a lot |
Have you solved it? because I'm facing this, takes too long to generate the PDF to download, I'm running out of options. |
I mean, there are a bunch of examples how to solve this above. It's an async function, and if you don't want for your page to freeze, just don't await it, it will complete on it's own, and you will be able to use the page in the mean time 🤷♂️ |
Interesting, but maybe this don't work, cause it needs to process the PDF anyway. The approach I used to solve was using the generation of the PDF in the backend. But now that you mention it, how to let this process synchronous? maybe I didn't use in the correct way. |
Do you use generatePdfDocument function like |
you're a god |
Thanks, this function also solved a problem for me where PDFDownloadLink would not include custom fonts. |
Why do not to create a custom component or functionality for it in this library? export const downloadPDFAsynchronously = (componentToRender: Document, filename: string) => {...} |
Hello, here I bought a solution that worked for me, I hope it helps you. class PDFViewerButton extends Component { render() { |
without await how can i save the blob value ? i want to download the pdf getting page unresponsive error . i tried above method . but for download the pdf you where not using web worker in the above example. |
Is your feature request related to a problem? Please describe.
It is an improvement. At the moment, if you use 'PDFDownloadLink' the PDF is being generated as the component loads.
Describe the solution you'd like
It is not mandatory, but having multiple heavy PDFs ready to be downloaded wouldn't be the best approach since not every user will need it.
Describe alternatives you've considered
I've used
pdf()
function to generate the blob andfile-saver
lib to download it:The text was updated successfully, but these errors were encountered: