How to render AND download on link clink, without rendering on page load

[mn-prp]

I have an application that generates a pdf based on the current state of the application when the user clicks a button. I'd like to use react-pdf, but I'm not sure how to make it work, since the default behavior seems to be to generate the pdf on page load and then only download it when the user clicks the <PDFDownloadLink>.

There are two big problems with this:

• a lot of what the pdf requires is unavailable at page load, because it is requested asynchronously
• some of the data fetching and processing to prepare for the pdf is expensive and irrelevant to the UI outside the pdf, so I don't want to do it unless the user specifically requests it.

Is there anyway to show a link (or button) and, when the user clicks it, to then generate a pdf and download it (without requiring a second click)?

[coskuncakir]

Hi @mn-prp,

I achieved what you want using a third-party file saver to save the current blob data we can get from react-pdf's pdf method,

so basically you could do something like below

import { saveAs } from 'file-saver'
import { pdf } from '@react-pdf/renderer'

const Download = () => {
  const handleDownload = async () => {
    const blob = await pdf(<YourDocument />).toBlob()
    saveAs(blob, 'untitled.pdf')
  }

  return <button onClick={handleDownload}>Download</button>
}

export default Download

let me know how it goes,
cheers

[mn-prp]

Yep, that will work for us as well. Thanks for the help!

[vivekBoii]

Nice answer