jsPDF no está definido en javascript

Question

Importé la biblioteca jsPDF e intenté exportar a PDF, pero recibo un error de JavaScript. JsPDF no está definido.

Probé otras publicaciones similares y no funcionó para mí.

Tengo el violín aquí 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

Creo que su código parece correcto, pero hay algún problema con cdn. He usado debug one aquí.

Aquí hay un ejemplo de trabajo que creé y que puede consultar. Si no ve la descarga de pdf debido a la restricción de stackoverflow, use este violín para probar.

Trabajando Descargar demo en PDF

El enlace cdn que utilicé es: JsPDF CDN LINK . Definitivamente puede buscar otras versiones 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

Encontré dos problemas principales, resueltos en esta bifurcación . Primero, no se vinculó a jspdf. Puedes hacerlo en el código html:

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

En segundo lugar, agrega el clickdetector de eventos fuera de la ready()función. Esto, a su vez, causa dos problemas: es posible que el evento no esté adjunto (asegúrese de verificar el motivo de la ready()función) y las variables que define en la ready()función no están disponibles (salga del alcance) en la clickfunción. Puede solucionar ambos problemas configurando el clickoyente dentro del readyoyente:

$( 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 pregunta, mi aplicación funciona algunas veces en lugares sin red, por lo que la siguiente línea no funcionará sin red, ¿correcto?

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

Entonces, lo instalé ...

npm install jspdf --save

Pero ahora, ¿qué archivos tengo que copiar en mi alfombra Js para trabajar en la línea?

var doc = new jsPDF();