Saltar al contenido

Generar pdf con jspdf y Vue.js

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:

  1. Especifique la referencia al elemento, cuyo contenido desea descargar como pdf

    .... ..
  2. Crear un botón de descarga como

    
    
  3. Asegúrese de agregar e importar la biblioteca jsPDF en vue-component

    import jsPDF from 'jspdf' 
    import html2canvas from "html2canvas"
    
  4. 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);
    );
 ,

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *