jsPDF n'est pas défini en javascript

Question

J'ai importé la bibliothèque jsPDF et essayé d'exporter au format PDF mais j'obtiens l'erreur JavaScript jsPDF n'est pas définie.

J'ai essayé d'autres articles similaires et cela n'a pas fonctionné pour moi.

J'ai le violon ici https://jsfiddle.net/aybhvf8e/1/

<script type="text/javascript" src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

$( document ).ready(function() { var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; }) $('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});


<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

Answer 1

Je pense que votre code semble correct mais un problème avec cdn. J'ai utilisé un débogage ici.

Voici un exemple de travail que j'ai créé et auquel vous pouvez vous référer. Si vous ne voyez pas le téléchargement de pdf en raison de la restriction de stackoverflow, utilisez ce violon pour tester.

Télécharger la démo PDF

Le lien cdn que j'ai utilisé est: JsPDF CDN LINK . Vous pouvez certainement rechercher toutes les autres versions disponibles.

function createPdf() {

  var doc = new jsPDF();
  
  source = $('#content')[0];
  
  specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true
        }
    };
  
  doc.fromHTML(
    source,
    15,
    15, 
    {
      'width': 170,
      'elementHandlers': specialElementHandlers
    }
  );
  doc.save('sample-file.pdf')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button onclick="javascript:createPdf()" id="cmd">generate PDF</button>

Answer 2

J'ai trouvé deux problèmes principaux, résolus dans cette fourchette . Premièrement, vous n’avez pas créé de lien vers jspdf. Vous pouvez le faire dans le code html:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

Deuxièmement, vous ajoutez l' clickécouteur d'événements en dehors de la ready()fonction. Ceci, à son tour, pose deux problèmes: l'événement peut ne pas être attaché (assurez-vous de vérifier la raison de la ready()fonction) et les variables que vous définissez dans la ready()fonction ne sont pas disponibles (hors de portée) dans la clickfonction. Vous pouvez résoudre les deux problèmes en définissant l' clickécouteur dans l' readyécouteur:

$( document ).ready(function() { var doc = new jsPDF(); var specialElementHandlers = { '#editor': function (element, renderer) { return true; } }; $('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

})

Answer 3

VQR ..... une question, mon application fonctionne parfois sur des endroits sans réseau, donc la ligne suivante ne fonctionnera pas sans réseau, n'est-ce pas?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

Alors, je l'ai installé ...

npm install jspdf --save

Mais maintenant, quels fichiers dois-je copier sur mon tapis Js pour travailler la ligne?

var doc = new jsPDF();