- Notifications
You must be signed in to change notification settings - Fork0
jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF
License
duyhuynhdev/tableExport.jquery.plugin
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- CSV
- DOC
- JSON
- PNG
- SQL
- TSV
- TXT
- XLS (Excel 2000 HTML format)
- XLSX (Excel 2007 Office Open XML format)
- XML (Excel 2003 XML Spreadsheet format)
- XML (Raw xml)
To save the generated export files on client side, include in your html code:
<scripttype="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:
<scripttype="text/javascript"src="libs/js-xlsx/xlsx.core.min.js"></script>
To export the table as a PDF file the following includes are required:
<scripttype="text/javascript"src="libs/jsPDF/jspdf.min.js"></script><scripttype="text/javascript"src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
To export the table in PNG format, you need to include:
<!-- For IE support include es6-promise before html2canvas --><scripttype="text/javascript"src="libs/es6-promise/es6-promise.auto.min.js"></script><scripttype="text/javascript"src="libs/html2canvas/html2canvas.min.js"></script>
Regardless of the desired format, finally include:
<scripttype="text/javascript"src="tableExport.min.js"></script>
Please keep this include order.
| Library | Version |
|---|---|
| jQuery | >= 1.9.1 |
| es6-promise | >= 4.2.4 |
| FileSaver | >= 1.2.0 |
| html2canvas | >= 0.5.0-beta4 |
| jsPDF | 1.3.2 - 1.3.4 |
| jsPDF-AutoTable | 2.0.14 or 2.0.17 |
| SheetJS | >= 0.12.5 |
// 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 only$('#tableID').tableExport({type:'pdf', jspdf: {orientation: 'p', margins: {left:20, top:10}, autotable: false} });// PDF format using jsPDF and 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 with callback examplefunction 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}}} });csvEnclosure: '"'csvSeparator: ','csvUseBOM: truedisplayTableName: falseescape: falseexportHiddenCells: falsefileName: 'tableExport'htmlContent: falseignoreColumn: []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: truemso: fileFormat: 'xlshtml' onMsoNumberFormat: null pageFormat: 'a4' pageOrientation: 'portrait' rtl: false styles: [] worksheetName: ''numbers: html: decimalMark: '.' thousandsSeparator: ',' output: decimalMark: '.', thousandsSeparator: ','onCellData: nullonCellHtmlData: nullonIgnoreRow: nulloutputMode: 'file'preserve: leadingWS: false trailingWS: falsepdfmake: enabled: false docDefinition: pageOrientation: 'portrait' defaultStyle: font: 'Roboto' fonts: {}tbodySelector: 'tr'tfootSelector: 'tr'theadSelector: 'tr'tableName: 'myTableName'type: 'csv'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
thin the DOM starting at 0. (If thethelements 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
thin 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 optionnumbers: output tofalse.
Set the optionmso.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 format which has better support of exporting table styles.
Themso.styles option lets you define the css attributes of the original html table cells, that should be taken over when exporting to an excel worksheet (Excel 2000 html format only).
To export in XSLX formatSheetJS/js-xlsx is used. Please note that the implementation of this format type lets you only export table data, but not any styling information of the html table.
For jspdf options see the documentation ofjsPDF andjsPDF-AutoTable resp.
There is an extended setting forjsPDF 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.
When exporting to pdf the optionoutputImages lets you enable or disable the output of images that are located in the original html table.
(can be applied while generating the table that you want to export)
<tddata-tableexport-cellformat="">...</td> -> An empty data value preserves format of cell content. E.g. no number seperator conversion More cell formats to be come...
<tdcolspan="2"data-tableexport-colspan="3">...</td> -> Overwrites the colspan attribute of the table cell during export. This attribute can be used if there follow hidden cells, that will be exported by using the "data-tableexport-display" attribute.
<tablestyle="display:none;"data-tableexport-display="always">...</table> -> A hidden table will be exported<tdstyle="display:none;"data-tableexport-display="always">...</td> -> A hidden cell will be exported<tddata-tableexport-display="none">...</td> -> This cell will not be exported<trdata-tableexport-display="none">...</tr> -> All cells of this row will not be exported
<tddata-tableexport-msonumberformat="\@">...</td> -> Data value will be used to style excel cells with mso-number-format (Excel 2000 html format only) Examples: "\@" excel treats cell content alway as text, even numbers "0" excel will display no decimals for numbers "0\.000" excel displays numbers with 3 decimals "0%" excel will display a number as percent with no decimals "Percent" excel will display a number as percent with 2 decimals
<tdrowspan="2"data-tableexport-rowspan="3">...</td> -> Overwrites the rowspan attribute of the table cell during export. This attribute can be used if there follow hidden rows, that will be exported by using the "data-tableexport-display" attribute.
<thdata-tableexport-value="export title">title</th> -> "export title" instead of "title" will be exported<tddata-tableexport-value="export content">content</td> -> "export content" instead of "content" will be exported
When exporting in Excel 2000 html format (xlshtml) the default extension of the result file is XLS although the type of the file content is HTML. When you open a file in Microsoft Office Excel 2007 or later that contains content that does not match the files extension, you receive the following warning message:The file you are trying to open, 'name.ext', is in a different format than specified by the file extension. Verify that the file is not corrupted and is from a trusted source before opening the file. Do you want to open the file now?According to thisKnowledge base article The warning message can help prevent unexpected problems that might occur because of possible incompatibility between the actual content of the file and the file name extension. The article also gives you some hints to disable the warning message.
About
jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- HTML92.1%
- JavaScript7.4%
- Python0.5%