Vue - export DOM as PDF without jsPDF

Question

I need to create nicely formatted PDFs from website pages that vary greatly in layout and content. The closest I've come to success is with extensive @media print {} CSS on a page-by-page basis, using the browser's print dialog, then choosing 'Save As PDF' in the print dialog.

I'd like to do all that natively in the app without relying on the print dialog, and I've spent hours trying to beat jsPDF into submission with no luck. Most of my pages include jpgs and svgs as well as text and I have tried html2canvas, dompurify & canvg in conjunction with jsPDF.

I don't mind having to use lots of custom CSS to get it looking good in the PDF, but I can't even get all the elements to appear in the downloaded PDF. Most of the time it's just blank, or one random element.

Doesn't work:

downloadPDF() {
  const doc = new jsPDF();
  const contentHtml = this.html;
  doc.fromHTML(contentHtml, 15, 15, { // error: fromHTML is not a function
    width: 170,
  });
  doc.save("sample.pdf");
},

Also doesn't work:

downloadPDF() {
  const doc = new jsPDF();
  /** WITH CSS */
  var canvasElement = document.createElement("canvas");
  html2canvas(this.$refs.printArea, { canvas: canvasElement }).then(function (canvas) {
    const img = canvas.toDataURL("image/jpeg", 0.8);
    doc.addImage(img, "JPEG", 20, 20);
    doc.save("sample.pdf");
  });
},

Also also doesn't work:

downloadPDF() {
  const pdf = new jsPDF({
    orientation: "p",
    unit: "pt",
    format: "letter",
    putOnlyUsedFonts: true,
  });
  pdf.setFontSize(11);
  pdf.html(this.html, {
    callback: function (pdf) {
      pdf.save("download.pdf");
    },
  });
},

Vue - export DOM as PDF without jsPDF

0 Answers