THIS PROJECT IS DEPRECATED

tableExport.jquery.plugin is not maintained anymore.

tableExport.jquery.plugin

<h3>Export HTML Table to</h3> <ul> <li> CSV <li> DOC <li> JSON <li> Markdown <li> PDF <li> PNG <li> SQL <li> TSV <li> TXT <li> XLS (Excel 2000 HTML format) <li> XLSX (Excel 2007 Office Open XML format) <li> XML (Excel 2003 XML Spreadsheet format) <li> XML (Raw xml) </ul>

Installation

To save the generated export files on client side, include in your html code:

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

To export the table in XLSX (Excel 2007+ XML Format) format, you need to include additionally SheetJS/js-xlsx:

<script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>

In case you still want to support IE11, you need to include jsPDF's polyfills.umd.js. Please do this before you include jspdf.umd.min.js and html2canvas.min.js

<script type="text/javascript" src="libs/jsPDF/polyfills.umd.js"></script>

To export an html table to a PDF file, the plugin utilizes various PDF producers to generate PDF files from HTML tables. A popular JavaScript library for generating PDF files from HTML content is jsPDF:

<script type="text/javascript" src="libs/jsPDF/jspdf.umd.min.js"></script>

Many HTML stylings can be converted to PDF with jsPDF, but support for non-western character sets is almost non-existent.<br> Especially if you want to export Arabic or Chinese characters to your PDF file, you can use pdfmake as an alternative PDF producer.<br> The disadvantage compared to jsPDF is that using pdfmake has a reduced styling capability.

To use pdfmake enable the pdfmake option and <u>instead</u> of the jsPDF files include

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

<!-- To export arabic characters include mirza_fonts.js _instead_ of vfs_fonts.js
<script type="text/javascript" src="libs/pdfmake/mirza_fonts.js"></script>
-->

<!-- For a chinese font include either gbsn00lp_fonts.js or ZCOOLXiaoWei_fonts.js _instead_ of vfs_fonts.js 
<script type="text/javascript" src="libs/pdfmake/gbsn00lp_fonts.js"></script>
-->

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

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

Regardless of the desired format, finally include:

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

Please keep this include order.

Dependencies

Library | Version --------|-------- jQuery | >= 3.2.1 FileSaver | >= 2.0.4 html2canvas | >= 1.0.0 jsPDF | >=2.0.0 pdfmake | 0.1.71 SheetJS | >= 0.16.0

Examples

// CSV format

$('#tableID').tableExport({type:'csv'});

// Excel 2000 html format

$('#tableID').tableExport({type:'excel'});

// XML Spreadsheet 2003 file format with multiple worksheet support

$('table').tableExport({type:'excel',
                        mso: {fileFormat:'xmlss',
                              worksheetName: ['Table 1','Table 2', 'Table 3']}});

// PDF export using jsPDF's core html support

$('#tableID').tableExport({type:'pdf',
                           jspdf: {orientation: 'p',
                                   margins: {left:20, top:10},
                                   autotable: false}
                          });

// PDF format using jsPDF Autotable 

$('#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'}
                                  }
                          });

// PDF format using jsPDF Autotable with callback example

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}}}
                       });

// PDF export using pdfmake

$('#tableID').tableExport({type:'pdf',
                           pdfmake:{enabled:true,
                                    docDefinition:{pageOrientation:'landscape'},
                                    widths: 'auto'}
                          });

Options (Default settings)

csvEnclosure: '"'
csvSeparator: ','
csvUseBOM: true
date: html: 'dd/mm/yyyy'
exportHiddenCells: false
fileName: 'tableExport'
htmlContent: false
htmlHyperlink: 'content'
ignoreColumn: []
ignoreRow: []
jsonScope: 'all'
jspdf: orientation: 'p'
       unit:'pt'
       format: 'a4'
       margins: left: 20
                right: 10
                top: 10
                bottom: 10
       onDocCreated: null
       autotable: styles: cellPadding: 2
                          rowHeight: 12
                          fontSize: 8
                          fillColor: 255
                          textColor: 50
                          fontStyle: 'normal'
                          overflow: 'ellipsize'
                          halign: 'inherit'
                          valign: 'middle'
                  headerStyles: fillColor: [52, 73, 94]
                                textColor: 255
                                fontStyle: 'bold'
                                halign: 'inherit'
                                valign: 'middle'
                  alternateRowStyles: fillColor: 245
                  tableExport: doc: null
                               onAfterAutotable: null
                               onBeforeAutotable: null
                               onAutotableText: null
                               onTable: null
                               outputImages: true
mso: fileFormat: 'xlshtml'
     onMsoNumberFormat: null
     pageFormat: 'a4'
     pageOrientation: 'portrait'
     rtl: false
     styles: []
     worksheetName: ''
     xlsx: formatId: date: 14
                     numbers: 2
                     currency: 164
           format: currency: '$#,##0.00;[Red]-$#,##0.00'
           onHyperlink: null
numbers: html: decimalMark: '.'
               thousandsSeparator: ','
         output: decimalMark: '.'
                 thousandsSeparator: ','
onAfterSaveToFile: null
onBeforeSaveToFile: null
onCellData: null
onCellHtmlData: null
onCellHtmlHyperlink: null
onIgnoreRow: null
onTableExportBegin: null
onTableExportEnd: null
outputMode: 'file'
pdfmake: enabled: false
         docDefinition: pageSize: 'A4'
                        pageOrientation: 'portrait'
                        styles: header: background: '#34495E'
                                        color: '#FFFFFF'
                                        bold: true
                                        alignment: 'center'
                                        fillColor: '#34495E'
                        alternateRow: fillColor: '#f5f5f5'
                        defaultStyle: color: '#000000'
                                      fontSize: 8
                                      font: 'Roboto'
         fonts: {}
         widths: '*'
preserve: leadingWS: false
          trailingWS: false
preventInjection: true
sql: tableEnclosure:  '`'
     columnEnclosure: '`' 
tbodySelector: 'tr'
tfootSelector: 'tr'
theadSelector: 'tr'
tableName: 'myTableName'
type: 'csv'

Notes on options that apply to all formats

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

• 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)

To disable formatting of numbers in the exported output, which can be useful for csv and excel format, set the option numbers: output to false.

There is an option preventInjection (enabled by default) that prevents the injection of formulas when exporting in CSV or Excel format. To achieve this, a single quote is appended to cell strings starting with =,+,- or @

There are a couple of format-independent and format-specific callback functions that can be used to control the output result during export. All callback functions have a name starting with on and are initialized with null.

Notes for Excel formats

Set the option mso.fileFormat to 'xmlss' if you want to export in XML Spreadsheet 2003 file format. Use this format if multiple tables should be exported into a single file.

Excel 2000 html format is the default excel file forma