jsPDF ist nicht in Javascript definiert

Question

Ich habe die jsPDF-Bibliothek importiert und versucht, sie als PDF zu exportieren, erhalte jedoch den JavaScript-Fehler. JsPDF ist nicht definiert.

Ich habe andere ähnliche Beiträge ausprobiert und es hat bei mir nicht funktioniert.

Ich habe die Geige hier 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

Ich denke, Ihr Code scheint korrekt zu sein, aber es gibt ein Problem mit CDN. Ich habe hier Debug eins verwendet.

Hier ist ein Arbeitsbeispiel, das ich erstellt habe und auf das Sie verweisen können. Wenn Sie aufgrund von Einschränkungen des Stackoverflow keinen PDF-Download sehen, verwenden Sie diese Geige zum Testen.

Arbeiten PDF-Demo herunterladen

Der von mir verwendete CDN-Link lautet: JsPDF CDN LINK . Sie können definitiv nach anderen verfügbaren Versionen suchen.

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

Ich habe zwei Hauptprobleme gefunden, die in dieser Gabelung gelöst wurden . Erstens haben Sie nicht verlinkt jspdf. Sie können dies im HTML-Code tun:

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

Zweitens fügen Sie den clickEreignis-Listener außerhalb der ready()Funktion hinzu. Dies führt wiederum zu zwei Problemen: Das Ereignis ist möglicherweise nicht angehängt (stellen Sie sicher, dass Sie den Grund für die ready()Funktion überprüfen ) und die Variablen, die Sie in der ready()Funktion definieren, sind in der Funktion nicht verfügbar (außerhalb des Gültigkeitsbereichs) click. Sie können beide Probleme beheben, indem Sie den clickListener im readyListener einstellen :

$( 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 ..... eine Frage, meine App funktioniert manchmal an Orten ohne Netzwerk, sodass die nächste Zeile ohne Netzwerk nicht funktioniert, richtig?

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

Also habe ich es installiert ...

npm install jspdf --save

Aber jetzt, welche Dateien muss ich auf meinen Js-Teppich kopieren, um die Linie zu bearbeiten?

var doc = new jsPDF();