jsPDF non è definito in javascript

Question

Ho importato la libreria jsPDF e ho provato a esportare in PDF ma ricevo l'errore JavaScript jsPDF non è definito.

Ho provato altri post simili e non ha funzionato per me.

Ho qui il violino 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

Penso che il tuo codice sembri corretto ma qualche problema con cdn. Ho usato uno di debug qui.

Ecco un esempio funzionante che ho creato a cui puoi fare riferimento. Se non vedi il download del pdf a causa della restrizione dello stackoverflow, usa questo violino per testare.

Scarica demo PDF funzionante

Il link cdn che ho usato è: JsPDF CDN LINK . Puoi sicuramente cercare qualsiasi altra versione disponibile.

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

Ho trovato due problemi principali, risolti in questo fork . Innanzitutto, non ti sei collegato a jspdf. Puoi farlo nel codice html:

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

Secondo, aggiungi il clicklistener di eventi al di fuori della ready()funzione. Questo, a sua volta, causa due problemi: l'evento potrebbe non essere allegato (assicurati di controllare il motivo della ready()funzione) e le variabili che definisci nella ready()funzione non sono disponibili (esci dall'ambito) nella clickfunzione. Puoi risolvere entrambi i problemi impostando l' clickascoltatore all'interno readydell'ascoltatore:

$( 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 ..... una domanda, la mia app a volte funziona in luoghi senza rete, quindi la riga successiva non funzionerà senza rete, giusto?

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

Quindi, l'ho installato ...

npm install jspdf --save

Ma ora, quali file devo copiare sul mio tappeto Js per far funzionare la linea?

var doc = new jsPDF();