it-swarm.com.de

So verwenden Sie die jsPDF-Bibliothek ordnungsgemäß

Ich möchte einige meiner divs in PDF und ich habe versucht, jsPDF-Bibliothek, aber ohne Erfolg. Es scheint, ich kann nicht verstehen, was ich importieren muss, damit die Bibliothek funktioniert. Ich 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 #smdadminbar ist die erste Div aus dem Körper.

sie können PDF von 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 den Bezeichner zu übergeben, oder ändern Sie #content einfach so, dass er der von Ihnen benötigte Bezeichner ist.

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

Siehe Originalanleitung

Siehe eine funktionierende Geige

118
Well Wisher

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

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 die der KnockoutJS-Neigung ein wenig verbindlich:

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

Sollten Sie nicht auch die Bibliothek jspdf.plugin.from_html.js verwenden? Neben der Hauptbibliothek (jspdf.js) müssen Sie andere Bibliotheken für "Spezialoperationen" verwenden (z. B. jspdf.plugin.addimage.js für die Verwendung von Bildern). Aktivieren Sie https://github.com/MrRio/jsPDF .

3
Pedro Almeida

zunächst müssen Sie einen Handler erstellen.

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

dann schreibe diesen Code in click event:

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

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

vorausgesetzt, Sie haben die doc-Variable bereits deklariert. Und dann haben Sie diese PDF-Datei mit File-Plugin gespeichert.

3
Akshay Tyagi

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