How to properly use jsPDF library

问题:

I want to convert some of my divs into PDF and I\'ve tried jsPDF library but with no success. It seems I can\'t understand what I need to import to make the library work. I\'ve been through the examples and I still can\'t figure it out. I\'ve tried the following:

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

After jQuery and:

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

for testing purposes but I receive:

\"Cannot read property \'#smdadminbar\' of undefined\"

where #smdadminbar is the first div from the body.

回答1:

you can use pdf from html as follows,

Step 1: Add the following script to the header

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

or download locally

Step 2: Add HTML script to execute jsPDF code

Customize this to pass the identifier or just change #content to be the identifier you need.

 <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>

Step 3: Add your body content

<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>

Refer to the original tutorial

See a working fiddle

回答2:

You only need this link jspdf.min.js

It has everything in it.

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

回答3:

This is finally what did it for me (and triggers a disposition):

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>

And for those of the KnockoutJS inclination, a little binding:

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);
    }
};

回答4:

Shouldn\'t you also be using the jspdf.plugin.from_html.js library? Besides the main library (jspdf.js), you must use other libraries for \"special operations\" (like jspdf.plugin.addimage.js for using images). Check https://github.com/MrRio/jsPDF.

回答5:

first, you have to create a handler.

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

then write this code in click event:

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

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

assuming you\'ve already declared doc variable. And Then you have save this pdf file using File-Plugin.