Solución:
Primero importe la biblioteca PDF como:
import jsPDF from 'jspdf'
Luego, simplemente crea una instancia del objeto y dale el contenido:
methods: {
createPDF () {
let pdfName="test";
var doc = new jsPDF();
doc.text("Hello World", 10, 10);
doc.save(pdfName + '.pdf');
}
}
Asegúrese de leer la documentación para obtener más
Descargue el contenido de la página html, se puede seguir como:
-
Especifique la referencia del elemento, cuyo contenido desea descargar como pdf
<div ref="content"> .... .. </div>
-
Crear un botón de descarga como
<button @click="download">Download PDF</button>
-
Asegúrese de agregar e importar la biblioteca jsPDF en vue-component
import jsPDF from 'jspdf' import html2canvas from "html2canvas"
-
Especifique el método en el componente VUE como
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"); }); }, }
Vea la demostración @Download PDF a través de VUEJS.
Descargue el contenido de la página html, se puede seguir como:
Specify the ref to the element, whose content you want to download as pdf
<div ref="content">
....
..
</div>
Crear un botón de descarga como
<button @click="downloadWithCSS">Download PDF</button>
Asegúrese de agregar e importar la biblioteca jsPDF en 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);
});
},
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)