jsPDF không được định nghĩa trong javascript

Question

Tôi đã nhập thư viện jsPDF và cố gắng xuất sang PDF nhưng tôi gặp lỗi JavaScript jsPDF không được xác định.

Tôi đã thử các bài đăng tương tự khác và nó không hiệu quả với tôi.

Tôi đã tìm được ở đây 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

Tôi nghĩ rằng mã của bạn có vẻ đúng nhưng một số vấn đề với cdn. Tôi đã sử dụng gỡ lỗi một ở đây.

Đây là một ví dụ làm việc mà tôi đã tạo mà bạn có thể tham khảo. Nếu bạn không thấy pdf tải xuống do hạn chế stackoverflow, hãy sử dụng fiddle này để kiểm tra.

Làm việc Tải xuống bản trình diễn PDF

Liên kết cdn tôi đã sử dụng là: JsPDF CDN LINK . Bạn chắc chắn có thể tìm kiếm bất kỳ phiên bản nào khác có sẵn.

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

Tôi đã tìm thấy hai vấn đề chính, được giải quyết trong ngã ba này . Đầu tiên, bạn không liên kết đến jspdf. Bạn có thể làm điều đó trong mã html:

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

Thứ hai, bạn thêm trình clicknghe sự kiện bên ngoài ready()chức năng. Đến lượt nó, điều này gây ra hai vấn đề: sự kiện có thể không được đính kèm (hãy đảm bảo rằng bạn kiểm tra lý do của ready()hàm) và các biến mà bạn xác định trong ready()hàm không khả dụng (ra khỏi phạm vi) trong clickhàm. Bạn có thể khắc phục cả hai sự cố bằng cách đặt trình clicknghe bên trong trình readynghe:

$( 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 ..... một câu hỏi, ứng dụng của tôi hoạt động đôi khi ở những nơi không có mạng, vì vậy dòng tiếp theo sẽ không hoạt động nếu không có mạng, đúng không?

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

Vì vậy, tôi đã cài đặt nó ...

npm install jspdf --save

Nhưng bây giờ, tôi phải sao chép những tập tin nào vào thảm Js của tôi để hoạt động trên đường dây?

var doc = new jsPDF();