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
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
new jspdf.jsPDF() it works?
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.
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);
});
},
}
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:
