tabla - jspdf table style

Exportar tabla HTML a pdf usando jspdf

Question

Necesito exportar la tabla HTML a un archivo pdf usando jspdf. Probé el siguiente código, pero muestra el resultado en blanco / vacío en el archivo pdf. Cualquier sugerencia o código de ejemplo para esto sería útil. `

<script type="text/javascript">
    function demo1() {
        $(function () {
            var specialElementHandlers = {
                ''#editor'': function (element,renderer) {
                    return true;
                }
            };
         $(''#cmd'').click(function () {
                var doc = new jsPDF();
                doc.fromHTML($(''#htmlTableId'').html(), 15, 15, {
                    ''width'': 170,''elementHandlers'': specialElementHandlers
                });
                doc.save(''sample-file.pdf'');
            });  
        }); 
    }
</script>
`

Answer 1

Aquí está el ejemplo de trabajo:

en cabeza

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

guión:

<script type="text/javascript">
        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 = $(''#customers'')[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>

y mesa:

<div id="customers">
        <table id="tab_customers" class="table table-striped" >
            <colgroup>
                <col width="20%">
                <col width="20%">
                <col width="20%">
                <col width="20%">
            </colgroup>
            <thead>         
                <tr class=''warning''>
                    <th>Country</th>
                    <th>Population</th>
                    <th>Date</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Chinna</td>
                    <td>1,363,480,000</td>
                    <td>March 24, 2014</td>
                    <td>19.1</td>
                </tr>
                <tr>
                    <td>India</td>
                    <td>1,241,900,000</td>
                    <td>March 24, 2014</td>
                    <td>17.4</td>
                </tr>
                <tr>
                    <td>United States</td>
                    <td>317,746,000</td>
                    <td>March 24, 2014</td>
                    <td>4.44</td>
                </tr>
                <tr>
                    <td>Indonesia</td>
                    <td>249,866,000</td>
                    <td>July 1, 2013</td>
                    <td>3.49</td>
                </tr>
                <tr>
                    <td>Brazil</td>
                    <td>201,032,714</td>
                    <td>July 1, 2013</td>
                    <td>2.81</td>
                </tr>
            </tbody>
        </table> 
    </div>

y botón para ejecutar:

<button onclick="javascript:demoFromHTML()">PDF</button>

y ejemplo de trabajo en línea:

tabel a pdf jspdf

o prueba esto: Exportación de tablas HTML

Answer 2

Podemos separar la sección de la que necesitamos convertir en PDF.

Por ejemplo, si la tabla está en la clase " pdf-table-wrap "

Después de esto, necesitamos llamar a la función html2canvas combinada con jsPDF

siguiente es código de ejemplo

    var pdf = new jsPDF(''p'', ''pt'', [580, 630]);
    html2canvas($(".pdf-table-wrap")[0], {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
            var ctx = canvas.getContext(''2d'');
            var imgData = canvas.toDataURL("image/png", 1.0);
            var width = canvas.width;
            var height = canvas.clientHeight;
            pdf.addImage(imgData, ''PNG'', 20, 20, (width - 10), (height));

        }
    });
    setTimeout(function() {
        //jsPDF code to save file
        pdf.save(''sample.pdf'');
    }, 0);

El tutorial completo se proporciona aquí http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/

Answer 3

También puede utilizar el jsPDF-AutoTable . Puede ver una demostración here que utiliza el siguiente código.

var doc = new jsPDF(''p'', ''pt'');
var elem = document.getElementById("basic-table");
var res = doc.autoTableHtmlToJson(elem);
doc.autoTable(res.columns, res.data);
doc.save("table.pdf");

Answer 4

Use get(0) lugar de html() . En otras palabras, reemplazar

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

con

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