tableexport.jquery.plugin

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML table Export</title>  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>     <script type="text/javascript" src="../libs/js-xlsx/xlsx.core.min.js"></script> <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script> <script type="text/javascript" src="../libs/jsPDF/jspdf.min.js"></script> <script type="text/javascript" src="../libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script> <script type="text/javascript" src="../libs/es6-promise/es6-promise.auto.min.js"></script> <script type="text/javascript" src="../libs/html2canvas/html2canvas.min.js"></script>  <script type="text/javascript" src="../tableExport.js"></script> <style type="text/css">  </style> <script type="text/javaScript"> function doExport(selector, params) { var options = { //ignoreRow: [1,11,12,-2], //ignoreColumn: [0,-1], //pdfmake: {enabled: true}, //onBeforeSaveToFile: DoOnBeforeSaveToFile, //onAfterSaveToFile: DoOnAfterSaveToFile, tableName: 'Table name' }; jQuery.extend(true, options, params); $(selector).tableExport(options); } function DoOnBeforeSaveToFile (data, fileName, type, charset, encoding) { alert ( "onBeforeSaveToFile: " + fileName ); } function DoOnAfterSaveToFile (data, fileName, type, charset, encoding) { alert ( "onAfterSaveToFile: " + fileName ); } /** * @return {string} */ function DoOnCellHtmlData(cell, row, col, data) { var result = ""; if (data !== "") { var html = $.parseHTML( data ); $.each( html, function() { if ( typeof $(this).html() === 'undefined' ) result += $(this).text(); else if ( $(this).is("input") ) result += $('#'+$(this).attr('id')).val(); else if ( $(this).is("select") ) result += $('#'+$(this).attr('id')+" option:selected").text(); else if ( $(this).hasClass('no_export') !== true ) result += $(this).html(); }); } return result; } function DoOnCsvCellData(cell, row, col, data) { var result = data; if (result !== "" && row > 0 && col === 0) { result = "\x1F" + data; } return result; } function DoOnXlsxCellData(cell, row, col, data) { var result = data; if (result !== "" && (row < 1 || col !== 0)) { if ( result === +result ) result = +result; } return result; } /** * @return {string} */ function DoOnMsoNumberFormat(cell, row, col) { var result = ""; if (row > 0 && col === 0) result = "\\@"; return result; } </script> </head> <body> <section> <h1> HTML Table Export<br> </h1> </section> <section> <ul> <li><a href="#" onClick="doExport('#countries', {type: 'csv',numbers: {html: {decimalMark: '.', thousandsSeparator: ','}, output: {decimalMark: ',', thousandsSeparator: ''}} });"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV</a></li> <li><a href="#" onClick="doExport('#countries', {csvUseBOM: false, type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (without BOM)</a></li> <li><a href="#" onClick="doExport('#rowspans', {type: 'csv',numbers: {html: {decimalMark: '.', thousandsSeparator: ','}, output: false}});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (rowspan)</a></li> <li><a href="#" onClick="doExport('#mixspans', {type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (colspan + rowspan)</a></li> <li><a href="#" onClick="doExport('#issue45', {type: 'csv',numbers: {html: {decimalMark: ',', thousandsSeparator: '.'}, output: {decimalMark: '', thousandsSeparator: '.'}}});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (tableexport-cellformat)</a></li> <li><a href="#" onClick="doExport('#issue47', {type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (issue47: colspan + rowspan)</a></li> <li><a href="#" onClick="doExport('#invisiblecols', {type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (data-tableexport-display="always")</a></li> <li><a href="#" onClick="doExport('#issue60', {type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (data-tableexport-value)</a></li> <li><a href="#" onClick="doExport('#issue127', {type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (issue127: Chinese csv export)</a></li> <li><a href="#" onClick="doExport('#issue178', {type: 'csv', numbers: {html: {decimalMark: ',', thousandsSeparator: '.'}, output: {decimalMark: '.', thousandsSeparator: '\''}}});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (issue 178: negative numbers)</a></li> <li><a href="#" onClick="doExport('#issue81', {type: 'csv', csvSeparator: ';', onCellData: DoOnCsvCellData});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (Issue 103: Export to csv to include leading zero)</a></li> <li><a href="#" onClick="doExport('#issue230', {type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (issue230: CSV injection)</a></li> <li><a href="#" onClick="doExport('#issue124', {type: 'csv'});"> <img src='icons/csv.png' alt="CSV" style="width:24px"> CSV (issue124: Multiple lines)</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'tsv'});"> <img src='icons/txt.png' alt="TSV" style="width:24px"> TSV</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'txt'});"> <img src='icons/txt.png' alt="TXT" style="width:24px"> TXT</a></li> <li><a href="#" onClick="doExport('#invisible', {type: 'txt'});"> <img src='icons/txt.png' alt="TXT" style="width:24px"> TXT (hidden table)</a></li> <li><a href="#" onClick="doExport('#countries', {type: 'txt', ignoreColumn: [1,3]});"> <img src='icons/txt.png' alt="TXT" style="width:24px"> TXT (ignoreColumn by column index)</a></li> <li><a href="#" onClick="doExport('#countries', {type: 'txt', ignoreColumn: ['flag','population']});"> <img src='icons/txt.png' alt="TXT" style="width:24px"> TXT (ignoreColumn by column name)</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'json'});"> <img src='icons/json.png' alt="JSON" style="width:24px"> JSON</a></li> <li><a href="#" onClick="doExport('#countries', {type: 'json', ignoreColumn: [2,3]});"> <img src='icons/json.png' alt="JSON" style="width:24px"> JSON (ignore column)</a></li> <li><a href="#" onClick="doExport('#countries', {type: 'json', escape: 'true'});"> <img src='icons/json.png' alt="JSON" style="width:24px"> JSON (with escape)</a></li> <li><a href="#" onClick="doExport('#rowspans', {type: 'json'});"> <img src='icons/json.png' alt="JSON" style="width:24px"> JSON (rowspan)</a></li> <li><a href="#" onClick="doExport('#issue142', {type: 'json', tfootSelector: ''});"> <img src='icons/json.png' alt="JSON" style="width:24px"> JSON (omit tfoot from output)</a></li> <li><a href="#" onClick="doExport('#issue124', {type: 'json'});"> <img src='icons/json.png' alt="JSON" style="width:24px"> JSON (issue124: Multiple lines)</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'xml'});"> <img src='icons/xml.png' alt="XML" style="width:24px"> XML</a></li> <li><a href="#" onClick="doExport('#issue124', {type: 'xml'});"> <img src='icons/xml.png' alt="XML" style="width:24px"> XML (issue124: Multiple lines)</a></li> <li><a href="#" onClick="doExport('#countries', {type: 'sql'});"> <img src='icons/sql.png' alt="SQL" style="width:24px"> SQL</a></li> <li><a href="#" onClick="doExport('#issue124', {type: 'sql'});"> <img src='icons/sql.png' alt="SQL" style="width:24px"> SQL (issue124: Multiple lines)</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'xlsx'});"> <img src='icons/xls.png' alt="XLSX" style="width:24px"> XLSX</a></li> <li><a href="#" onClick="doExport('#issue81', {type: 'xlsx', onCellData: DoOnXlsxCellData});"> <img src='icons/xls.png' alt="XLSX" style="width:24px"> XLSX (Issue 193: Number format)</a></li> <li><a href="#" onClick="doExport('#mixspans', {type: 'xlsx'});"> <img src='icons/xls.png' alt="XLSX" style="width:24px"> XLSX (colspan + rowspan)</a></li> <li><a href="#" onClick="doExport('#issue93', {type: 'xlsx', ignoreColumn: [4,7],ignoreRow: [4,8]});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLSX (Issue 93: colspan & rowspan)</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'excel'});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS</a></li> <li><a href="#" onClick="doExport('#countries', {type: 'excel', mso: {pageOrientation: 'landscape'}});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (landscape)</a></li> <li><a href="#" onClick="doExport('#excelstyles', {type: 'excel', mso: {styles: ['background-color', 'color', 'border-bottom-color', 'border-bottom-style', 'border-bottom-width', 'border-top-color', 'border-top-style', 'border-top-width', 'border-left-color', 'border-left-style', 'border-left-width', 'border-right-color', 'border-right-style', 'border-right-width', 'font-family', 'font-size', 'font-weight'], excelPageOrientation: 'landscape' }});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (excelstyles)</a></li> <li><a href="#" onClick="doExport('#issue53a', {type: 'excel'});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (issue53 I: complex table thead rowspan colspan)</a></li> <li><a href="#" onClick="doExport('#issue53b', {type: 'excel', ignoreColumn:[3,4]});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (issue53 II: complex table thead rowspan colspan)</a></li> <li><a href="#" onClick="doExport('#issue81', {type: 'excel', numbers: {output: false}, onMsoNumberFormat: DoOnMsoNumberFormat, worksheetName: 'MSO-FORMATS', excelstyles: ['background-color', 'color']});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (issue 81: Export String to excel with rows formatted as text)</a></li> <li><a href="#" onClick="doExport('#mixspans', {type: 'excel'});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (colspan + rowspan)</a></li> <li><a href="#" onClick="doExport('#issue93', {type: 'excel', ignoreColumn: [4,7], ignoreRow: [4,8]});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (Issue 93: colspan & rowspan)</a></li> <li><a href="#" onClick="doExport('#issue124', {type: 'excel'});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (Issue 124: Multiple lines</a></li> <li><a href="#" onClick="doExport('#issue220', {type: 'excel'});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XLS (Issue 220: Colspan of hidden columns</a></li> <br> <li><a href="#" onClick="doExport('#mixspans', {type: 'excel', mso: {fileFormat: 'xmlss'}});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XMLSS (colspan + rowspan)</a></li> <li><a href="#" onClick="doExport('#issue93', {type: 'excel', mso: {fileFormat: 'xmlss'}, ignoreColumn: [4,7],ignoreRow: [4,8]});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XMLSS (Issue 93: colspan & rowspan)</a></li> <li><a href="#" onClick="doExport('table', {type: 'excel', mso: {fileFormat: 'xmlss'}});"> <img src='icons/xls.png' alt="XLS" style="width:24px"> XMLSS (multiple tables)</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'doc', mso: {pageOrientation: 'landscape'}});"> <img src='icons/word.png' alt="Word" style="width:24px"> Word</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'png'});"> <img src='icons/png.png' alt="PNG" style="width:24px"> PNG</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'pdf', jspdf: {orientation: 'l', margins: {right: 10, left: 10, top: 40, bottom: 40}, autotable: {tableWidth: 'auto'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable)</a></li> <li><a href="#" onClick="doExport('#countries', {type: 'pdf', jspdf: {orientation: 'l', margins: {right: 10, left: 10, top: 40, bottom: 40}, autotable: {styles: {fillColor: 'inherit', textColor: 'inherit', halign: 'center', fillStyle: 'DF', lineColor: 200, lineWidth: 0.1}, headerStyles: {halign: 'left'}, tableWidth: 'auto'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: inherited color styles I)</a></li> <li><a href="#" onClick="doExport('#excelstyles', {type: 'pdf', jspdf: {orientation: 'p', margins: {right: 20, left: 20, top: 30, bottom: 30}, autotable: {styles: {fillColor: 'inherit', textColor: 'inherit', fontStyle: 'inherit'}, tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: inherited color styles II)</a></li> <li><a href="#" onClick="doExport('table', {type: 'pdf', jspdf: {orientation: 'p', margins: {right: 20, left: 20, top: 30, bottom: 30}, autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: multiple tables)</a></li> <li><a href="#" onClick="doExport('#mixspans', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: colspan + rowspan)</a></li> <li><a href="#" onClick="doExport('#issue47', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable issue47: colspan + rowspan))</a></li> <li><a href="#" onClick="doExport('#colalignment', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: different col alignment)</a></li> <li><a href="#" onClick="doExport('#alignments', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: column alignment)</a></li> <li><a href="#" onClick="doExport('#hiddencols', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: cells with data-tableexport-display="none")</a></li> <li><a href="#" onClick="doExport('#hiddenrows', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: rows with data-tableexport-display="none")</a></li> <li><a href="#" onClick="doExport('#invisiblecols', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: data-tableexport-display="always")</a></li> <li><a href="#" onClick="doExport('#headless', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable: table without header)</a></li> <br> <li><a href="#" onClick="doExport('#countries', {type: 'pdf', jspdf: {orientation: 'p', unit: 'mm', margins: {left: 20, top: 10}, autotable: false}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (html2canvas)</a></li> <br> <li><a href="#" onClick="doExport('#issue40', {type: 'pdf', jspdf: { autotable: { styles: {overflow: 'linebreak', fontSize: 26, rowHeight: 36}, headerStyles: {rowHeight: 28, fontSize: 38}, bodyStyles: {rowHeight: 20} } }});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue #40): Formatted HTML export problems</a></li> <li><a href="#" onClick="doExport('#issue41', {type:'pdf', jspdf: { autotable: { styles: {overflow: 'linebreak', fontSize: 26, rowHeight: 36}, headerStyles: {rowHeight: 28, fontSize: 38}, bodyStyles: {rowHeight: 20} } } });"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue #41): Colspan attribute is ignored for some formats</a></li> <li><a href="#" onClick="doExport('#issue42_1', {type:'pdf', jspdf: { autotable: { styles: {overflow: 'linebreak', fontSize: 26, rowHeight: 36, fillColor: 155}, headerStyles: {rowHeight: 28, fontSize: 38} } } });"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue #42 I): Incorrect size of cell with multiline text</a></li> <li><a href="#" onClick="doExport('#issue42_2', {type:'pdf', jspdf: { autotable: { styles: {overflow: 'linebreak', fontSize: 26, rowHeight: 36, fillColor: 155, valign: 'bottom'}, headerStyles: {rowHeight: 28, fontSize: 38} } } });"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue #42 II): Incorrect size of cell with multiline text</a></li> <li><a href="#" onClick="doExport('#issue43', {type:'pdf', jspdf: { preserveLeadingWS: true, autotable: { styles: {overflow: 'linebreak', fontSize: 26, rowHeight: 36, fillColor: 155}, headerStyles: {rowHeight: 28, fontSize: 38} } } });"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue #43): Configuration of PDF page breaks</a></li> <li><a href="#" onClick="doExport('#rowspans', {type:'pdf', jspdf: { autotable: { styles: {overflow: 'linebreak', fontSize: 26, rowHeight: 36, fillColor: 155}, headerStyles: {rowHeight: 28, fontSize: 38} } } });"> <img src='icons/pdf.png' alt="PDF" style="width:24px">Testing Rowspan</a></li> <li><a href="#" onClick="doExport('#issue53a', {type: 'pdf', jspdf: {format: 'bestfit', autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (issue53: Complex table thead rowspan colspan)</a></li> <li><a href="#" onClick="doExport('#issue51lb', {type: 'pdf', jspdf: {format: 'bestfit', autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (issue51(LB): Extra Table Being Rendered, top row not being rendered correctly)</a></li> <li><a href="#" onClick="doExport('#issue111', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue 111: Export pdf with images)</a></li> <li><a href="#" onClick="doExport('#issue60', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (jsPDF-AutoTable issue60))</a></li> <li><a href="#" onClick="doExport('#issue164', {type: 'pdf', jspdf: {autotable: {tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue 164: PDF(Make) don't support rowspan and colspan?)</a></li> <li><a href="#" onClick="doExport('#issue124', {type: 'pdf', jspdf: {autotable: {preserve: {leadingWS: true, trailingWS: true},tableWidth: 'wrap'}}});"> <img src='icons/pdf.png' alt="PDF" style="width:24px"> PDF (Issue 124: Multiple lines)</a></li> </ul> <table id="rowspans" class="table-striped numformat"> <caption>Table with rowspan</caption> <thead> <tr> <th>C1</th> <th>C2</th> <th>C3</th> </tr> </thead> <tbody> <tr> <td>1.101</td> <td>2</td> <td>30,000</td> </tr> <tr> <td rowspan="3">1</td> <td>.2</td> <td>30000</td> </tr> <tr> <td rowspan="3">2.2222222222</td> <td>3.333</td> </tr> <tr> <td>30,000.30</td> </tr> <tr> <td>1</td> <td>3</td> </tr> </tbody> </table> <table id="mixspans" class="table-striped numformat"> <caption>Table with rowspan and colspan</caption> <thead> <tr> <th>C1</th> <th>C2</th> <th>C3</th> </tr> </thead> <tfoot> <tr> <td>9</td> <td>9</td> <td>9</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td rowspan="3" colspan="2">1</td> <td>3</td> </tr> <tr> <td>3</td> </tr> <tr> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> <table id="issue47" class="table-striped numformat"> <caption>issue47: Table with rowspan and colspan</caption> <thead> <tr> <th colspan="2">Section 1</th> <th rowspan="2">T</th> <th>Section 2</th> <th>Section 3</th> </tr> <tr> <th>Q1</th> <th>Q2</th> <th>Q3</th> <th>Q4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>3</td> <td>4</td> </tr> </tbody> </table> <table id="hiddencols" class="table-striped numformat"> <caption>Table containing unexportable cells</caption> <thead> <tr> <th data-tableexport-display="none">C1</th> <th>C2</th> <th data-tableexport-display="none">C3</th> </tr> </thead> <tbody> <tr> <td data-tableexport-display="none">1</td> <td>2</td> <td data-tableexport-display="none">3</td> </tr> <tr> <td data-tableexport-display="none">1</td> <td>2</td> <td data-tableexport-display="none">3</td> </tr> <tr> <td data-tableexport-display="none">1</td> <td>2</td> <td data-tableexport-display="none">3</td> </tr> <tr> <td data-tableexport-display="none">1</td> <td>2</td> <td data-tableexport-display="none">3</td> </tr> <tr> <td data-tableexport-display="none">1</td> <td>2</td> <td data-tableexport-display="none">3</td> </tr> </tbody> </table> <table id="hiddenrows" class="table-striped"> <caption>Table containing unexportable rows</caption> <thead> <tr> <th>C1</th> <th>C2</th> <th>C3</th> </tr> </thead> <tbody> <tr data-tableexport-display="none"> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> <tr data-tableexport-display="none"> <td>G</td> <td>H</td> <td>I</td> </tr> </tbody> </table> <table id="invisiblecols" class="table-striped numformat"> <caption>Table with invisible but exportable cells</caption> <thead> <tr> <th>C1</th> <th style="display:none;" data-tableexport-display="always">C2</th> <th>C3</th> <th class="hidden" data-tableexport-display="always">C4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td style="display:none;" data-tableexport-display="always">2</td> <td>3</td> <td class="hidden" data-tableexport-display="always">4</td> </tr> <tr> <td>1</td> <td style="display:none;" data-tableexport-display="always">2</td> <td>3</td> <td class="hidden" data-tableexport-display="always">4</td> </tr> <tr> <td>1</td> <td style="display:none;" data-tableexport-display="always">2</td> <td>3</td> <td class="hidden" data-tableexport-display="always">4</td> </tr> <tr> <td>1</td> <td style="display:none;" data-tableexport-display="always">2</td> <td>3</td> <td class="hidden" data-tableexport-display="always">4</td> </tr> <tr> <td>1</td> <td style="display:none;" data-tableexport-display="always">2</td> <td>3</td> <td class="hidden" data-tableexport-display="always">4</td> </tr> </tbody> </table> <table id="colalignment"> <caption>Table with different col alignment</caption> <thead> <tr> <td width="30" aria-hidden="true"> </td> <th style="text-align: left; width: 150px" scope="col" tabindex="0">Description</th> <th style="text-align: right; width: 100px" scope="col" tabindex="0">Value 1</th> <th style="text-align: right; width: 100px" scope="col" tabindex="0">Value 2</th> </tr> </thead> <tbody> <tr> <td width="30" aria-hidden="true"> </td> <td style="text-align: left" tabindex="0">Not available</td> <td style="text-align: right" tabindex="0">0</td> <td style="text-align: right" tabindex="0">0</td> </tr> <tr> <td width="30" aria-hidden="true"> </td> <td> </td> <td style="text-align: right" tabindex="0">0</td> <td style="text-align: right" tabindex="0">0</td> </tr> </tbody> </table> <table id="alignments" class="table-striped"> <caption>Table for column alignment tests</caption> <thead> <tr> <th style="width:15ex">C1</th> <th style="width:15ex">C2</th> <th style="width:15ex; text-align:right">C3</th> </tr> </thead> <tbody> <tr> <td>ABCDEFG</td> <td>abcdef</td> <td>XYZxyz123</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td style="text-align:right">1</td> <td style="text-align:right">2</td> <td style="text-align:right">3</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </tbody> </table> <p>Before table...</p> <table id="invisible" style="display:none" data-tableexport-display="always"> <caption>Export hidden table</caption> <thead> <tr> <th>C1</th> <th>C2</th> <th>C3</th> </tr> </thead> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </tbody> </table> <p>...behind table</p> <table id="excelstyles"> <caption>Test option 'excelstyles'</caption> <thead> <tr> <th style="border: 2px solid #b60000; font-family: arial,serif; font-size: 18px; font-weight: bold">C1</th> <th style="border: 2px solid #b60000; font-family: arial,serif; font-size: 18px; font-weight: bold">C2</th> <th style="border: 2px solid #b60000; font-family: arial,serif; font-size: 18px; font-weight: bold">C3</th> </tr> </thead> <tbody> <tr> <td style="background-color:red">A</td> <td style="background-color:green">B</td> <td style="background-color:blue">C</td> </tr> <tr> <td style="border: 1px solid #000000;">D</td> <td><div class="tdrect"><div class="tdbar" style="width:70%; background-color:yellow;"></div></div></td> <td style="border: 1px solid #000000;">F</td> </tr> <tr> <td style="background-color:green">G</td> <td style="background-color:blue">H</td> <td style="background-color:red">I</td> </tr> </tbody> </table> <table id="headless" class="table-striped"> <caption>Table without header</caption> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> <tr> <td>G</td> <td>H</td> <td>I</td> </tr> </tbody> </table> <table id="issue40"> <caption>Issue 40: Formatted HTML export problems</caption> <thead> <tr> <th> Table title<br/> <span style="font-weight:normal;font-size:smaller;">Note message</span> </th> </tr> </thead> <tbody> <tr> <td> <p> Very long long long long long long long long long long long long long multiline message <i>with internal element</i>. </p> </td> </tr> </tbody> </table> <table id="issue41"> <caption>Issue 41: Colspan attribute is ignored for some formats</caption> <thead> <tr> <th>Col 1</th><th>Col 2</th> </tr> </thead> <tbody> <tr> <td colspan=2 style="text-align:center">Colspan</td> </tr> <tr> <td> Value 1 </td> <td> Value 2 </td> </tr> </tbody> </table> <table id="issue42_1"> <caption>Issue 42 I: Incorrect size of cell with multiline text</caption> <thead> <tr> <th>Title</th> </tr> </thead> <tbody> <tr> <td> Very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long Message </td> </tr> <tr> <td> Second row </td> </tr> </tbody> </table> <table id="issue42_2"> <caption>Issue 42 II: Incorrect size of cell with multiline text</caption> <thead> <tr> <th>Long value</th> <th>Short value</th> </tr> </thead> <tbody> <tr> <td> Very long long long long long long long long long long long long Message </td> <td>Aligned cell</td> </tr> <tr> <td>Second row cell 1</td> <td>Second row cell 2</td> </tr> </tbody> </table> <table id="issue43"> <caption>Issue 43: Configuration of PDF page breaks</caption> <thead> <tr> <th>Title</th> </tr> </thead> <tbody> <tr><td>row 1</td></tr><tr><td> row 2</td></tr> <tr><td>  row 3</td></tr> <tr><td>   row 4</td></tr> <tr><td>    row 5</td></tr> <tr><td>row 6</td></tr><tr><td>row 7</td></tr> <tr><td>row 8</td></tr> <tr><td>row 9</td></tr> <tr><td>row 10</td></tr> <tr><td>row 11</td></tr><tr><td>row 12</td></tr> <tr><td>row 13</td></tr> <tr><td>row 14</td></tr> <tr><td>row 15</td></tr> <tr><td>row 16</td></tr> <tr> <td style="margin: 5px"> Very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long Message </td> </tr> <tr> <td> Last row </td> </tr> </tbody> </table> <table id="issue45" class="table-striped"> <caption>Table for testing onCellHtmlData option</caption> <thead> <tr> <th>C1</th> <th>C2</th> <th>C3</th> </tr> </thead> <tbody> <tr> <td><input type="number" id="r1i1"></td> <td>B</td> <td>C</td> </tr> <tr> <td><div class="no_export">onCellHtmlData should filter<br>this text, but not this letter:</div><div>D</div></td> <td><b>E</b></td> <td><input type="text" id="r2i1" value="text1"><br> <input type="text" id="r2i2" value="text2"><br> <input type="text" id="r2i3" value="text3"></td> </tr> <tr> <td><select id="r3s1"><option>option1</option><option>option2</option><option>option3</option></select></td> <td>H</td> <td>I</td> </tr> <tr> <td>10.10.10.1</td> <td data-tableexport-cellformat="">10.10.10.2</td> <td>10.10,10</td> </tr> </tbody> </table> <table id="issue53a"> <caption>Issue 53 I: complex table thead rowspan colspan</caption> <thead> <tr> <th rowspan="2">Name</th><th colspan="2">detail1</th> <th colspan="4">detail2</th><th colspan="4">detail3</th> </tr> <tr> <th>d11</th><th>d12</th> <th>d21</th><th>d22</th><th>d23</th><th>d24</th> <th>d31</th><th>d32</th><th>d33</th><th>d34</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>11</td><td>12</td> <td>21</td><td>22</td><td>23</td><td>24</td> <td>31</td><td>32</td><td>33</td><td>34</td> </tr> <tr> <td>Joe Smith</td> <td>41</td><td>42</td> <td>51</td><td>52</td><td>53</td><td>54</td> <td>61</td><td>62</td><td>63</td><td>64</td> </tr> </tbody> </table> <table id="issue53b"> <caption>Issue 53 II: complex table thead rowspan colspan</caption> <tbody> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> </tr> <tr> <td>r1 c1</td> <td>r1 c2</td> <td>r1 c3</td> <td>r1 c4</td> <td>r1 c5</td> <td>r1 c6</td> <td>r1 c7</td> <td>r1 c8</td> </tr> <tr> <td rowspan="4">r2 c1</td> <td rowspan="4">r2 c2</td> <td rowspan="4">r2 c3</td> <td rowspan="4">r2 c4</td> <td>r2 c5</td> <td>r2 c6</td> <td>r2 c7</td> <td>r2 c8</td> </tr> <tr> <td>r3 c5</td> <td>r3 c6</td> <td>r3 c7</td> <td>r3 c8</td> </tr> <tr> <td>r4 c5</td> <td>r4 c6</td> <td>r4 c7</td> <td>r4 c8</td> </tr> <tr> <td>r5 c5</td> <td>r5 c6</td> <td>r5 c7</td> <td>r5 c8</td> </tr> </tbody> </table> <table id="issue60" class="table-striped"> <caption>Issue 60: Export a data attribute instead of the TD content</caption> <thead> <tr> <th data-tableexport-value="c1 is the new C1">C1</th> <th>C2</th> <th>C3</th> </tr> <tr data-tableexport-display="none"> <th>C_1</th> <th>C_2</th> <th>C_3</th> </tr> </thead> <tbody> <tr> <td data-tableexport-value="100">A</td> <td data-tableexport-value="b is the new B">B</td> <td>C</td> </tr> <tr> <td>D</td> <td data-tableexport-value="">E</td> <td>F</td> </tr> </tbody> </table> <table id="issue51lb"> <caption>Issue 51(LB): Extra Table Being Rendered, top row not being rendered correctly</caption> <thead> <tr> <th rowspan="2">ethn1</th> <th colspan="2">no1</th> <th colspan="2">yes1</th> <th rowspan="2">Totals1</th> </tr> <tr> <th colspan="1">no2</th> <th colspan="1">yes2</th> <th colspan="1">no2</th> <th colspan="1">yes2</th> </tr> </thead> <tbody> <tr> <td rowspan="1">black</td> <td>243</td> <td>131</td> <td>74</td> <td>56</td> <td>504</td> </tr> <tr> <td rowspan="1">hisp</td> <td>285</td> <td>90</td> <td>209</td> <td>96</td> <td>680</td> </tr> <tr> <td rowspan="1">other</td> <td>1,360</td> <td>337</td> <td>1,125</td> <td>354</td> <td>3,176</td> </tr> <tr> <td colspan="1">Totals</td> <td>1,888</td> <td>558</td> <td>1,408</td> <td>506</td> <td>4,360</td> </tr> </tbody> </table> <table id="issue81" class="table-striped"> <caption>Issue 81: Export String to excel with rows formatted as text</caption> <thead> <tr> <th>Number as text</th> <th>Number</th> </tr> </thead> <tbody> <tr> <td data-tableexport-msonumberformat="\@">1,357,805.84</td> <td>00212704</td> </tr> <tr> <td>00212336</td> <td data-tableexport-msonumberformat="\#\,\#\#0\.00_ \;\[Red\]\-\#\,\#\#0\.00\ ">-212336</td> </tr> <tr> <td>00212347</td> <td>1357805,84</td> </tr> </tbody> </table> <table id="issue93"> <caption>Issue 93: colspan & rowspan</caption> <thead> <tr> <th colspan="2">Region</th> <th>08/2016</th> <th>PY</th> <th>%Incr / Decr</th> <th>YTD</th> <th>PYTD</th> <th>%Incr / Decr</th> </tr> </thead> <tbody> <tr> <td rowspan="3">CER</td> <td>AU</td> <td>0.00</td> <td>176.00</td> <td>-100.00 %</td> <td>34,000.20</td> <td>17,512.13</td> <td>94.49 %</td> </tr> <tr> <td>DL</td> <td>0.00</td> <td>1,357,805.00</td> <td>-100.00 %</td> <td>9,584,309.39</td> <td>379,621.68</td> <td>-7.08 %</td> </tr> <tr> <td>SZ</td> <td>0.00</td> <td>23,745.00</td> <td>-100.00 %</td> <td>10,314,806.62</td> <td>241,957.52</td> <td>56.90 %</td> </tr> <tr> <td colspan="2">Subtotal</td> <td>0.00</td> <td>1,381,727.81</td> <td></td> <td>9,997,991.27</td> <td>10,574,278.27</td> <td></td> </tr> <tr> <td rowspan="3">CER</td> <td>AU</td> <td>0.00</td> <td>176.00</td> <td>-100.00 %</td> <td>34,000.20</td> <td>17,512.13</td> <td>94.49 %</td> </tr> <tr> <td>DL</td> <td>0.00</td> <td>1,357,805.00</td> <td>-100.00 %</td> <td>9,584,309.39</td> <td>379,621.68</td> <td>-7.08 %</td> </tr> <tr> <td>SZ</td> <td>0.00</td> <td>23,745.00</td> <td>-100.00 %</td> <td>10,314,806.62</td> <td>241,957.52</td> <td>56.90 %</td> </tr> <tr> <td colspan="2">Subtotal</td> <td>0.00</td> <td>1,381,727.81</td> <td></td> <td>9,997,991.27</td> <td>10,574,278.27</td> <td></td> </tr> </tbody> </table> <table id="issue124" class=""> <caption>Issue 124: Multiple lines</caption> <thead> <tr> <th>column 1</th> <th>column 2</th> </tr> </thead> <tbody> <tr> <td>A</td> <td> Line 1<br> Line 2<br ng-if="!$last" class="ng-scope"> Line 3<br/> Line 4 </td> </tr> <tr> <td>B</td> <td> Line 1 Line 2 Line 3 </td> </tr> <tr> <td>C</td> <td><span>Text content</span></td> </tr> <tr> <td>D</td> <td> <span>Text content</span> </td> </tr> </tbody> </table> <table id="issue111" class=""> <caption>Issue 111: Export pdf with images</caption> <thead> <tr> <th>column 1</th> <th>column 2</th> </tr> </thead> <tbody> <tr> <td>A</td> <td><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTmz5uo5mCCab-mCxueyW6nvEv-Y8AVI58Y2WYmwwVGrCBhKFFMxg"/></td> </tr> <tr> <td>B</td> <td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSEber0z-4l7590XFfg_pRTX3Gl6-sYLmLIrrSNKn2tbHTeHf8F"/></td> </tr> <tr> <td>C</td> <td><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSBnkKvffHqzj3INyaZNxS7DXnd9xdquGBzLJHDqWijAhbpLTrI"/></td> </tr> </tbody> </table> <table id="issue12