Cách sử dụng thư viện jsPDF đúng cách

Tôi muốn chuyển đổi một số div của mình thành PDF và tôi đã thử thư viện jsPDF nhưng không thành công. Có vẻ như tôi không thể hiểu những gì tôi cần nhập để làm cho thư viện hoạt động. Tôi đã xem qua các ví dụ và tôi vẫn không thể tìm ra nó. Tôi đã thử những cách sau:

<script type="text/javascript" src="js/jspdf.min.js"></script>

Sau jQuery và:

$("#html2pdf").on('click', function(){
    var doc = new jsPDF();
    doc.fromHTML($('body').get(0), 15, 15, {
        'width': 170
    });
    console.log(doc);
});

cho mục đích thử nghiệm nhưng tôi nhận được:

"Cannot read property '#smdadminbar' of undefined"

nơi #smdadminbarlà div đầu tiên ra khỏi cơ thể.

bạn có thể sử dụng pdf từ html như sau,

Bước 1: Thêm tập lệnh sau vào tiêu đề

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

hoặc tải xuống cục bộ

Bước 2: Thêm tập lệnh HTML để thực thi mã jsPDF

Tùy chỉnh điều này để chuyển số nhận dạng hoặc chỉ thay đổi #content thành số nhận dạng bạn cần.

 <script>
    function demoFromHTML() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.
        source = $('#content')[0];

        // we support special element handlers. Register them with jQuery-style 
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors 
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
            source, // HTML string or DOM elem ref.
            margins.left, // x coord
            margins.top, { // y coord
                'width': margins.width, // max width of content on PDF
                'elementHandlers': specialElementHandlers
            },

            function (dispose) {
                // dispose: object with X, Y of the last line add to the PDF 
                //          this allow the insertion of new lines after html
                pdf.save('Test.pdf');
            }, margins
        );
    }
</script>

Bước 3: Thêm nội dung cơ thể của bạn

<a href="javascript:demoFromHTML()" class="button">Run Code</a>
<div id="content">
    <h1>  
        We support special element handlers. Register them with jQuery-style.
    </h1>
</div>

Tham khảo hướng dẫn gốc

Xem một trò chơi làm việc

Bạn chỉ cần liên kết này jspdf.min.js

Nó có tất cả mọi thứ trong đó.

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

Đây cuối cùng là những gì đã làm cho tôi (và gây ra một sự định đoạt):

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);

<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>

Và đối với những người có khuynh hướng KnockoutJS, một chút ràng buộc:

ko.bindingHandlers.generatePDF = {
    init: function(element) {

        function onClick() {
            var pdf = new jsPDF('p', 'pt', 'letter');
            pdf.canvas.height = 72 * 11;
            pdf.canvas.width = 72 * 8.5;

            pdf.fromHTML(document.body);

            pdf.save('test.pdf');                    
        };

        element.addEventListener("click", onClick);
    }
};

Bạn cũng nên sử dụng thư viện jspdf.plugin.from_html.js? Ngoài thư viện chính (jspdf.js), bạn phải sử dụng các thư viện khác cho "hoạt động đặc biệt" (như jspdf.plugin.addimage.js để sử dụng hình ảnh). Kiểm tra https://github.com/MrRio/jsPDF .

trước tiên, bạn phải tạo một trình xử lý.

var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

sau đó viết mã này trong sự kiện nhấp chuột:

doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
        });

var pdfOutput = doc.output();
            console.log(">>>"+pdfOutput );

giả sử bạn đã khai báo biến doc. Và Sau đó, bạn đã lưu tệp pdf này bằng File-Plugin.

Theo phiên bản mới nhất (1.5.3) không có fromHTML()phương pháp nào nữa. Thay vào đó, bạn nên sử dụng plugin HTML jsPDF, hãy xem: https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

Bạn cũng cần thêm thư viện html2canvas để nó hoạt động bình thường: https://github.com/niklasvh/html2canvas

JS (từ tài liệu API):

var doc = new jsPDF();   

doc.html(document.body, {
   callback: function (doc) {
     doc.save();
   }
});

Bạn cũng có thể cung cấp chuỗi HTML thay vì tham chiếu đến phần tử DOM.

làm thế nào về vuejs làm thế nào nó được áp dụng?

function onClick() {
  var pdf = new jsPDF('p', 'pt', 'letter');
  pdf.canvas.height = 72 * 11;
  pdf.canvas.width = 72 * 8.5;

  pdf.fromHTML(document.body);

  pdf.save('test.pdf');
};

var element = document.getElementById("clickbind");
element.addEventListener("click", onClick);

<h1>Dsdas</h1>

<a id="clickbind" href="#">Click</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>