jQuery 终极HTML表导出插件 tableExport.js

  • 源码大小:8.77MB
  • 所需积分:1积分
  • 源码编号:19JP-3149
  • 浏览次数:1426次
  • 最后更新:2023年05月11日
  • 所属栏目:表格
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

您需要将HTML表导出为JSON、XML、CSV、TSV、TXT、SQL、DOC、XLS、XLSX、PNG或PDF格式吗?如果是这样,那么这个jQuery插件就是为你准备的。

tableExport.js是一个jQuery插件,只需几行代码就可以轻松导出这些格式的表。开源且免费使用。此外,它是可定制的,因此您可以根据自己的需求进行配置。所以,看看它,今天就开始导出你的表!

参见:

  • JavaScript中的10个最佳表导出插件

如何使用它:

1.在导入之前加载必要的JavaScript库表格导出.js插件。

  • jQuery
  • 文件保护程序:HTML5 saveAs()文件保护程序
  • SheetJS/js xlsx:以XSLX格式导出
  • jsPDF:客户端JavaScript PDF生成
  • pdfmake:客户端/服务器端PDF打印
  • html2canvas:使用JavaScript的屏幕截图
  1. <script src="/path/to/cdn/jquery.min.js"></script>
  2. <script src="/path/to/cdn/FileSaver.min.js"></script>
  3. <script src="/path/to/cdn/xlsx.core.min.js"></script>
  4. <!-- For IE11 support include polyfills.umd.js before you include jspdf.umd.min.js and html2canvas.min.js -->
  5. <script src="/path/to/cdn/jsPDF/polyfills.umd.js"></script>
  6. <script src="/path/to/cdn/jsPDF/jspdf.umd.min.js"></script>
  7. <script src="/path/to/cdn/html2canvas/html2canvas.min.js"></script>

2.下载并加载tableExport.js插件的缩小版。

  1. <script src="/path/to/tableExport.min.js"></script>

3.将表格中的数据导出为不同的格式。

  1. <table id="myTable">
  2. ...
  3. </table>
  1. // To CSV
  2. $('#myTable').tableExport();
  3.  
  4. // To TSV
  5. $('#myTable').tableExport({
  6. type: 'tsv'
  7. });
  8.  
  9. // To Text
  10. $('#myTable').tableExport({
  11. type: 'txt'
  12. });
  13.  
  14. // To SQL
  15. $('#myTable').tableExport({
  16. type: 'sql'
  17. });
  18.  
  19. // To JSON
  20. $('#myTable').tableExport({
  21. type: 'json'
  22. });
  23.  
  24. // To XML
  25. $('#myTable').tableExport({
  26. type: 'xml'
  27. });
  28.  
  29. // To XLS
  30. $('#myTable').tableExport({
  31. type: 'excel'
  32. });
  33.  
  34. // To XLSX
  35. $('#myTable').tableExport({
  36. type: 'excel',
  37. mso: {
  38. fileFormat:'xmlss',
  39. worksheetName: ['Table 1','Table 2', 'Table 3']
  40. }
  41. });
  42.  
  43. // To DOC
  44. $('#myTable').tableExport({
  45. type: 'doc'
  46. });
  47.  
  48. // To PNG
  49. $('#myTable').tableExport({
  50. type: 'png'
  51. });
  52.  
  53. // To PDF
  54. // using jsPDF
  55. $('#myTable').tableExport({
  56. type: 'pdf',
  57. jspdf: {
  58. // jsPDF options
  59. }
  60. });
  61.  
  62. // To PDF
  63. // using jsPDF and jsPDF Autotable
  64. $('#myTable').tableExport({
  65. type: 'pdf',
  66. jspdf: {
  67. // jsPDF options
  68. autotable: {
  69. // autotable options
  70. }
  71. }
  72. });
  73.  
  74. // To PDF
  75. // with callbacks
  76. $('#myTable').tableExport({
  77. type: 'pdf',
  78. jspdf: {
  79. format: 'bestfit',
  80. margins: {left:20, right:10, top:20, bottom:20},
  81. autotable: {
  82. styles: {
  83. overflow: 'linebreak'
  84. },
  85. tableWidth: 'wrap',
  86. tableExport: {
  87. onBeforeAutotable: DoBeforeAutotable,
  88. onCellData: DoCellData
  89. }
  90. }
  91. }
  92. });
  93.  
  94. // To PDF
  95. // using pdfmake
  96. $('#myTable').tableExport({
  97. type: 'pdf',
  98. pdfmake:{
  99. enabled:true,
  100. docDefinition:{
  101. pageOrientation:'landscape'
  102. },
  103. // more pdfmake options
  104. }
  105. });

4.所有默认插件选项。

  1. $('#myTable').tableExport({
  2. csvEnclosure: '"',
  3. csvSeparator: ',',
  4. csvUseBOM: true,
  5. date: {
  6. // Date format used in html source.
  7. // Supported placeholders: dd, mm, yy, yyyy and a arbitrary single separator character
  8. html: 'dd/mm/yyyy'
  9. },
  10. // true = speed up export of large tables with hidden cells (hidden cells will be exported !)
  11. exportHiddenCells: false,
  12. fileName: 'tableExport',
  13. htmlContent: false,
  14. // Export the 'content' or the 'href' link of <a> tags unless onCellHtmlHyperlink is not defined
  15. htmlHyperlink: 'content',
  16. ignoreColumn: [],
  17. ignoreRow: [],
  18. // One of 'head', 'data', 'all'
  19. jsonScope: 'all',
  20. // jsPDF / jsPDF-AutoTable related options
  21. jspdf: {
  22. orientation: 'p',
  23. unit: 'pt',
  24. // One of jsPDF page formats or 'bestfit' for automatic paper format selection
  25. format: 'a4',
  26. margins: {left: 20, right: 10, top: 10, bottom: 10},
  27. onDocCreated: null,
  28. autotable: {
  29. styles: {
  30. cellPadding: 2,
  31. rowHeight: 12,
  32. fontSize: 8,
  33. // Color value or 'inherit' to use css background-color from html table
  34. fillColor: 255,
  35. // Color value or 'inherit' to use css color from html table
  36. textColor: 50,
  37. // 'normal', 'bold', 'italic', 'bolditalic' or 'inherit' to use css font-weight and font-style from html table
  38. fontStyle: 'normal',
  39. // 'visible', 'hidden', 'ellipsize' or 'linebreak'
  40. overflow: 'ellipsize',
  41. // 'left', 'center', 'right' or 'inherit' to use css horizontal cell alignment from html table
  42. halign: 'inherit',
  43. // 'top', 'middle', or 'bottom'
  44. valign: 'middle'
  45. },
  46. headerStyles: {
  47. fillColor: [52, 73, 94],
  48. textColor: 255,
  49. fontStyle: 'bold',
  50. // 'left', 'center', 'right' or 'inherit' to use css horizontal header cell alignment from html table
  51. halign: 'inherit',
  52. // 'top', 'middle', or 'bottom'
  53. valign: 'middle'
  54. },
  55. alternateRowStyles: {
  56. fillColor: 245
  57. },
  58. tableExport: {
  59. // jsPDF doc object. If set, an already created doc object will be used to export to
  60. doc: null,
  61. onAfterAutotable: null,
  62. onBeforeAutotable: null,
  63. onAutotableText: null,
  64. onTable: null,
  65. outputImages: true
  66. }
  67. }
  68. },
  69. // MS Excel and MS Word related options
  70. mso: {
  71. // 'xlshtml' = Excel 2000 html format
  72. // 'xmlss' = XML Spreadsheet 2003 file format (XMLSS)
  73. // 'xlsx' = Excel 2007 Office Open XML format
  74. fileFormat: 'xlshtml',
  75. // Excel 2000 html format only. See readme.md for more information about msonumberformat
  76. onMsoNumberFormat: null,
  77. // Page format used for page orientation
  78. pageFormat: 'a4',
  79. // portrait, landscape (xlshtml format only)
  80. pageOrientation: 'portrait',
  81. // true = Set worksheet option 'DisplayRightToLeft'
  82. rtl: false,
  83. // E.g. ['border-bottom', 'border-top', 'border-left', 'border-right']
  84. styles: [],
  85. worksheetName: '',
  86. // Specific Excel 2007 XML format settings:
  87. xlsx: {
  88. // XLSX format (id) used to format excel cells. See readme.md: data-tableexport-xlsxformatid
  89. formatId: {
  90. // formatId or format string (e.g. 'm/d/yy') or function(cell, row, col) {return formatId}
  91. date: 14,
  92. // formatId or format string (e.g. '\"T\"\ #0.00') or function(cell, row, col) {return formatId}
  93. numbers: 2 ,
  94. // This id is used by "data-tableexport-xlsxformatid" to allow you to export a cell in currency format
  95. currency: 164,
  96. },
  97. // The format string to be used for the export for the currency format
  98. // Euro format: '#,##0.00 €;[Red](#,##0.00) €'
  99. format: {
  100. currency: '$#,##0.00;[Red]-$#,##0.00'
  101. },
  102. // function($cell, row, col, href, content, hyperlink): Return what to export for hyperlinks
  103. onHyperlink: null
  104. }
  105. },
  106. numbers: {
  107. html: {
  108. // Decimal mark in html source
  109. decimalMark: '.',
  110. // Thousands separator in html source
  111. thousandsSeparator: ','
  112. },
  113. // Set 'output: false' to keep number format of html source in resulting output
  114. output: {
  115. // Decimal mark in resulting output
  116. decimalMark: '.',
  117. // Thousands separator in resulting output
  118. thousandsSeparator: ','
  119. }
  120. },
  121. // 'file', 'string', 'base64' or 'window' (experimental)
  122. outputMode: 'file',
  123. pdfmake: {
  124. // true: Use pdfmake as pdf producer instead of jspdf and jspdf-autotable
  125. enabled: false,
  126. docDefinition: {
  127. // 4A0,2A0,A{0-10},B{0-10},C{0-10},RA{0-4},SRA{0-4},EXECUTIVE,FOLIO,LEGAL,LETTER,TABLOID
  128. pageSize: 'A4',
  129. // 'portrait' or 'landscape'
  130. pageOrientation: 'portrait',
  131. styles: {
  132. header: {
  133. background: '#34495E',
  134. color: '#FFFFFF',
  135. bold: true,
  136. alignment: 'center',
  137. fillColor: '#34495E'
  138. },
  139. alternateRow: {
  140. fillColor: '#f5f5f5'
  141. }
  142. },
  143. defaultStyle: {
  144. color: '#000000',
  145. fontSize: 8,
  146. // Default font is 'Roboto' which needs vfs_fonts.js to be included
  147. // To export arabic characters include mirza_fonts.js _instead_ of vfs_fonts.js
  148. // For a chinese font include either gbsn00lp_fonts.js or ZCOOLXiaoWei_fonts.js _instead_ of vfs_fonts.js
  149. font: 'Roboto'
  150. }
  151. },
  152. fonts: {}
  153. },
  154. preserve: {
  155. // preserve leading white spaces
  156. leadingWS: false,
  157. // preserve trailing white spaces
  158. trailingWS: false
  159. },
  160. // Prepend a single quote to cell strings that start with =,+,- or @ to prevent formula injection
  161. preventInjection: true,
  162. sql: {
  163. // If table name or column names contain any characters except letters, numbers, and
  164. // underscores, usually the name must be delimited by enclosing it in back quotes (`)
  165. tableEnclosure: '`',
  166. columnEnclosure: '`'
  167. },
  168. tbodySelector: 'tr',
  169. // Set empty ('') to prevent export of tfoot rows
  170. tfootSelector: 'tr',
  171. theadSelector: 'tr',
  172. tableName: 'Table',
  173. // Export format: 'csv', 'tsv', 'txt', 'sql', 'json', 'xml', 'excel', 'doc', 'png' or 'pdf'
  174. type: 'csv'
  175. });

5.回调函数。

  1. $('#myTable').tableExport({
  2.  
  3. // function(data, fileName)
  4. onAfterSaveToFile: null,
  5.  
  6. // function(data, fileName, type, charset, encoding)
  7. onBeforeSaveToFile: null,
  8.  
  9. // function($cell, row, col, href, cellText, cellType)
  10. onCellData: null,
  11.  
  12. // function($cell, row, col, htmlContent)
  13. onCellHtmlData: null,
  14.  
  15. // function($cell, row, col, href, cellText)
  16. onCellHtmlHyperlink: null,
  17.  
  18. // function($tr, row): Return true to prevent export of the row
  19. onIgnoreRow: null,
  20.  
  21. // called when export starts
  22. onTableExportBegin: null,
  23.  
  24. // called when export ends
  25. onTableExportEnd: null,
  26.  
  27. });

6.可用的HTML数据属性。

  1. <!-- An empty data value preserves format of cell content -->
  2. <table id="myTable">
  3. ...
  4. <td data-tableexport-cellformat="">
  5. ...
  6. </td>
  7. ...
  8. </table>
  9.  
  10. <!-- Overwrites the colspan attribute of the table cell during export -->
  11. <table id="myTable">
  12. ...
  13. <td colspan="2" data-tableexport-colspan="3">
  14. ...
  15. </td>
  16. ...
  17. </table>
  18.  
  19. <!-- Overwrites the rowspan attribute of the table cell during export -->
  20. <table id="myTable">
  21. ...
  22. <td rowspan="2" data-tableexport-rowspan="3">
  23. ...
  24. </td>
  25. ...
  26. </table>
  27.  
  28. <!-- Customize titles -->
  29. <table id="myTable">
  30. ...
  31. <th data-tableexport-value="TH title">
  32. ...
  33. </th>
  34. <td data-tableexport-value="CELL title">
  35. ...
  36. </td>
  37. ...
  38. </table>
  39.  
  40. <!-- Exclude & Include tables & cells -->
  41. <table id="myTable" data-tableexport-display="always">
  42. ...
  43. <td data-tableexport-display="none">
  44. ...
  45. </td>
  46. ...
  47. </table>
  48.  
  49. <!--
  50. "\@" Excel treats cell content always as text, even numbers
  51. "0" Excel will display no decimals for numbers
  52. "0\.000" Excel displays numbers with 3 decimals
  53. "0%" Excel will display a number as percent with no decimals
  54. "Percent" Excel will display a number as percent with 2 decimals
  55. "\#\,\#\#0\.000" Comma with 3 decimals
  56. "mm\/dd\/yy" Date7
  57. "mmmm\ d\,\ yyyy" Date9
  58. "m\/d\/yy\ h\:mm\ AM\/PM" D -T AMPM
  59. "Short Date" 01/03/1998
  60. "Medium Date" 01-mar-98
  61. "d\-mmm\-yyyy" 01-mar-1998
  62. "Short Time" 5:16
  63. "Medium Time" 5:16 am
  64. "Long Time" 5:16:21:00
  65. "0\.E+00" Scientific Notation
  66. "\#\ ???\/???" Fractions - up to 3 digits
  67. "\0022£\0022\#\,\#\#0\.00" £12.76
  68. "\#\,\#\#0\.00_ \;\[Red\]\-\#\,\#\#0\.00\ " 2 decimals, negative red numbers
  69. -->
  70. <table id="myTable">
  71. ...
  72. <td data-tableexport-msonumberformat="0\.000">
  73. ...
  74. </td>
  75. ...
  76. </table>
  77.  
  78. <!--
  79. "1" 0
  80. "2" 0.00
  81. "3" #,##0
  82. "4" #,##0.00
  83. "9" 0%
  84. "10" 0.00%
  85. "11" 0.00E+00
  86. "12" # ?/?
  87. "13" # ??/??
  88. "14" m/d/yy (will be localized by Excel)
  89. "15" d-mmm-yy
  90. "16" d-mmm
  91. "17" mmm-yy
  92. "18" h:mm AM/PM
  93. "19" h:mm:ss AM/PM
  94. "20" h:mm
  95. "21" h:mm:ss
  96. "22" m/d/yy h:mm
  97. "37" #,##0 ;(#,##0)
  98. "38" #,##0 ;[Red](#,##0)
  99. "39" #,##0.00;(#,##0.00)
  100. "40" #,##0.00;[Red](#,##0.00)
  101. "45" mm:ss
  102. "46" [h]:mm:ss
  103. "47" mmss.0
  104. "48" ##0.0E+0
  105. "49" @
  106. "56" 上午/下午 hh時mm分ss秒
  107. -->
  108. <table id="myTable">
  109. ...
  110. <td data-tableexport-xlsxformatid="14">
  111. ...
  112. </td>
  113. ...
  114. </table>

更新日志:

v1.27.0 (2023-03-10)

  • Bugfix。该修复程序现在还允许将用于PDF导出的外部ttf字体与jsPDF集成

v1.26.0 (2022-04-21)

  • XLSX:新选项mso.XLSX.formatid.currency,允许您指定导出货币值的格式

v1.25.0 (2022-04-11)

  • 修复了带有默认onCellHtmlData函数的XSS漏洞

v1.22.0 (2022-03-10)

  • 使用jsPdf导出tp pdf时调用onAfterSaveToFile

预览截图