Download React.js Component in PDF format.

---

Overview:

1. Install necessary packages

2. Importing the packages into your code

3. Implementation of userRef() hook

4. Converting the the component/page/div to PDF

Step-1 :

Installing necessary packages

npm install jspdf html2canvas

Step-2 :

Importing the packages into your code

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

Step-3 :

Implementation of userRef() hook

export default function InvoicePDf() {
    const pdfRef = useRef(); ⬅️ {/* Creating a instance of useRef() hook */}
    return (
        <div ref = { pdfRef } > 
        ⬆️ {/* pdfRef will remember this div block, 
            when ever the pdfRef will be used, it will 
            target to this particular div */}

         { /* whatever the content */}
        </div>
    )
}

Step-4 :

Converting the the component/page/div to PDF

This is the main part where the block will be converted into a PDF format.

  const downloadPDF = () => {
    const input = pdfRef.current;
    html2canvas(input).then((canvas) => {
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF("p", "mm", "a4", true);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = pdf.internal.pageSize.getHeight();
      const imgWidth = canvas.width;
      const imgHeight = canvas.height;
      const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight);
      const imgX = (pdfWidth - imgWidth * ratio) / 2;
      const imgY = 30;
      pdf.addImage(
        imgData,
        "PNG",
        imgX,
        imgY,
        imgWidth * ratio,
        imgHeight * ratio
      );
      pdf.save("invoice.pdf");
    });
  };

• Declaring an arrow Function as downloadPDF where the main code is situated.

• const input = pdfRef.current; Retrieves the current value of the pdfRef reference, that is, the div block.

• html2canvas captures the content.

• const imgData = canvas.toDataURL("image/png"); converts into Data URL representing image in PNG format.

• const pdf = new jsPDF("p", "mm", "a4", true); creates a new Instance, and generates the pdf with parameters such as ("p", "mm", "a4", true) means (orientation, unit, page size, and compression) .

• Other orientation options ( p - Portrait, l - landscape )

• pdf.addImage add the captured image to pdf.

• Finally, pdf.save("invoice.pdf"); will save/download the pdf with the title - invoice.pdf; change the title of the pdf according to your requirements.

At last, download the pdf by clicking the button.

<button onClick={downloadPDF} > Download PDF </button>

The Function will be called when the button listens to the onClick Event.

Complete example of the process ✨

export default function InvoicePDf() {
    const pdfRef = useRef();
      const downloadPDF = () => {
    const input = pdfRef.current;
    html2canvas(input).then((canvas) => {
      const imgData = canvas.toDataURL("image/png");
      const pdf = new jsPDF("p", "mm", "a4", true);
      const pdfWidth = pdf.internal.pageSize.getWidth();
      const pdfHeight = pdf.internal.pageSize.getHeight();
      const imgWidth = canvas.width;
      const imgHeight = canvas.height;
      const ratio = Math.min(pdfWidth / imgWidth, pdfHeight / imgHeight);
      const imgX = (pdfWidth - imgWidth * ratio) / 2;
      const imgY = 30;
      pdf.addImage(
        imgData,
        "PNG",
        imgX,
        imgY,
        imgWidth * ratio,
        imgHeight * ratio
      );
      pdf.save("invoice.pdf");
    });
  };
    return (
        <div ref = { pdfRef } > 
        // whatever the content
            <button onClick={downloadPDF} > Download PDF </button>
        </div>
    )
}

🎆✨ Congratulations you are done ✨ 🎆

---

I'm Chandan Khamitkar, follow me on Twitter https://twitter.com/chandanK_6 & Github - https://github.com/Chandan-6

Thank you for going through my blog. 👋