jsPDF tidak didefinisikan dalam javascript

Question

Saya mengimpor pustaka jsPDF dan mencoba mengekspor ke PDF tetapi saya mendapatkan kesalahan JavaScript jsPDF tidak ditentukan.

Saya mencoba posting serupa lainnya dan itu tidak berhasil untuk saya.

Aku punya biolanya di sini 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

Saya pikir kode Anda tampaknya benar tetapi ada masalah dengan cdn. Saya telah menggunakan debug satu di sini.

Berikut adalah satu contoh kerja yang saya buat yang dapat Anda rujuk. Jika Anda tidak melihat unduhan pdf karena pembatasan stackoverflow, gunakan biola ini untuk mengujinya.

Bekerja Unduh demo PDF

Link cdn yang saya gunakan adalah: JsPDF CDN LINK . Anda pasti dapat mencari versi lain yang tersedia.

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

Saya menemukan dua masalah utama, diselesaikan di garpu ini . Pertama, Anda tidak menautkan ke jspdf. Anda dapat melakukannya di kode html:

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

Kedua, Anda menambahkan clickpendengar acara di luar ready()fungsi. Hal ini, pada gilirannya, menyebabkan dua masalah: acara mungkin tidak dilampirkan (pastikan Anda memeriksa alasan ready()fungsi) dan variabel yang Anda tetapkan dalam ready()fungsi tidak tersedia (keluar dari ruang lingkup) dalam clickfungsi. Anda dapat memperbaiki kedua masalah tersebut dengan menyetel clicklistener di dalam readylistener:

$( 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 ..... satu pertanyaan, aplikasi saya berfungsi beberapa kali di tempat-tempat tanpa jaringan, jadi baris berikutnya tidak akan berfungsi tanpa jaringan, benar?

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

Jadi, saya menginstalnya ...

npm install jspdf --save

Tapi sekarang, file apa yang harus saya salin ke karpet Js saya agar sesuai?

var doc = new jsPDF();