So verwenden Sie die jsPDF-Bibliothek ordnungsgemäß

Ich möchte einige meiner Divs in PDF konvertieren und habe die jsPDF-Bibliothek ausprobiert, aber ohne Erfolg. Anscheinend kann ich nicht verstehen, was ich importieren muss, damit die Bibliothek funktioniert. Ich habe die Beispiele durchgesehen und kann es immer noch nicht herausfinden. Ich habe folgendes versucht:

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

Nach jQuery und:

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

zu Testzwecken erhalte ich aber:

"Cannot read property '#smdadminbar' of undefined"

Wo #smdadminbarist der erste Div vom Körper?

Sie können PDF aus HTML wie folgt verwenden:

Schritt 1: Fügen Sie dem Header das folgende Skript hinzu

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

oder lokal herunterladen

Schritt 2: Fügen Sie ein HTML-Skript hinzu, um jsPDF-Code auszuführen

Passen Sie dies an, um die Kennung zu übergeben, oder ändern Sie einfach #content, um die Kennung zu erhalten, die Sie benötigen.

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

Schritt 3: Fügen Sie Ihren Körperinhalt hinzu

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

Lesen Sie das Original-Tutorial

Sehen Sie eine funktionierende Geige

Sie benötigen nur diesen Link jspdf.min.js

Es hat alles drin.

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

Dies ist schließlich, was es für mich getan hat (und eine Disposition auslöst):

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>

Und für diejenigen mit KnockoutJS-Neigung eine kleine Bindung:

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

Sollten Sie nicht auch die Bibliothek jspdf.plugin.from_html.js verwenden? Neben der Hauptbibliothek (jspdf.js) müssen Sie andere Bibliotheken für "spezielle Operationen" verwenden (wie jspdf.plugin.addimage.js für die Verwendung von Bildern). Überprüfen Sie https://github.com/MrRio/jsPDF .

Zuerst müssen Sie einen Handler erstellen.

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

Schreiben Sie dann diesen Code in das Klickereignis:

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

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

Angenommen, Sie haben die Dokumentvariable bereits deklariert. Und dann haben Sie diese PDF-Datei mit dem File-Plugin gespeichert.

Nach der neuesten Version (1.5.3) gibt es keine fromHTML()Methode mehr. Stattdessen sollten Sie das jsPDF-HTML-Plugin verwenden, siehe: https://rawgit.com/MrRio/jsPDF/master/docs/module-html.html#~html

Sie müssen auch die html2canvas-Bibliothek hinzufügen, damit sie ordnungsgemäß funktioniert: https://github.com/niklasvh/html2canvas

JS (aus API-Dokumenten):

var doc = new jsPDF();   

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

Sie können auch eine HTML-Zeichenfolge anstelle eines Verweises auf das DOM-Element angeben.

Wie wäre es in Vuejs, wie ist es anwendbar?

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>