Después de de esta prolongada compilación de información pudimos resolver esta contrariedad que pueden tener muchos de nuestros usuarios. Te regalamos la solución y nuestro deseo es que sea de gran ayuda.
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, uno puede seguir como:
-
Especifique la referencia al elemento, cuyo contenido desea descargar como pdf
.... .. -
Crear un botón de descarga como
-
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"); ); ,
Ver la demostración @Descargar PDF a través de VUEJS.
Descargue el contenido de la página html, uno puede seguir como:
Specify the ref to the element, whose content you want to download as pdf
....
..
Crear un botón de descarga como
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);
);
,