How to generate a PDF and download it without rendering it?

[geeky01adarsh]

I was trying to generate a PDF with some layout. I have configured the values using hooks, but I want to download the generated PDF without rendering it to the client side. How can I achieve this with React?

[coskuncakir]

hey @geeky01adarsh, I believe you just don't want to display it right? In that case, you could use the @react-pdf/renderers pdf method and the file-saver package to achieve this.

import React from 'react';
import { saveAs } from 'file-saver';
import { pdf } from '@react-pdf/renderer';
import YourDocument from './YourDocument';

const DownloadButton = () => {
  const downloadPdf = async () => {
    const fileName = 'test.pdf';
    const blob = await pdf(<YourDocument />).toBlob();
    saveAs(blob, fileName);
  };

  return <button onClick={downloadPdf}>Download PDF</button>;
};

export default DownloadButton;

this will convert your pdf component into a Blob and then saves it using saveAs method from file-saver

[geeky01adarsh]

That's what I exactly wanted, thanks for the help @coskuncakir.

[Venkata2138279]

is there a way to add password protection to the PDF

[Qodestackr]

is there a way to add password protection to the PDF

Hello, any way?

[HetarthJain]

Hi, @coskuncakir my pdf is very large, >50 pages. how to use workers in ReactJS to generate the pdf (using React-pdf itself) using same method as given above?
I noticed that, this line of code blocks the main browser thread.
const blob = await pdf(<YourDocument />).toBlob();
i tried,
import { pdf } from '@react-pdf/renderer;
I was trying to import pdf inside app.worker.js file,
passing <YourDocument> from app.js file to worker file by postMessage.
I read that we can pass only serializable data to workers, and we cannot import modules inside workers.
How to approach this? Please help here!

[Qodestackr]

Can I also like Generate PDF client side while triggering a server action to get the link of a resource? (Nextjs that is).