tableExport.jquery.plugin

Export HTML Table to

CSV
TXT
JSON
XML
SQL
XLS
DOC
PNG
PDF

Installation

To save the generated export files on client side, include:

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

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

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

To export the table in PNG format, you need to include:

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

To generate the export file in the desired format, finally include:

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

Please keep this include order.

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: []
jsonScope: 'all'
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'
                          halign: 'left'
                          valign: 'middle'
                  headerStyles: fillColor: [52, 73, 94]
                                textColor: 255
                                fontStyle: 'bold'
                                halign: 'center'
                  alternateRowStyles: fillColor: 245
                  tableExport: onAfterAutotable: null
                               onBeforeAutotable: null
                               onTable: null
numbers: html: decimalMark: '.'
               thousandsSeparator: ','
         output: decimalMark: '.',
                 thousandsSeparator: ','
onCellData: null
onCellHtmlData: null
onMsoNumberFormat: null
outputMode: 'file'
tbodySelector: 'tr'
tfootSelector: 'tr'
theadSelector: 'tr'
tableName: 'myTableName'
type: 'csv'
worksheetName: 'xlsWorksheetName'

ignoreColumn can be either an array of indexes (i.e. [0, 2]) or field names (i.e. ["id", "name"]).

Indexes correspond to the position of the header elements th in the DOM starting at 0. (If the th elements are removed or added to the DOM, the indexes will be shifted so use the functionality wisely!)
Field names should correspond to the values set on the "data-field" attribute of the header elements th in the DOM.
"Nameless" columns without data-field attribute will be named by their index number (converted to a string)

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', 'textColor' and 'fontStyle'. When setting these option values to 'inherit' the original css values for background and text color will be used as fill and text color while exporting to pdf. A css font-weight >= 700 results in a bold fontStyle and the italic css font-style will be used as italic fontStyle.

Optional html data attributes

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

data-tableexport-display

```html ...

-> hidden table will be exported ... -> hidden cell will be exported ... -> cell will not be exported ... -> all cells of this row will not be exported ```

data-tableexport-msonumberformat

```html ... -> data value will be used as mso-number-format style attribute when exporting to excel ```

data-tableexport-value

```html title -> "export title" instead of "title" will be exported content -> "export content" instead of "content" will be exported ```

xiahl1990 / tableexport.jquery.plugin Goto Github PK