搜索hhurz / tableexport.jquery.plugin
将HTML表格导出为CSV、DOC、JSON、PDF、PNG、SQL、TSV、TXT、XLS、XLSX、XML
Requires
- components/jquery: ^3.2.1
This package is auto-updated.
Last update: 2024-09-07 19:40:18 UTC
README
将HTML表格导出到
- CSV
- DOC
- JSON
- PNG
- SQL
- TSV
- TXT
- XLS（Excel 2000 HTML格式）
- XLSX（Excel 2007 Office Open XML格式）
- XML（Excel 2003 XML电子表格格式）
- XML（原始xml）
安装
要保存生成的导出文件在客户端，请将以下代码包含在您的html代码中
<script type="text/javascript" src="libs/FileSaver/FileSaver.min.js"></script>
要导出为XLSX（Excel 2007+ XML格式）格式，您还需要包含SheetJS/js-xlsx
<script type="text/javascript" src="libs/js-xlsx/xlsx.core.min.js"></script>
如果您仍然想支持IE11，则需要包含jsPDF的polyfills.umd.js。请在此之后包含jspdf.umd.min.js和html2canvas.min.js
<script type="text/javascript" src="libs/jsPDF/polyfills.umd.js"></script>
要导出HTML表格到PDF文件，该插件利用各种PDF生成器从HTML表格生成PDF文件。一个用于从HTML内容生成PDF文件的流行JavaScript库是jsPDF
<script type="text/javascript" src="libs/jsPDF/jspdf.umd.min.js"></script>
许多HTML样式可以通过jsPDF转换为PDF，但非西方字符集的支持几乎不存在。
尤其是如果您想将阿拉伯语或中文字符导出到PDF文件中，可以使用pdfmake作为替代PDF生成器。
与jsPDF相比的缺点是，使用pdfmake具有较低的样式能力。
要使用pdfmake启用pdfmake选项，并包含以下文件而不是jsPDF文件
<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> -->
要导出表格为PNG格式，您需要包含
<script type="text/javascript" src="libs/html2canvas/html2canvas.min.js"></script>
无论所需格式如何，最后包含
<script type="text/javascript" src="tableExport.min.js"></script>
请保持此包含顺序。
依赖关系
示例
// 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'} });
选项（默认设置）
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'
有关适用于所有格式的选项的说明
选项ignoreColumn可以是索引数组（例如[0, 2]）或字段名称（例如["id", "name"])，其中
- 索引对应于DOM中
th元素的位置（从0开始）。（如果移除或添加到DOM中的th元素，则索引将移动，因此请明智地使用此功能！） - 字段名称应与DOM中
th元素的"data-field"属性上设置的值相对应。 - 没有"data-field"属性的"无名称"列将使用其索引号（转换为字符串）命名
要禁用导出输出中数字的格式化，这对于csv和excel格式可能很有用，请将选项numbers: output设置为false。
有一个选项preventInjection（默认启用），它阻止在CSV或Excel格式导出时注入公式。为了实现这一点，在以=,+,-或@开头的单元格字符串后附加一个单引号
有一些格式无关和格式特定的回调函数可以在导出过程中控制输出结果。所有回调函数的名称都以on开头，并使用null初始化。
有关Excel格式的说明
如果您想以XML电子表格2003文件格式导出，请将选项mso.fileFormat设置为'xmlss'。如果多个表格应导出到单个文件中，请使用此格式。
Excel 2000 html格式是默认的excel文件格式，它对导出表格样式的支持更好。
mso.styles 选项允许您定义原始 HTML 表格单元的 CSS 属性，在导出到 Excel 工作表时（仅限 Excel 2000 HTML 格式）将继承这些属性。
要导出 XSLX 格式，使用 SheetJS/js-xlsx。请注意，与其它格式相比，使用此格式导出的 HTML 表格样式信息量有限。
当以 Excel 2000 HTML 格式（xlshtml）导出时，输出文件的默认扩展名是 XLS，尽管文件内容类型是 HTML。当您在 Microsoft Office Excel 2007 或更高版本中打开包含不匹配扩展名的文件内容时，您将收到以下警告消息：您正在尝试打开的文件 'name.ext' 的格式与文件扩展名指定的格式不同。在打开文件之前，请验证文件没有损坏且来自可信来源。您现在要打开文件吗？ 根据一篇 知识库文章，警告消息可以帮助防止由于文件实际内容与文件名扩展名之间可能的不兼容性而产生的问题。该文章还提供了一些禁用警告消息的提示。
jsPDF 相关选项
有关 jsPDF 选项，请参阅 jsPDF 的文档。为了使用 jsPDF 生成表格，此插件使用 jsPDF-AutoTable 的特定修改版本（2.0.17）。由于兼容性原因，该版本的源代码已被集成并进行了调整。因此，jsPDF-AutoTable 插件不再需要额外包含。您可以通过将 jsPDF 选项 autotable 设置为 false 来禁用 autotable 功能。
对于 jsPDF 选项 format，存在一个扩展设置。如果您将选项值设置为 bestfit，tableExport 插件将尝试选择最小所需的纸张尺寸和方向，以便在不调整列的情况下显示表格（或多表格模式下的表格）。
还有针对 jsPDF-AutoTable 选项 'fillColor', 'textColor' 和 'fontStyle' 的扩展设置。当将这些选项值设置为 'inherit' 时，导出到 PDF 时将使用原始 CSS 的背景和文字颜色作为填充和文字颜色。CSS 字体重量 >= 700 的结果将产生粗体字体样式，而斜体 CSS 字体样式将被用作斜体字体样式。
通过设置 autotable 选项 outputImages，您可以选择启用或禁用位于原始 HTML 表格中的图片输出。
pdfmake 相关选项
pdfmake 选项的 docDefinition 对象包含各种属性，用于定义 PDF 文档的内容、样式、布局和其他方面。您可以根据要求自定义这些属性，以生成具有不同结构和外观的 PDF。有关更多信息，请参阅 pdfmake 文档。
在 pdfmake 选项中，widths 参数可以接受各种类型的值
'*'：您可以使用字符串 '*'（默认设置）将可用宽度均匀分配给所有列。这将导致所有列具有相同的宽度。'auto'：您可以使用字符串 'auto' 自动调整每个列的宽度，基于其内容进行调整。这允许 pdfmake 动态计算每个列的宽度以适应内容。数值数组：您可以提供一个表示每列宽度的数值数组。例如，[100, 200, 300] 将设置三列的宽度分别为100、200和300点。百分比字符串数组：您可以通过提供一个包含百分比值的字符串数组来指定列宽度。例如，['20%', '30%', '50%'] 将将可用宽度的20%分配给第一列，30%分配给第二列，50%分配给第三列。
可选的HTML数据属性
这些属性可以在生成要导出的表格时应用。
data-tableexport-cellformat
<td data-tableexport-cellformat="">...</td> -> An empty data value preserves format of cell content. E.g. no number seperator conversion More cell formats to be come...
data-tableexport-colspan
<td colspan="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.
data-tableexport-display
<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 exported <td data-tableexport-display="none">...</td> -> This cell will not be exported <tr data-tableexport-display="none">...</tr> -> All cells of this row will not be exported
data-tableexport-msonumberformat
<td data-tableexport-msonumberformat="\@">...</td> -> Data value will be used to style excel cells with mso-number-format (Excel 2000 html format only) Format Description =================================================================================== "\@" Excel treats cell content always 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 "\#\,\#\#0\.000" Comma with 3 decimals "mm\/dd\/yy" Date7 "mmmm\ d\,\ yyyy" Date9 "m\/d\/yy\ h\:mm\ AM\/PM" D -T AMPM "Short Date" 01/03/1998 "Medium Date" 01-mar-98 "d\-mmm\-yyyy" 01-mar-1998 "Short Time" 5:16 "Medium Time" 5:16 am "Long Time" 5:16:21:00 "0\.E+00" Scientific Notation "\#\ ???\/???" Fractions - up to 3 digits "\0022£\0022\#\,\#\#0\.00" £12.76 "\#\,\#\#0\.00_ \;\[Red\]\-\#\,\#\#0\.00\ " 2 decimals, negative red numbers
data-tableexport-rowspan
<td rowspan="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.
data-tableexport-value
<th data-tableexport-value="export title">title</th> -> "export title" instead of "title" will be exported <td data-tableexport-value="export content">content</td> -> "export content" instead of "content" will be exported
data-tableexport-xlsxformatid
<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. This attribute is for Excel 2007 Office Open XML format only. Format id Description =============================================================== "1" 0 "2" 0.00 "3" #,##0 "4" #,##0.00 "9" 0% "10" 0.00% "11" 0.00E+00 "12" # ?/? "13" # ??/?? "14" m/d/yy (will be localized by Excel) "15" d-mmm-yy "16" d-mmm "17" mmm-yy "18" h:mm AM/PM "19" h:mm:ss AM/PM "20" h:mm "21" h:mm:ss "22" m/d/yy h:mm "37" #,##0 ;(#,##0) "38" #,##0 ;[Red](#,##0) "39" #,##0.00;(#,##0.00) "40" #,##0.00;[Red](#,##0.00) "45" mm:ss "46" [h]:mm:ss "47" mmss.0 "48" ##0.0E+0 "49" @ "56" 上午/下午 hh時mm分ss秒 {mso.xlsx.formatid.currency} {mso.xlsx.format.currency}