Revision history [back]

The solution for utilizing custom HTML & CSS with jsPDF in React is to use a library called html2canvas. This library can convert HTML and CSS elements into a canvas, which can then be exported as a PDF using jsPDF.

To use html2canvas, first, install it as a dependency using npm:

npm install html2canvas

Then, import it into your React component and use it to create a canvas element from the HTML you wish to export:

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const exportPDF = () => {
  const element = document.getElementById('my-element-to-export');
  html2canvas(element).then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('myPDF.pdf');
  });
};

In this example, the exportPDF function selects the HTML element to export using document.getElementById and passes it to html2canvas. It then retrieves the resulting canvas element using canvas.toDataURL and creates a new jsPDF object. Finally, it adds the canvas image to the PDF using pdf.addImage and saves the PDF using pdf.save.

Note that HTML and CSS support in jsPDF is limited, so complex layouts may require some tweaking of the HTML and CSS code before exporting.