Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

README.md 17 KiB

4 år sedan
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. tableExport.jquery.plugin
  2. =========================
  3. <h3>Export HTML Table to</h3>
  4. <ul>
  5. <li> CSV
  6. <li> DOC
  7. <li> JSON
  8. <li> PDF
  9. <li> PNG
  10. <li> SQL
  11. <li> TSV
  12. <li> TXT
  13. <li> XLS (Excel 2000 HTML format)
  14. <li> XLSX (Excel 2007 Office Open XML format)
  15. <li> XML (Excel 2003 XML Spreadsheet format)
  16. <li> XML (Raw xml)
  17. </ul>
  18. Installation
  19. ============
  20. To save the generated export files on client side, include in your html code:
  21. ```html
  22. <script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
  23. ```
  24. To export the table in XLSX (Excel 2007+ XML Format) format, you need to include additionally:
  25. ```html
  26. <script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>
  27. ```
  28. To export the table as a PDF file the following includes are required:
  29. ```html
  30. <script type="text/javascript" src="libs/jsPDF/jspdf.min.js"></script>
  31. <script type="text/javascript" src="libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
  32. ```
  33. To export the table in PNG format, you need to include:
  34. ```html
  35. <!-- For IE support include es6-promise before html2canvas -->
  36. <script type="text/javascript" src="libs/es6-promise/es6-promise.auto.min.js"></script>
  37. <script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>
  38. ```
  39. Regardless of the desired format, finally include:
  40. ```html
  41. <script type="text/javascript" src="tableExport.min.js"></script>
  42. ```
  43. Please keep this include order.
  44. Dependencies
  45. ============
  46. Library | Version
  47. --------|--------
  48. [jQuery](https://github.com/jquery/jquery) | \>= 1.9.1
  49. [es6-promise](https://github.com/stefanpenner/es6-promise) | \>= 4.2.4
  50. [FileSaver](https://github.com/hhurz/tableExport.jquery.plugin/blob/master/libs/FileSaver/FileSaver.min.js) | \>= 1.2.0
  51. [html2canvas](https://github.com/niklasvh/html2canvas) | \>= 0.5.0-beta4
  52. [jsPDF](https://github.com/MrRio/jsPDF) | 1.3.2 - 1.3.4
  53. [jsPDF-AutoTable](https://github.com/simonbengtsson/jsPDF-AutoTable) | 2.0.14 or 2.0.17
  54. [SheetJS](https://github.com/SheetJS/js-xlsx) | \>= 0.12.5
  55. Examples
  56. ========
  57. ```
  58. // CSV format
  59. $('#tableID').tableExport({type:'csv'});
  60. ```
  61. ```
  62. // Excel 2000 html format
  63. $('#tableID').tableExport({type:'excel'});
  64. ```
  65. ```
  66. // XML Spreadsheet 2003 file format with multiple worksheet support
  67. $('table').tableExport({type:'excel',
  68. mso: {fileFormat:'xmlss',
  69. worksheetName: ['Table 1','Table 2', 'Table 3']}});
  70. ```
  71. ```
  72. // PDF export using jsPDF only
  73. $('#tableID').tableExport({type:'pdf',
  74. jspdf: {orientation: 'p',
  75. margins: {left:20, top:10},
  76. autotable: false}
  77. });
  78. ```
  79. ```
  80. // PDF format using jsPDF and jsPDF Autotable
  81. $('#tableID').tableExport({type:'pdf',
  82. jspdf: {orientation: 'l',
  83. format: 'a3',
  84. margins: {left:10, right:10, top:20, bottom:20},
  85. autotable: {styles: {fillColor: 'inherit',
  86. textColor: 'inherit'},
  87. tableWidth: 'auto'}
  88. }
  89. });
  90. ```
  91. ```
  92. // PDF format with callback example
  93. function DoCellData(cell, row, col, data) {}
  94. function DoBeforeAutotable(table, headers, rows, AutotableSettings) {}
  95. $('table').tableExport({fileName: sFileName,
  96. type: 'pdf',
  97. jspdf: {format: 'bestfit',
  98. margins: {left:20, right:10, top:20, bottom:20},
  99. autotable: {styles: {overflow: 'linebreak'},
  100. tableWidth: 'wrap',
  101. tableExport: {onBeforeAutotable: DoBeforeAutotable,
  102. onCellData: DoCellData}}}
  103. });
  104. ```
  105. Options (Default settings)
  106. =======
  107. ```
  108. csvEnclosure: '"'
  109. csvSeparator: ','
  110. csvUseBOM: true
  111. date: html: 'dd/mm/yyyy'
  112. displayTableName: false (Deprecated)
  113. escape: false (Deprecated)
  114. exportHiddenCells: false
  115. fileName: 'tableExport'
  116. htmlContent: false
  117. htmlHyperlink: 'content'
  118. ignoreColumn: []
  119. ignoreRow: []
  120. jsonScope: 'all'
  121. jspdf: orientation: 'p'
  122. unit:'pt'
  123. format: 'a4'
  124. margins: left: 20
  125. right: 10
  126. top: 10
  127. bottom: 10
  128. onDocCreated: null
  129. autotable: styles: cellPadding: 2
  130. rowHeight: 12
  131. fontSize: 8
  132. fillColor: 255
  133. textColor: 50
  134. fontStyle: 'normal'
  135. overflow: 'ellipsize'
  136. halign: 'inherit'
  137. valign: 'middle'
  138. headerStyles: fillColor: [52, 73, 94]
  139. textColor: 255
  140. fontStyle: 'bold'
  141. halign: 'inherit'
  142. valign: 'middle'
  143. alternateRowStyles: fillColor: 245
  144. tableExport: doc: null
  145. onAfterAutotable: null
  146. onBeforeAutotable: null
  147. onAutotableText: null
  148. onTable: null
  149. outputImages: true
  150. mso: fileFormat: 'xlshtml'
  151. onMsoNumberFormat: null
  152. pageFormat: 'a4'
  153. pageOrientation: 'portrait'
  154. rtl: false
  155. styles: []
  156. worksheetName: ''
  157. xslx: formatId: date: 14
  158. numbers: 2
  159. numbers: html: decimalMark: '.'
  160. thousandsSeparator: ','
  161. output: decimalMark: '.',
  162. thousandsSeparator: ','
  163. onAfterSaveToFile: null
  164. onBeforeSaveToFile: null
  165. onCellData: null
  166. onCellHtmlData: null
  167. onCellHtmlHyperlink: null
  168. onIgnoreRow: null
  169. outputMode: 'file'
  170. pdfmake: enabled: false
  171. docDefinition: pageOrientation: 'portrait'
  172. defaultStyle: font: 'Roboto'
  173. fonts: {}
  174. preserve: leadingWS: false
  175. trailingWS: false
  176. preventInjection: true
  177. sql: tableEnclosure: '`'
  178. columnEnclosure: '`'
  179. tbodySelector: 'tr'
  180. tfootSelector: 'tr'
  181. theadSelector: 'tr'
  182. tableName: 'myTableName'
  183. type: 'csv'
  184. ```
  185. ```ignoreColumn``` can be either an array of indexes (i.e. [0, 2]) or field names (i.e. ["id", "name"]).
  186. * 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!)
  187. * Field names should correspond to the values set on the "data-field" attribute of the header elements `th` in the DOM.
  188. * "Nameless" columns without data-field attribute will be named by their index number (converted to a string)
  189. 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 ```.
  190. 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.
  191. Excel 2000 html format is the default excel file format which has better support of exporting table styles.
  192. The ``` mso.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).
  193. To export in XSLX format [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.
  194. Note: There is an option ``` preventInjection ``` (default is enabled) that prevents formula injection when exporting in CSV or Excel format. To achieve that a single quote will be prepended to cell strings that start with =,+,- or @
  195. For jspdf options see the documentation of [jsPDF](https://github.com/MrRio/jsPDF) and [jsPDF-AutoTable](https://github.com/simonbengtsson/jsPDF-AutoTable) resp.
  196. 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.
  197. 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.
  198. When exporting to pdf the option ``` outputImages ``` lets you enable or disable the output of images that are located in the original html table.
  199. Optional html data attributes
  200. =============================
  201. (can be applied while generating the table that you want to export)
  202. <h4>data-tableexport-cellformat</h4>
  203. ```html
  204. <td data-tableexport-cellformat="">...</td> -> An empty data value preserves format of cell content. E.g. no number seperator conversion
  205. More cell formats to be come...
  206. ```
  207. <h4>data-tableexport-colspan</h4>
  208. ```html
  209. <td colspan="2" data-tableexport-colspan="3">...</td> -> Overwrites the colspan attribute of the table cell during export.
  210. This attribute can be used if there follow hidden cells, that will be exported by using the "data-tableexport-display" attribute.
  211. ```
  212. <h4>data-tableexport-display</h4>
  213. ```html
  214. <table style="display:none;" data-tableexport-display="always">...</table> -> A hidden table will be exported
  215. <td style="display:none;" data-tableexport-display="always">...</td> -> A hidden cell will be exported
  216. <td data-tableexport-display="none">...</td> -> This cell will not be exported
  217. <tr data-tableexport-display="none">...</tr> -> All cells of this row will not be exported
  218. ```
  219. <h4>data-tableexport-msonumberformat</h4>
  220. ```html
  221. <td data-tableexport-msonumberformat="\@">...</td> -> Data value will be used to style excel cells with mso-number-format (Excel 2000 html format only)
  222. Format Description
  223. ===================================================================================
  224. "\@" Excel treats cell content always as text, even numbers
  225. "0" Excel will display no decimals for numbers
  226. "0\.000" Excel displays numbers with 3 decimals
  227. "0%" Excel will display a number as percent with no decimals
  228. "Percent" Excel will display a number as percent with 2 decimals
  229. "\#\,\#\#0\.000" Comma with 3 decimals
  230. "mm\/dd\/yy" Date7
  231. "mmmm\ d\,\ yyyy" Date9
  232. "m\/d\/yy\ h\:mm\ AM\/PM" D -T AMPM
  233. "Short Date" 01/03/1998
  234. "Medium Date" 01-mar-98
  235. "d\-mmm\-yyyy" 01-mar-1998
  236. "Short Time" 5:16
  237. "Medium Time" 5:16 am
  238. "Long Time" 5:16:21:00
  239. "0\.E+00" Scientific Notation
  240. "\#\ ???\/???" Fractions - up to 3 digits
  241. "\0022£\0022\#\,\#\#0\.00" £12.76
  242. "\#\,\#\#0\.00_ \;\[Red\]\-\#\,\#\#0\.00\ " 2 decimals, negative red numbers
  243. ```
  244. <h4>data-tableexport-rowspan</h4>
  245. ```html
  246. <td rowspan="2" data-tableexport-rowspan="3">...</td> -> Overwrites the rowspan attribute of the table cell during export.
  247. This attribute can be used if there follow hidden rows, that will be exported by using the "data-tableexport-display" attribute.
  248. ```
  249. <h4>data-tableexport-value</h4>
  250. ```html
  251. <th data-tableexport-value="export title">title</th> -> "export title" instead of "title" will be exported
  252. <td data-tableexport-value="export content">content</td> -> "export content" instead of "content" will be exported
  253. ```
  254. <h4>data-tableexport-xlsxformatid</h4>
  255. ```html
  256. <td data-tableexport-xlsxformatid="14">...</td> -> The data value represents a format id that will be used to format the content of a cell in Excel. This data attribute overwrites the default setting of defaults.mso.xslx.formatId.
  257. This attribute is for Excel 2007 Office Open XML format only.
  258. Format id Description
  259. ===============================================
  260. "1" 0
  261. "2" 0.00
  262. "3" #,##0
  263. "4" #,##0.00
  264. "9" 0%
  265. "10" 0.00%
  266. "11" 0.00E+00
  267. "12" # ?/?
  268. "13" # ??/??
  269. "14" m/d/yy (will be localized by Excel)
  270. "15" d-mmm-yy
  271. "16" d-mmm
  272. "17" mmm-yy
  273. "18" h:mm AM/PM
  274. "19" h:mm:ss AM/PM
  275. "20" h:mm
  276. "21" h:mm:ss
  277. "22" m/d/yy h:mm
  278. "37" #,##0 ;(#,##0)
  279. "38" #,##0 ;[Red](#,##0)
  280. "39" #,##0.00;(#,##0.00)
  281. "40" #,##0.00;[Red](#,##0.00)
  282. "45" mm:ss
  283. "46" [h]:mm:ss
  284. "47" mmss.0
  285. "48" ##0.0E+0
  286. "49" @
  287. "56" 上午/下午 hh時mm分ss秒
  288. ```
  289. Excel Notes
  290. ===========
  291. 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:
  292. ```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?```
  293. According to this [Knowledge base article](https://support.microsoft.com/en-us/help/948615/error-opening-file-the-file-format-differs-from-the-format-that-the-fi) 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.