jsPDF não está definido em javascript

Question

Importei a biblioteca jsPDF e tentei exportar para PDF, mas estou recebendo o erro de JavaScript que jsPDF não está definido.

Tentei outros posts semelhantes e não funcionou para mim.

Eu peguei o violino aqui 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

Acho que seu código parece correto, mas há algum problema com o cdn. Eu usei um de depuração aqui.

Aqui está um exemplo prático que criei e que você pode consultar. Se você não vir o download de PDF devido à restrição de stackoverflow, use este violino para testar.

Trabalho Download PDF demo

O link cdn que usei é: JsPDF CDN LINK . Você pode definitivamente procurar outras versões disponíveis.

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

Encontrei dois problemas principais, resolvidos nesta bifurcação . Primeiro, você não vinculou a jspdf. Você pode fazer isso no código html:

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

Em segundo lugar, você adiciona o clickouvinte de evento fora da ready()função. Isso, por sua vez, causa dois problemas: o evento pode não estar anexado (certifique-se de verificar o motivo da ready()função) e as variáveis ​​que você define na ready()função não estão disponíveis (saia do escopo) na clickfunção. Você pode corrigir os dois problemas configurando o clickouvinte dentro do readyouvinte:

$( 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 ..... uma pergunta, meu app funciona algumas vezes em lugares sem rede, então a próxima linha não funcionará sem rede, correto?

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

Então, eu instalei ...

npm install jspdf --save

Mas agora, quais arquivos devo copiar para meu tapete Js para trabalhar na linha?

var doc = new jsPDF();