Hoe u JSPDF-bibliotheek correct wilt gebruiken

Ik wil een deel van mijn dia’s omzetten in PDF en ik heb JSPDF-bibliotheek geprobeerd, maar zonder succes. Het lijkt erop dat ik niet kan begrijpen wat ik nodig heb om te importeren om de bibliotheek te laten werken. Ik heb de voorbeelden doorgemaakt en ik kan het nog steeds niet achterhalen. Ik heb het volgende geprobeerd:

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

Na jQuery en:

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

Voor testdoeleinden, maar ik ontvang:

"Cannot read property '#smdadminbar' of undefined"

Waar #smdadminbaris de eerste div van het lichaam.

Antwoord 1, Autoriteit 100%

U kunt PDF gebruiken van HTML als volgt,

Stap 1: Voeg het volgende script toe aan de koptekst

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

of lokaal downloaden

Stap 2: Voeg HTML-script toe om de JSPDF-code

uit te voeren

Pas dit aan om de identifier door te geven of gewoon te wijzigen #Content om de identifier te zijn die u nodig hebt.

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

Stap 3: voeg je lichaamsinhoud toe

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

Raadpleeg de originele handleiding

Zie een werkende viool

Antwoord 2, Autoriteit 12%

U hebt alleen deze link nodig jspdf.min.js

Het heeft alles erin.

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

Antwoord 3, Autoriteit 8%

Dit is eindelijk wat het voor mij deed (en triggert een dispositie):

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>

var doc = new jsPDF();   
doc.html(document.body, {
   callback: function (doc) {
     doc.save();
   }
});

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

doc.fromHTML($('body').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
        });
var pdfOutput = doc.output();
            console.log(">>>"+pdfOutput );

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>