web-dev-qa-db-fra.com

Comment exporter les données des tableaux HTML dans PDF en utilisant Jspdf

Comment exporter les tableaux de la page HTML au format PDF J'ai fourni quelques exemples de données, mais je ne parviens pas à charger la liste des tableaux HTML au format PDF. Quelqu'un peut-il m'aider à charger les tableaux au format PDF?.

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

http://jsfiddle.net/y2b7Q/327/

jqueryhtmljspdf
21
Navyah

Une bonne option est AutoTable (un plugin Table pour jsPDF) , il comprend des thèmes, rowspan, colspan, extraire des données de html, fonctionne avec json, vous pouvez également personnaliser vos en-têtes et les rendre horizontaux. Ici est une démo.

 enter image description here

14
Oscar Acevedo

Il existe un tablePlugin pour jspdf il attend un tableau d'objets et affiche ces données sous forme de tableau. Vous pouvez styler le texte et les en-têtes en modifiant légèrement le code. Il est open source et a également des exemples pour vous aider à démarrer.

7
Nelli.Prashanth kumar

Voici un exemple qui, je pense, vous aidera

<!DOCTYPE html>
<html>
<head>
<script src="js/min.js"></script>
<script src="js/pdf.js"></script>
<script>
    $(function(){
         var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

   $('#cmd').click(function () {

        var table = tableToJson($('#StudentInfoListTable').get(0))
        var doc = new jsPDF('p','pt', 'a4', true);
        doc.cellInitialize();
        $.each(table, function (i, row){
            console.debug(row);
            $.each(row, function (j, cell){
                doc.cell(10, 50,120, 50, cell, i);  // 2nd parameter=top margin,1st=left margin 3rd=row cell width 4th=Row height
            })
        })


        doc.save('sample-file.pdf');
    });
    function tableToJson(table) {
    var data = [];

    // first row needs to be headers
    var headers = [];
    for (var i=0; i<table.rows[0].cells.length; i++) {
        headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi,'');
    }


    // go through cells
    for (var i=0; i<table.rows.length; i++) {

        var tableRow = table.rows[i];
        var rowData = {};

        for (var j=0; j<tableRow.cells.length; j++) {

            rowData[ headers[j] ] = tableRow.cells[j].innerHTML;

        }

        data.Push(rowData);
    }       

    return data;
}
});
</script>
</head>
<body>
<div id="table">
<table id="StudentInfoListTable">
                <thead>
                    <tr>    
                        <th>Name</th>
                        <th>Email</th>
                        <th>Track</th>
                        <th>S.S.C Roll</th>
                        <th>S.S.C Division</th>
                        <th>H.S.C Roll</th>
                        <th>H.S.C Division</th>
                        <th>District</th>

                    </tr>
                </thead>
                <tbody>

                        <tr>
                            <td>alimon  </td>
                            <td>Email</td>
                            <td>1</td>
                            <td>2222</td>
                            <td>as</td>
                            <td>3333</td>
                            <td>dd</td>
                            <td>33</td>
                        </tr>               
                </tbody>
            </table>
<button id="cmd">Submit</button>
</body>
</html>

Ici la sortie 

enter image description here

6
Alimon Karim

Malheureusement, il n'est pas possible de le faire.

jsPDF ne prend pas en charge l'exportation d'images et de tableaux dans la méthode fromHTML . dans jsPDF v0.9.0 rc2

4
pavell

Il suffit de suivre ces étapes, je peux être sûr que le fichier pdf sera généré 

    <html>
    <head>

    <title>Exporting table data to pdf Example</title>


    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="js/jspdf.js"></script>
    <script type="text/javascript" src="js/from_html.js"></script>
    <script type="text/javascript" src="js/split_text_to_size.js"></script>
    <script type="text/javascript" src="js/standard_fonts_metrics.js"></script>
    <script type="text/javascript" src="js/cell.js"></script>
    <script type="text/javascript" src="js/FileSaver.js"></script>


    <script type="text/javascript">
        $(document).ready(function() {

            $("#exportpdf").click(function() {
                var pdf = new jsPDF('p', 'pt', 'ledger');
                // source can be HTML-formatted string, or a reference
                // to an actual DOM element from which the text will be scraped.
                source = $('#yourTableIdName')[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 : 60,
                    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('fileNameOfGeneretedPdf.pdf');
                }, margins);
            });

        });
    </script>
    </head>
    <body>
    <div id="yourTableIdName">
        <table style="width: 1020px;font-size: 12px;" border="1">
            <thead>
                <tr align="left">
                    <th>Country</th>
                    <th>State</th>
                    <th>City</th>
                </tr>
            </thead>


            <tbody>

                <tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr>
<tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr><tr align="left">
                    <td>India</td>
                    <td>Telangana</td>
                    <td>Nirmal</td>
                </tr>
            </tbody>
        </table></div>

        <input type="button" id="exportpdf" value="Download PDF">


    </body>

    </html>

Sortie:

Sortie du fichier HTML: html output

Sortie de fichier PDF: pdf output

3
Arunkumar Papena

" Comment utiliser correctement la bibliothèque jsPDF " peut vous donner un peu plus de ce dont vous avez besoin. La table ne rendra pas le rendu correctement ( pas de css, selon cette réponse ), mais vous pourriez analyser le tableau html avec jquery et le styler manuellement vous-même.

Une autre option serait d’utiliser des captures d’écran du code HTML avec HTML2Canvas ou Casper.js .

MODIFIER

Voici un exemple de base utilisant le plugin de cellule jspdf. Il utilise jquery et la fonction tableToJson() de HTML Table to JSON . 

Assurez-vous d'inclure les fichiers Deflate lib (deux fichiers js) et jspdf.plugin.cell.js.

var table = tableToJson($('#table-id').get(0))
var doc = new jsPDF('p', 'pt', 'a4', true);
doc.cellInitialize();
$.each(table, function (i, row){
  $.each(row, function (j, cell){
    doc.cell(10, 200, 100, 20, cell, i);
  })
})
doc.save()
2
lando

Essayer de mettre 

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

au lieu de

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

J'ai utilisé le plugin Datatable JS pour exporter des données de table html dans différents formats. Avec mon expérience, il était très rapide, facile à utiliser et à configurer avec un codage minimal.

Vous trouverez ci-dessous un exemple d'appel jquery utilisant un plugin datatable, #example est votre identifiant de table

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );

Veuillez trouver l'exemple complet dans le lien de référence datatable ci-dessous:

https://datatables.net/extensions/buttons/examples/html5/simple.html

Voici à quoi cela ressemble après la configuration (à partir du site de référence):  enter image description here

Vous devez avoir les références de bibliothèque suivantes dans votre code HTML (certaines peuvent être trouvées dans le lien de référence ci-dessus)

jquery-1.12.3.js
jquery.dataTables.min.js
dataTables.buttons.min.js
jszip.min.js
pdfmake.min.js
vfs_fonts.js
buttons.html5.min.js
0
Aditya