tableExport.js实现前端表格的导出功能(支持中文)及打印

tableExport.jquery.plugin ========================= <h3>Export HTML Table to</h3> <ul> <li> CSV <li> DOC <li> JSON <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: ```javascript <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: ```javascript <script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script> ``` To export the table as a PDF file the following includes are required: ```javascript <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: ```javascript <script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script> ``` Regardless of the desired format, finally include: ```javascript <script type="text/javascript" src="tableExport.min.js"></script> ``` Please keep this include order. Examples ======== ```javascript // CSV format $('#tableID').tableExport({type:'csv'}); ``` ```javascript // Excel 2000 html format $('#tableID').tableExport({type:'excel'}); ``` ```javascript // XML Spreadsheet 2003 file format with multiple worksheet support $('table').tableExport({type:'excel', excelFileFormat:'xmlss', worksheetName: ['Table 1','Table 2', 'Table 3']}); ``` ```javascript // PDF export using jsPDF only $('#tableID').tableExport({type:'pdf', jspdf: {orientation: 'p', margins: {left:20, top:10}, autotable: false} }); ``` ```javascript // 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'} } }); ``` ```javascript // PDF format 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}}} }); ``` Options (Default settings) ======= ```javascript consoleLog: false csvEnclosure: '"' csvSeparator: ',' csvUseBOM: true displayTableName: false escape: false excelstyles: [] excelFileFormat: 'xlshtml' fileName: 'tableExport' htmlContent: false 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: 'left' valign: 'middle' headerStyles: fillColor: [52, 73, 94] textColor: 255 fontStyle: 'bold' halign: 'center' alternateRowStyles: fillColor: 245 tableExport: doc: null onAfterAutotable: null onBeforeAutotable: null onAutotableText: null onTable: null outputImages: true 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: 'WorksheetName' ``` ```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) 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 ```. Set the option ``` excelFileFormat ``` 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. The ``` excelstyles ``` 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 format [protobi/js-xlsx](https://github.com/protobi/js-xlsx) forked from [SheetJS/js-xlsx](https://github.com/SheetJS/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 of [jsPDF](https://github.com/MrRio/jsPDF) and [jsPDF-AutoTable](https://github.com/simonbengtsson/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. When exporting to pdf the option ``` outputImages ``` lets you enable or disable the output of images that are located in the original html table. Optional html data attributes ============================= (can be applied while generating the table that you want to export) <h3>data-tableexport-display</h3> ```html <table style="display:none;" data-tableexport-display="always">...</table> -> a hidden table will be exported <td style="display:none;" data-tableexport-display="always">...</td> -> a hidden cell will be exporte