web-dev-qa-db-fra.com

Générez un pdf avec jspdf et Vue.js

Je suis nouveau avec Vue.js et j'essaie de générer un fichier PDF, mais je ne sais pas comment le faire.

C'est ce que j'ai

import * as jsPDF  from "jspdf"

export default {

  props: ['id'],


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

}

Erreur:

La propriété ou la méthode "pdf" n'est pas définie sur l'instance mais référencée lors du rendu

javascriptpdfvuejs2jspdf
14
Carlos Uriel Santiago

Commencez par importer la bibliothèque PDF en tant que:

import jsPDF from 'jspdf'

Ensuite, instanciez simplement l'objet et donnez-lui le contenu:

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

Assurez-vous de lire le documentation pour plus

21
samayo

Télécharger le contenu de la page HTML, on peut suivre comme:

  1. Spécifiez la référence à l'élément dont vous souhaitez télécharger le contenu en tant que pdf.

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

  2. Créez un bouton de téléchargement comme

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

  3. Assurez-vous d’ajouter et d’importer la bibliothèque jsPDF dans vue-composant

    import jsPDF from 'jspdf'

  4. Spécifiez la méthode dans le composant VUE comme

    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");
   });
 },
}

    Voir la démo @ Télécharger PDF via VUEJS .

10
techyaura