Convert html into PDF and put the converted PDFs into the zip file in javascript

Question

I've to create the pdf files using the HTML and after creating the PDFs, Need to include these files in the zip. So basically there is one download button when the user clicks on it. The zip file will get downloaded and zip contains all the converted files.

Is there any way to achieve the mentioned functionality in js? I'm using react and meteor for creating the web application.

Answer 1

For the first step, convert HTML to PDF file, you can use:

• html2canvas ( http://html2canvas.hertzen.com/ ) and jspdf ( https://github.com/MrRio/jsPDF )
• dom-to-image ( https://github.com/tsayen/dom-to-image ) and jspdf

A sample with dom-to-image .

function generatePdf() {
  // get DOM element
  const node = document.getElementById('elementId');
  // generate the png from a DOM element
  domtoimage.toPng(node)
  .then((dataUrl) => {
    // generate the PDF
    const pdf = new jsPDF();
    // define max width and max height of the document
    const width = pdf.internal.pageSize.width;
    const height = pdf.internal.pageSize.height;
    // add the png in the PDF (fix the width and the height)
    pdf.addImage(dataUrl, 'PNG', 0, 0, width, height);
    // display the pdf in another tab
    window.open(pdf.output('bloburl'), '_blank');
  })
  .catch((error) => {
    console.error('oops, something went wrong!', error);
  });
}

For the second step, I never do it. I can't help you.