So verwenden Sie die jsPDF-Bibliothek ordnungsgemäß

83

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?

Daniela costina Vaduva
quelle
derjenige, der für mich gearbeitet hat github.com/devrajatverma/jsPdfExample
Rajat
1
Hinweis für alle, die hierher kommen, um herauszufinden, fromHTMLwarum dies nicht in den jsPDF-Dokumenten dokumentiert ist: " Wir schließen dieses Problem, da wir HTML und AddHTML nicht mehr unterstützen. " ( Ab Ausgabe 516 )
toraritte

Antworten:

130

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

Nun, Wisher
quelle
4
Vielen Dank, dass Sie dies gepostet haben, aber ich habe den genauen Code oben (lokal) ausprobiert und er generiert ein leeres PDF-Dokument. Es funktioniert überhaupt nicht mit jquery 1.11.0, also habe ich die gleiche jquery-Version verwendet wie auf github.com/MrRio/jsPDF/blob/master/examples/js/jquery/…
user1063287
Versuchte Ihren Code @Well Wisher, der mir den folgenden Fehler für die Bibliotheksdatei selbst gibt - Kann die Eigenschaft 'Länge' von undefiniertem jspdf.plugin.from_html.js nicht lesen: 500
Lernender
1
Ja, das ist wirklich gut. Aber die Ausgabe von JSPdf überschneidet sich mit anderen Elementen meiner Tabellenelemente. Wie kann ich das lösen? .... Ich habe die Größe der Schriftarten geändert und sie als Querformatmodus erstellt die meisten Änderungen, aber nichts funktioniert
Sudhir Belagali
1
Ich konnte dieses Beispiel nur mithilfe der CloudFlare-CDNs zum Laufen bringen: <script src = " cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/… > oder <script src =" cdnjs.cloudflare.com /ajax/libs/jspdf/1.2.61/… > Aber ich stimme zu, Dokumentation und allgemeine Variationen in der Codequelle tragen zur Schwierigkeit bei, dieses Plugin zu verwenden. Sogar diese CDNs (die von JSfiddle verwendet werden) unterscheiden sich von dem Link "Lokal herunterladen" @Well Wisher-Referenzen oben.
Scott
1
@ Scott ich die sie den Link entfernt
Well Wisher
17

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>
user890332
quelle
2
Danke, das hat mich verrückt gemacht! Die Verwendung der Debug-Version von jspdf funktionierte, während die anderen Versionen in keiner Konfiguration dies taten. Vielleicht bricht die Minifizierung es irgendwie? oder ich mache es falsch.
Jookyone
Das hat mir wirklich geholfen. Ich habe die ursprüngliche jspdf.js-Datei verwendet und sie hat nicht funktioniert. Die Verwendung von jspdf.debug.js hat den Job erledigt.
Francisco Quintero
Interessant, warum die Produktionsversion nicht funktioniert ... Ich habe alle Plugins in die HTML-Seite aufgenommen und dennoch hat nur diese Debug-Version geholfen.
ilter
Hallo, ich habe es versucht, aber ich bekomme eine Fehlermeldung Error in function FileSaver@http://mrrio.github.io/jsPDF/dist/jspdf.debug.js:5875:18: get_URL(...).createObjectURL is not a function, dasselbe, wenn ich die Bower-Version verwende. Irgendeine Ahnung?
dbr
Überprüfen Sie die neueste Version auf GitHub und ändern Sie die obige URL entsprechend. Spätestens ist 1.3.5.
Pasx
8

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);
    }
};
Zuhälter
quelle
Gibt es mehr zu diesem Ausschnitt? Wenn ich versuche, dies auszuführen, erhalte ich eine Fehlermeldung, die angibt, dass 'pdf.canvas' undefiniert ist. "Ungefangener Typfehler: Die Eigenschaft 'Höhe' von undefiniert kann nicht festgelegt werden"
Ryan Gibbs
Nicht sicher was du meinst? Das Snippet wird mit demselben Code ausgeführt. Vielleicht stimmt etwas in Ihrer Implementierung nicht. Können Sie console.log (pdf) und die Ausgabe teilen.
Pimbrouwers
Es muss ein Caching-Problem gewesen sein oder so, als ich es gerade mit der Datei console.log () versuchte, wurde der Code korrekt ausgeführt. Ich bekomme immer noch das Problem mit leeren Seiten, aber das ist eine andere Geschichte. Vielen Dank.
Ryan Gibbs
Außerdem habe ich den Fehler "Eigenschaft 'addEventListener' kann nicht gelesen werden"
Manjitha Teshara
Ich liebe diese jsPDF () Bibliothek. Übrigens, wenn jemand anderes dies nützlich findet, habe ich gerade die Syntax für das Anhängen eines Rückrufs herausgefunden, der ausgeführt werden soll, nachdem das PDF generiert wurde:pdf.save("myfile.pdf", function(){ alert("pdf generation/save finished!"); });
Christopher D. Emerson
3

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 .

Pedro Almeida
quelle
3
Die Datei jspdf.source.js scheint alle anderen Bibliotheken zu enthalten.
Whossname
3

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.

Akshay Tyagi
quelle
3

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.

Vitalii Chmovzh
quelle
Scheint auch nicht mehr zu funktionieren - jQuery.Deferred Ausnahme: doc.html ist keine Funktion TypeError: doc.html ist keine Funktion
DropHit
1

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>

Antwnina
quelle
Vielen Dank für die Veröffentlichung des vuejs Beispiels für die Verwendung von jdpsf
Shane G