jsPDF Tabellen darstellen

Basti_2015

Mitglied
Hallo,

Hat jemand mit jsPDF Erfahrung und kann mir evtl. weiterhelfen?

Ich möchte gern meine HTML-Ausgabe als PDF speichern. Es handelt sich um eine Tabelle und Text. Das erstellen der PDF funktioniert einwandfrei. Nur leider gibt es Probleme mit dem darstellen der Tabellen.

Für jede Spalte, setzt der einen Absatz , es wird halt keine Tabelle dargestellt.

Hier mal der js code
Code:
$('#cmd').click(function () { 
    doc.fromHTML($('#content').html(), 15, 15, { 
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('test.pdf');
});
 
Danke dir SpiceLab, ich habe auch schon paar Tage gegoogelt und einiges Probiert. Nichts funktioniert. Ich habe jetzt mal das Beispiel ausprobiert.

Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>html2canvas example</title>
        <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>  
        <script type="text/javascript" src="js/jspdf.js"></script>  
        <script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>  

        <script type="text/javascript">
            $(document).ready(function() {
                var specialElementHandlers = {
                    '#editor': function(element, renderer) { return true; }
                };

                $('#cmd').click(function() {
                    var doc = new jsPDF();

                    doc.fromHTML($('#target').html(), 15, 15, {
                        'width': 170,'elementHandlers': specialElementHandlers
                    });

                    doc.save('sample-file.pdf');
                });
            });
        </script>
    </head>
    <body id="target">
        <div id="content">
            <h3>Hello, this is a H3 tag</h3>

            <a class="upload">Upload to Imgur</a>  
            <h2>this is <b>bold</b> <span style="color:red">red</span></h2>

            <table border="1">
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
                <tr>
                    <td>row 1, cell 1</td>
                    <td>row 1, cell 2</td>
                </tr>
                <tr>
                    <td>row 2, cell 1</td>
                    <td>row 2, cell 2</td>
                </tr>
            </table>
        </div>

        <button id="cmd">generate PDF</button>
    </body>
</html>

Doch da meldet mir die Browserkonsole folgendes :

TypeError: jsPDFAPI is undefined
[Weitere Informationen]from_html.js:529:3
TypeError: API is undefined
[Weitere Informationen]split_text_to_size.js:41:5
TypeError: API is undefined
[Weitere Informationen]standard_fonts_metrics.js:336:1

Muss ich da noch was deklarieren? Dazu habe ich bei google nichts gefunden.
Bei "split_text_to_size.js" steht am schluss -> })(jsPDF.API);


Langsam habe ich das mulmige Gefühl, dass es nicht so einfach wird. Das autotable ist schon ganz gut, da muss ich die Daten aus der tabelle nur in eine JSON umwandel und kann sie anscheinend dann damit in die PDF schreiben. Leider habe ich da aber noch mehr als nur Tabellen. Leider sind nur die Tabellen, mein Problem.
 
Ich habe jetzt mal das Beispiel ausprobiert.

Code:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>html2canvas example</title>
        <script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/jspdf.js"></script>
        <script type="text/javascript" src="libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
        <script type="text/javascript" src="js/jspdf.plugin.from_html.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                var specialElementHandlers = {
                    '#editor': function(element, renderer) { return true; }
                };

                $('#cmd').click(function() {
                    var doc = new jsPDF();

                    doc.fromHTML($('#target').html(), 15, 15, {
                        'width': 170,'elementHandlers': specialElementHandlers
                    });

                    doc.save('sample-file.pdf');
                });
            });
        </script>
    </head>
    <body id="target">
        <div id="content">
            <h3>Hello, this is a H3 tag</h3>

            <a class="upload">Upload to Imgur</a>
            <h2>this is <b>bold</b> <span style="color:red">red</span></h2>

            <table border="1">
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
                <tr>
                    <td>row 1, cell 1</td>
                    <td>row 1, cell 2</td>
                </tr>
                <tr>
                    <td>row 2, cell 1</td>
                    <td>row 2, cell 2</td>
                </tr>
            </table>
        </div>

        <button id="cmd">generate PDF</button>
    </body>
</html>

Doch da meldet mir die Browserkonsole folgendes :

TypeError: jsPDFAPI is undefined
[Weitere Informationen]from_html.js:529:3
TypeError: API is undefined
[Weitere Informationen]split_text_to_size.js:41:5
TypeError: API is undefined
[Weitere Informationen]standard_fonts_metrics.js:336:1

Muss ich da noch was deklarieren?
Du musst die Finger vom Quellcode lassen, der Anlaß für einen Hilferuf in einer Community ist :D:cool:

Gemeint war die erste Antwort -> http://stackoverflow.com/a/33353799

Hab noch einen weiteren hilfreichen stackoverflow-Thread entdeckt: How to properly use jsPDF library

-> http://stackoverflow.com/a/19290964 inkl. Fiddle-Demo: http://jsfiddle.net/xzZ7n/4861/

Beachte, dass das Demo die jQuery-Bibliothek verwendet (Info wird per "JAVASCRIPT"-Button eingeblendet).
 
Hallo SpiceLab,

Danke für deine mühen.

Das erste genannte Beispiel bezieht sich leider nur auf Tabellen und das Script akzeptiert auch nur tables Tags, habe es probiert. Daher für mich nicht brauchbar, dennoch, danke für das Beispiel.

Zu meiner Fehlerfrage: Am Quellcode habe ich nichts verändert, werde es aber nochmal probieren.

Zu den anderen Beispielen: Vielen Dank dafür-> mit der jspdf.debug.js klappt es ganz gut, da er die Tabelle und den Rest darstellt. Leider ist die Tabelle nicht gerade Vorzeigbar, aber vllt kann man da noch was an der Formatierung machen. Querformat funktioniert auch nicht richtig, da er die Tabelle automatisch vergrößert. Mal schauen wo es noch Lösungen braucht ;)
 
Leider ist die Tabelle nicht gerade Vorzeigbar, aber vllt kann man da noch was an der Formatierung machen.
Redest Du von der Browseransicht des HTML-Dokuments? Dann ist CSS das Werkzeug Deiner Wahl :)
Querformat funktioniert auch nicht richtig, da er die Tabelle automatisch vergrößert.
Kann ich nicht bestätigen.

Zum Vergleich:
  1. http://jsfiddle.net/xzZ7n/4861/ - Original im Hochformat (portrait, p)
  2. https://jsfiddle.net/spicelab/dcf0q1w0/ - Erweiterte Kopie (Tabelle, Text u. Liste) im Querformat (landscape, l)
So gesehen liegt es wohl an den Rahmenbedingungen, die ich bislang nicht kenne, wie das Dokument im PDF erscheint.
 
Hallo, leider hat er meine letzte Nachricht anscheinend nicht abgesendet.

Mit Landscape erscheint nur die Tabelle, der Rest geht verloren :( ....
Werde die Daten für die PDF Datei duplizieren und für den Betrachter nicht erkennbar auslagern. Damit lass ich die Formatierung für die Webansicht unberührt. Im ausgelagerten, duplizierten Teil kann man dann direkt in den table Tags den Stil der Tabelle für die PDF verändern. Diese werden dann auch bei erstellen beachtet.

danke :D
 
Zurück