使用 javascript/jQuery 将 HTML 表转换为 Excel (xls)答案

【问题标题】：HTML Table to Excel (xls) using javascript/jQuery使用 javascript/jQuery 将 HTML 表转换为 Excel (xls)
【发布时间】：2015-08-27 21:22:03
【问题描述】：

我正在尝试通过 javascript/jquery 导出将 html 表导出到 Excel 文档。到目前为止，我找到了 2 个解决方案，但都不符合我的要求：

HTML Table Export

不导出内联样式（样式是必备要求）

Table2Excel

不适用于所有 IE 版本（需要所有浏览器兼容性）

我正在寻找一个尽可能少的解决方案（这两个解决方案都非常“整洁”，但根据我上面的 cmets，他们都有一个不符合我要求的垮台。

有人知道更好的解决方案吗？我对此导出的要求是：

需要在所有浏览器上工作
需要导出内联样式
如果可能的话如果可以命名文件就好了

在此不胜感激任何帮助，因为我不能成为第一个需要此功能的人...

谢谢！

【问题讨论】：

标签： javascript jquery html excel html-table

【解决方案1】：

我假设 PHP/Flash 是不行的。（如果没有，请查看 PHPExcel 和 DataTables 的导出功能。）

此外，如果没有某种类型的服务器端编程，命名文件几乎是不可能的。我很确定这是大多数浏览器的安全问题。

在我们进入代码之前，有一些限制：

您可能需要查找MS Office XML formats for XLS 并自定义
一旦文件下载（它将是 .xls），您可能会收到类似“此文件说它是 XLS 格式但可能不是，您仍然要打开吗？”这样的错误。
您可能需要“另存为”一些有效的 excel 格式，以强制它从 excel 文档正文中的 HTML 转换。
我已经在 Chrome / Firefox / Internet Explorer 中广泛使用了它，但您应该自己测试一下。
当前设置为冻结行/列。更改 tableToExcel() 函数顶部的 XML 和/或冻结变量。
客户端的资源昂贵。可能最好使用某种服务器端脚本。
根据 javascript 变量的大小，表的大小有一个限制（我猜）。我将它用于 50x300 等一些表格，但我不建议将其用于更大的表格。

它接受一串 HTML 表格文本（包括<table>）。您可以使用内联样式格式化该 HTML（不幸的是，它不适用于 CSS 样式表）。

tableToExcel($('table').html(),'Worksheet Name');

这里是函数。享受吧！

function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

function tableToExcel(table,name) {
	var freezeTopRowNumber = '4';
	var freezeColNumber = '6';
	var 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">';
	template += '<head><!--[if gte mso 9]>';
	template += '<xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name>';
	template += '<x:WorksheetOptions><x:Selected/><x:FreezePanes/><x:FrozenNoSplit/><x:SplitHorizontal>'+freezeTopRowNumber+'</x:SplitHorizontal><x:TopRowBottomPane>'+freezeTopRowNumber+'</x:TopRowBottomPane>';
	template += '<x:SplitVertical>'+freezeColNumber+'</x:SplitVertical><x:LeftColumnRightPane>'+freezeColNumber+'</x:LeftColumnRightPane>';
	template += '<x:ActivePane>2</x:ActivePane><x:Panes><x:Pane><x:Number>3</x:Number></x:Pane><x:Pane><x:Number>2</x:Number></x:Pane></x:Panes>';
	template += '<x:ProtectContents>False</x:ProtectContents><x:ProtectObjects>False</x:ProtectObjects><x:ProtectScenarios>False</x:ProtectScenarios>';
	template += '<x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>';
	template += '<body>{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]; }) };
	var ctx = {worksheet: name || 'Worksheet', table: table};
	var b = base64(format(template,ctx));

	var blob = b64toBlob(b,'application/vnd.ms-excel');
	var blobURL = URL.createObjectURL(blob);
	window.location.href = blobURL;


}

【讨论】：