我正在尝试通过 javascript/jquery 导出将 html 表导出到 Excel 文档。到目前为止,我找到了 2 个解决方案,但都不符合我的要求:
- 不导出内联样式(样式是必须具备的要求)
- 不适用于所有 IE 版本(需要所有浏览器兼容性)
我正在寻找一个尽可能精简的解决方案(这两个解决方案都非常“整洁”,但根据我上面的评论,它们都有一个缺点,达不到我的要求。
有人知道更好的解决方案吗?我对此导出的要求是:
- 需要在所有浏览器上工作
- 需要导出内联样式
- IF POSSIBLE 如果能给文件命名就好了
在此感谢任何帮助,因为我不是第一个需要此功能的人...
谢谢!
最佳答案
我假设 PHP/Flash 是行不通的。 (如果没有,请检查 PHPExcel 和 DataTables ' 导出功能。)
此外,如果没有某种类型的服务器端编程,命名文件几乎是不可能的。我很确定这是大多数浏览器的安全问题。
在我们开始编写代码之前,先了解一些限制:
- 您可能需要查找 MS Office XML formats for XLS并定制
- 一旦文件下载(它将是 .xls),您可能会收到类似“此文件说它是 XLS 格式但可能不是,您是否仍要打开?”之类的错误消息?
- 您可能需要“另存为”一些有效的 excel 格式以强制它从 excel 文档正文中的 HTML 转换。
- 我已经在 Chrome/Firefox/Internet Explorer 中相当广泛地使用了它,但你应该自己测试一下。
- 当前设置为卡住行/列。更改
tableToExcel()
顶部的 XML 和/或卡住变量功能。 - 客户端资源消耗大。可能最好使用某种服务器端脚本。
- 表的大小有一个限制(我猜)这是基于 javascript 变量的大小。我将它用于 50x300 等一些 table ,但我不建议在更大的 table 上使用它。
它接受一串 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;
}
关于javascript - HTML 表格到 Excel (xls) 使用 javascript/jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30793356/