js导出Excel的方法
- 利用html的table表格的格式书写想要的excel格式
- 获取table的内容并组装成一个xls格式的字符串
- 利用Blob对象生成一个xls格式的文件
- 利用a标签的download属性创建文件名,并下载到本地
将字符串转成xls文件,本文主要利用Blob对象和URL.createObjectURL() 方法
- Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。 File 接口基于Blob,继承了 blob的功能并将其扩展使其支持用户系统上的文件。
- URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
下面是个例子
//导出excel
export const tableToExcel = (tableDom,filename)=>{
if (!tableDom || tableDom.nodeType!=1){
return new Error('tableDom type error!')
}
var oHtml = tableDom.outerHTML;
var excelHtml = `
<html>
<head>
<meta charset='utf-8' />
<style>
.tableA {
border-collapse: collapse;
}
.tableA .title th{
height: 50px;
font-size: 24px;
font-family: '微软雅黑';
font-weight: 700;
}
.tableA tr th {
border: 1px #000 solid;
height: 40px;
background: #efefef;
}
.tableA tr td {
padding: 0 40px;
border: 1px #000 solid;
height: 40px;
text-align: center;
}
.tableA .footer td {
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
${oHtml}
</body>
</html>
`;
var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' });
// 创建一个a标签
var oA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 给文件命名
oA.download = filename+'.xls';
// 模拟点击
oA.click();
}
另一种方式
- 使用
window.btoa
将字符转换成base64,然后将a标签的href设置为'data:application/vnd.ms-excel;base64,'
+base64编码的数据,使用a标签的download进行下载。 - 在个浏览器中,使用
window.btoa
对Unicode字符串进行编码都会出发一个字符越界的异常,解决方法是,先把Unicode字符串转换为UTF-8编码。如下方法
function utf8_to_b64( str ) {
return window.btoa(unescape(encodeURIComponent( str )));
}
function b64_to_utf8( str ) {
return decodeURIComponent(escape(window.atob( str )));
}
// Usage:
utf8_to_b64('? à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "? à la mode"
//译者注:在js引擎内部,encodeURIComponent(str)相当于escape(unicodeToUTF8(str))
//所以可以推导出unicodeToUTF8(str)等同于unescape(encodeURIComponent(str))
下面一个例子
var tableToExcel = function(table,name){
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html><head><meta charset="UTF-8"></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]; }) }
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
let a = document.createElement('a');
a.href = uri + window.btoa(unescape(encodeURIComponent('\uFEFF'+format(template,ctx))));
a.download = 'aaa.xls'
a.click();
}