Generate pdf with jspdf and Vue.js

Question

I am new with Vue.js, and I am trying to generate a PDF, but I have no idea how to do it.

This is what I have:

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


  methods: {
    pdf () {
      const doc = new jsPDF()
    }
  }

}

Error:

Property or method "pdf" is not defined on the instance but referenced during render

score 36 · Accepted Answer · edited Jun 27 '18 at 16:57

36

First import the PDF library as:

import jsPDF from 'jspdf'

Then simply instantiate the object and give it the contents:

methods: {
  createPDF () {
    let pdfName = 'test'; 
    var doc = new jsPDF();
    doc.text("Hello World", 10, 10);
    doc.save(pdfName + '.pdf');
  }
}

Make sure to read the documentation for more

edited Jun 27 '18 at 16:57

Coder Absolute

5,417
5
26
41

answered Dec 06 '17 at 07:14

samayo

16,163
12
91
106

I'm seeing "ReferenceError: jsPDF is not defined" but when i do `new jspdf.jsPDF()` it works? – Akin Hwan Oct 31 '20 at 16:36
Well, considering this was answered 3 years ago, something must have been updated. make sure the methods file has access to the file importer – samayo Oct 31 '20 at 20:16
How to use this if we put external web url? – learningMonk Sep 02 '21 at 12:42
@user7411584 I think you need to download the file first – samayo Sep 02 '21 at 14:58
Thanks for your response. Can you guide me on this? If i put any web URL to download innerHTML first? – learningMonk Sep 03 '21 at 04:00
@user7411584 check this answer https://stackoverflow.com/a/54126825/1640606 – samayo Sep 03 '21 at 06:52

Abhay · Answer 2 · 2019-10-28T18:39:03.350

30

Download html page content, One can follow as:

Specify the ref to the element, whose content you want to download as pdf
```
<div ref="content">
   ....
   ..
</div>
```

Create a button download like

<button @click="download">Download PDF</button>

Make sure to add & import jsPDF library into vue-component

import jsPDF from 'jspdf' 
import html2canvas from "html2canvas"

Specify the method into the VUE component like

methods: {
 download() {
  const doc = new jsPDF();
  const contentHtml = this.$refs.content.innerHTML;
  doc.fromHTML(contentHtml, 15, 15, {
    width: 170
  });
  doc.save("sample.pdf");
 },

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

See the demo @Download PDF via VUEJS.

edited Oct 28 '19 at 18:39

answered Mar 23 '19 at 11:20

Abhay

6,410
4
26
34

Do you know how to make the external css applied as well for the contentHtml ? – Exception handler Mar 28 '19 at 08:27
@Exceptionhandler, I have updated the demo link for external css as well . check https://codesandbox.io/s/738o84vxnq – Abhay Mar 29 '19 at 08:50
@techyaura the "Download with CSS" button throws `5ms html2canvas: DOMException: "The operation is insecure.". interesting though ! – Pierre Cordier Dec 11 '19 at 19:54
Running the browser without CORS solves it for the purpose of this test. – Pierre Cordier Dec 11 '19 at 20:03
The link you send for the demo is not working https://codesandbox.io/s/738o84vxnq – shaked Jan 03 '21 at 09:48
FYI, jsPDF no longer uses "fromHTML'. You'll need to use the 'html' function now. See more at http://raw.githack.com/MrRio/jsPDF/master/docs/module-html.html – akaHeimdall Mar 10 '21 at 12:22
download with css is not working for me. I am getting a blank pdf – vithu shaji Apr 28 '21 at 13:24
While any web URL as an input to convert this page to pdf ? How can i use this for web URL? – learningMonk Sep 02 '21 at 12:44

score 4 · Answer 3 · answered Feb 26 '20 at 11:15

Download html page content, One can follow as:

Specify the ref to the element, whose content you want to download as pdf

<div ref="content">
   ....
   ..
</div>

Create a button download like

<button @click="downloadWithCSS">Download PDF</button>

Make sure to add & import jsPDF library into vue-component

import jsPDF from 'jspdf' 
import domtoimage from "dom-to-image";


Specify the method into the VUE component like

methods: {
 downloadWithCSS() {

   /** WITH CSS */
    domtoimage
    .toPng(this.$refs.content)
    .then(function(dataUrl) {
      var img = new Image();
      img.src = dataUrl;
      const doc = new jsPDF({
        orientation: "portrait",
        // unit: "pt",
        format: [900, 1400]
      });
      doc.addImage(img, "JPEG", 20, 20);
      const date = new Date();
      const filename =
        "timechart_" +
        date.getFullYear() +
        ("0" + (date.getMonth() + 1)).slice(-2) +
        ("0" + date.getDate()).slice(-2) +
        ("0" + date.getHours()).slice(-2) +
        ("0" + date.getMinutes()).slice(-2) +
        ("0" + date.getSeconds()).slice(-2) +
        ".pdf";
      doc.save(filename);
    })
    .catch(function(error) {
      console.error("oops, something went wrong!", error);
    });
 },
}

While any web URL as an input to convert this page to pdf ? How can i use this for web URL? — learningMonk, Sep 02 '21 at 12:44

score 0 · Answer 4 · answered Oct 25 '22 at 13:24

I had similar issue, especially with generating proper size and resolution.

To keep it brief, below is a link to the post:

Using jsPDF, html2Canvas, and Vue to generate PDF's

I modified for my use:

downloadItem() {
        const invoiceName = this.currentInvoice.invoiceId,
              content = this.$refs.invoiceContent;

        const doc = new jsPDF({
            orientation: "landscape",
            unit: "px",
            format: "a4",
            hotfixes: ["px_scaling"],
        });

        html2canvas(content, {
            width: doc.internal.pageSize.getWidth(),
            height: doc.internal.pageSize.getHeight(),
        }).then((canvas) => {
            const img = canvas.toDataURL("image/png");

            doc.addImage(
                img,
                "PNG",
                140,
                10,
                doc.internal.pageSize.getWidth(),
                doc.internal.pageSize.getHeight()
            );

            doc.save("invoice-" + invoiceName + ".pdf");
        });
    },

Link to the jsPDF Documentation below:

jsPDF Documentation

Generate pdf with jspdf and Vue.js

4 Answers4