【问题标题】:Exporting HTML table with correct format in Javascript在 Javascript 中以正确的格式导出 HTML 表格
【发布时间】:2014-09-23 07:21:36
【问题描述】:

我有一个表格,我有一个金额列。我想以正确的数字格式导出表格,因为当我导出表格时,我只得到 100 而不是 100.00。

我的桌子是这样的:

ID    Code    Amount    Time
1      1      100.00    2014-09-22 18:59:25
1      1      100.60    2014-09-22 18:59:25
1      1      100.00    2014-09-22 18:59:25
1      1       12.50    2014-09-22 18:59:25

Excel 输出是这样的:

ID    Code    Amount    Time
1      1         100    2014-09-22 18:59:25
1      1      100.60    2014-09-22 18:59:25
1      1         100    2014-09-22 18:59:25
1      1        12.5    2014-09-22 18:59:25

这是我的代码:

    <script>
    var tableToExcel = (function () {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
            base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)))
            }, format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                })
            }
        return function (table, name, filename) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {
                worksheet: name || 'Worksheet',
                table: table.innerHTML
            }

            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = filename;
            document.getElementById("dlink").click();

        }
    })()
    function download(){
        $(document).find('tfoot').remove();
        var name = document.getElementById("name").innerHTML;
        tableToExcel('table2', 'Sheet 1', name+'.xls')
        setTimeout("window.location.reload()",0.0000001);

    }
    var btn = document.getElementById("btn");
    btn.addEventListener("click",download);
    </script>

有什么方法可以实现吗?我希望我的 Excel 文件看起来与表中的数据完全一样。

【问题讨论】:

    标签: javascript html-table export-to-excel


    【解决方案1】:

    试试

    <td style='mso-number-format:"#,##0.00"'>100.00</td>
    

    在 HTML 表格中。

    见小提琴:http://jsfiddle.net/ad3xda1z/1/

    问候

    阿克塞尔

    【讨论】:

    • 谢谢@Axel!像魅力一样工作:)
    • @Adrian:不,因为 IE 不支持将 data: URI 用作链接目标。但是整个方法已经过时了,因为有些库确实可以创建Excel 文件格式(*.xls*.xlsx)。所以没有必要再把HTML伪装成schemas-microsoft-com:office:excelXML
    【解决方案2】:

    在 excel 本身中:
    默认情况下它不显示.00 - 但您可以在格式化选项中更改它

    所以最终会有一个 (xml) 选项来指定单元格格式。 那么格式化代码将类似于0.00

    发现: HTML to Excel: How can tell Excel to treat columns as numbers?
    some formating code examples
    所以你可以尝试在单元格中添加style="mso-number-format:0\.00000;"

    其他选项是尝试强制 excel 将单元格内容解释为文本 - 为此,您可以尝试在每个单元格内容前加上 '

    我已经构建了一个堆栈 sn-p 示例。 相关代码为:

    // deep clone of table
    //https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode
    var temp_table = document.getElementById('table_XXXX').cloneNode(true);
    // get all table cells
    var table_cells = temp_table.getElementsByTagName('td');
    // console.log("table_cells", table_cells);
    // modify all table cells
    for (var i = 0; i < table_cells.length; i++) { 
        var cell = table_cells[i];
        // console.log("cell", cell);
        // cell.textContent = "'" + cell.textContent;
        cell.setAttribute("style", "mso-number-format:0\.00000;");
    }
    
    console.log("temp_table", temp_table);
    

    var tableToExcel = (function () {
    	// var uri = 'data:application/vnd.ms-excel;base64,';
    	
    	var template = '<html lang="en" xml:lang="en" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="DC.language" content="en"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>';
    	
    	// var  base64 = function (s) {
    		// return window.btoa(unescape(encodeURIComponent(s)))
    	// };
    	
    	var format = function (s, c) {
    		return s.replace(/{(\w+)}/g, function (m, p) {
    			return c[p];
    		})
    	};
    	
    	return function (table, name) {
    		if (!table.nodeType) table = document.getElementById(table)
    		var ctx = {
    			worksheet: name || 'Worksheet',
    			table: table.innerHTML
    		}
    		// return uri + base64(format(template, ctx));
    		return format(template, ctx);
    	}
    })()
    
    
    function saveAsFile(link, content, mimetype, filename) {
    	// https://developer.mozilla.org/en-US/docs/Web/API/Blob
    	// var aFileParts = ['<a id="a"><b id="b">hey!</b></a>'];
    	// var oMyBlob = new Blob(aFileParts, {type: 'text/html'}); // the blob
    	
    	// https://stackoverflow.com/a/16330385/574981
    	var blob = new Blob([content], mimetype);
    	var url  = URL.createObjectURL(blob);
    	
    	console.log("update download link:");
    	var a = link;
    	a.download    = filename;
    	a.href        = url;
    	// a.textContent = "Download File";
    	console.log("download link:", a);
    }
    
    function saveAsFile_handleClick(event){
    	console.log("saveAsFile_handleClick");
    	// deep clone of table
    	//https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode
    	var temp_table = document.getElementById('table_XXXX').cloneNode(true);
    	// get all table cells
    	var table_cells = temp_table.getElementsByTagName('td');
    	// console.log("table_cells", table_cells);
    	// modify all table cells
    	for (var i = 0; i < table_cells.length; i++) { 
    		var cell = table_cells[i];
    		// console.log("cell", cell);
    		// cell.textContent = "'" + cell.textContent;
    		cell.setAttribute("style", "mso-number-format:0\.000;");
    	}
    	console.log("temp_table", temp_table);
    	// function saveAsFile(link, content, mimetype, filename);
    	saveAsFile(
    		this,
    		tableToExcel(temp_table, 'Sheet 1'), 
    		{type: "application/msexcel"}, 
    		"test.xls"
    	);
    } 
    
    function initSystem(){
    	console.groupCollapsed("system init:");
    	
    	// save output button
    	var saveOutputButton = document.getElementById("saveAsFile");
    	if (saveOutputButton) {
    		console.log("add click event to '#saveAsFile':");
    		saveOutputButton.addEventListener('click', saveAsFile_handleClick, false);
    	}
    	
    	console.log("finished.");
    	console.groupEnd();
    }
    
    /* * pure JS - newer browsers...* */
    document.addEventListener('DOMContentLoaded', initSystem, false);
    #btn {
      margin: 1em;
    }
    
    tr:hover {
      background-color: rgba(255, 200, 0, 0.5);
      
    }
    
    td {
      padding: 0 1.5em;
      text-align: right;
    }
    
    
    a, a:link {
    	margin:					0px;
    	padding:				0px;
    	text-decoration:		none;
    	color:					inherit;
    	cursor:					pointer;
    	display:				inline;
    }
    
    
    a:hover {
    	background-color:		rgba(255,190,000,0.5);
    	/*box-shadow:			x y color [blur] [spread] [inset]*/
    	box-shadow:				0px 0px 5px rgba(255,190,0,0.5), 0px 0px 20px rgba(255,190,0,0.5);
    }
    
    
    .button, a.button:link {
    	display:				block;
    	width:					20em;
    	padding:				0.5em;
    	margin:					1em;
    	border-radius:			1em;
    	background-color:		rgba(0, 0, 0, 0.35);
    	box-shadow:				0px 0px 10px rgba(0,0,0,0.2), 0px 0px 10px rgba(255,255,255,0.1) inset;
    	cursor:					pointer;
    	text-align:				center;
    }
    
    .button:hover, a.button:link:hover {
    	background-color:		rgba(0, 0, 0, 0.36);
    	box-shadow:				1px 1px 10px rgba(0,0,0,0.3), 0px 0px 10px rgba(255,255,255,0.1) inset;
    }
    <div>
    	<a class="button" id="saveAsFile" href="#">
    		Save Table to Excel File
    	</a>
    </div>
    
    
    <div id="tablecontainer">
    	<table id="table_XXXX">
    		<tbody>
    			<tr>
    				<th>ID</th>
    				<th>Code</th>
    				<th>Amount</th>
    				<th>Time</th>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>1</td>
    				<td>100.00</td>
    				<td>2014-09-19 18:59:25</td>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>1</td>
    				<td>100.60</td>
    				<td>2014-09-20 18:59:25</td>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>1</td>
    				<td>200.00</td>
    				<td>2014-09-21 18:59:25</td>
    			</tr>
    			<tr>
    				<td>1</td>
    				<td>1</td>
    				<td>12.50</td>
    				<td>2014-09-22 18:59:25</td>
    			</tr>
    		</tbody>
    	</table>
    </div>

    【讨论】:

    • 但我需要在打开文件后立即显示 .00。不是我会打开它。它是客户端。我将如何格式化它?
    • 您可以尝试将金额转义为文本 - 为此您必须修改表格数据,以便在文本前面添加一个 '。但是你不能再用这个单元格内容计算了。
    • 文字是什么意思?在我的数据来自的数据库中,我已将其类型更改为 varchar,以便它也显示 2 个小数点。
    • 我认为你不能为这个 html 嵌入的东西中的单元格指定格式。您没有生成真正的 xls 文件 - 它是一个嵌入了 html 的 xls 文件 - 所以您没有所有选项来格式化内容。我的想法是遍历 html 表格的内容并在单元格内容前加上一个 ' - 所以 excel 会将这些内容解释为文本。
    猜你喜欢
    • 2020-10-07
    • 1970-01-01
    • 2020-07-28
    • 1970-01-01
    • 1970-01-01
    • 2023-03-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多