/tableExport.jquery.plugin

jQuery plugin to export a html table to JSON, XML, CSV, TXT, SQL, Word, Excel, PNG, PDF

Primary LanguageHTML

tableExport.jquery.plugin

Export HTML Table to

  • CSV
  • TXT
  • JSON
  • XML
  • SQL
  • XLS
  • DOC
  • PNG
  • PDF

Installation

To export a html table in CSV, TXT, JSON, XML, SQL, XLS or DOC formats include:

<script type="text/javascript" src="tableExport.min.js"></script>
<script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>

To export the table in PNG format additionally include :

<script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>

To export the table as a PDF file the following includes are required :

<script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>
<script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
<script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>

Examples

$('#tableID').tableExport({type:'csv'});
$('#tableID').tableExport({type:'pdf',
                           jspdf: {orientation: 'p',
                                   margins: {left:20, top:10},
                                   autotable: false}
                          });
$('#tableID').tableExport({type:'pdf',
                           jspdf: {orientation: 'l',
                                   format: 'a3',
                                   margins: {left:10, right:10, top:20, bottom:20},
                                   autotable: {styles: {fillColor: 'inherit', 
                                                        textColor: 'inherit'},
                                               tableWidth: 'auto'}
                          });
function DoCellData(cell, row, col, data) {}
function DoBeforeAutotable(table, headers, rows, AutotableSettings) {}

$('table').tableExport({fileName: sFileName,
                        type: 'pdf',
                        jspdf: {format: 'bestfit',
                                margins: {left:20, right:10, top:20, bottom:20},
                                autotable: {styles: {overflow: 'linebreak'},
                                            tableWidth: 'wrap',
                                            tableExport: {onBeforeAutotable: DoBeforeAutotable,
                                                          onCellData: DoCellData}}}
                       });

Options

consoleLog: false
csvEnclosure: '"'
csvSeparator: ','
csvUseBOM: true
displayTableName: false
escape: false
excelstyles: [ 'css','properties','to','export','to','excel' ]
fileName: 'tableExport'
htmlContent: false
ignoreColumn: []
ignoreRow: []
jspdf: orientation: 'p'
       unit:'pt'
       format: 'a4'
       margins: left: 20
                right: 10
                top: 10
                bottom: 10
       autotable: styles: cellPadding: 2
                          rowHeight: 12
                          fontSize: 8
                          fillColor: 255
                          textColor: 50
                          fontStyle: 'normal'
                          overflow: 'ellipsize'
                  headerStyles: fillColor: [52, 73, 94]
                                textColor: 255
                                fontStyle: 'bold'
                  alternateRowStyles: fillColor: 245
                  tableExport: onAfterAutotable: null
                               onBeforeAutotable: null
                               onTable: null
numbers: html: decimalMark: '.'
               thousandsSeparator: ','
         output: decimalMark: '.',
                 thousandsSeparator: ','
onCellData: null
outputMode: 'file'
tbodySelector: 'tr'
theadSelector: 'tr'
tableName: 'myTableName'
type: 'csv'
worksheetName: 'xlsWorksheetName'

For jspdf options see the documentation of jsPDF and jsPDF-AutoTable resp.

There is an extended setting for jsPDF option 'format'. Setting the option value to 'bestfit' lets the tableExport plugin try to choose the minimum required paper format and orientation in which the table (or tables in multitable mode) completely fits without column adjustment.

Also there is an extended setting for the jsPDF-AutoTable options 'fillColor' and 'textColor'. When setting these option values to 'inherit' the original css background and text color will be used as fill and text color while exporting to pdf.

Optional html data attributes

(can be set while generating the table you want to export)

<table style="display:none;" data-tableexport-display="always">...</table> -> hidden table will be exported

<td style="display:none;" data-tableexport-display="always">...</td> -> hidden cell will be exported

<td data-tableexport-display="none">...</td> -> cell will not be exported