分享一个我的小demo:GuitHub ExcelDownload 实例下载(布局简陋,随便看看就行),喜欢就给个star
,哈哈
一、生成excel表格的原理
打蛇打七寸,擒贼先擒王。通过标题就可以知道,想要通过js生成excel表格,首先就要绘制表格。
在这里,可以利用Html中的<table>
标签来绘制我们所需要的excel表格样式布局。
<table id="tb" border="1" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>ID</th>
<th>姓名</td>
<th>年龄</td>
<th>座右铭</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>18</td>
<td>走的人多了,变成了路。</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>88</td>
<td>人人都有自己走的路,哪条属于自己呢?</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>81</td>
<td>走别人的路,让他没道可走!</td>
</tr>
</tbody>
</table>
二、借助第三方excel相关的js插件进行处理
这里首先推荐使用 excel.js
包(可在github上下载js包),利用js包生成 Blob
对象和 URL.createObjectURL()
这个方法进行后续操作。
- Blob 对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。 File 接口基于Blob,继承了 blob的功能并将其扩展使其支持用户系统上的文件。
function sheet2blob(sheet, sheetName) {
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置项
var wopts = {
bookType: 'xlsx', // 要生成的文件类型
bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串转ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
- URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
三、获取table内容,生成xls格式的字符串
var table = document.querySelector("#tb");
var sheet = XLSX.utils.table_to_sheet(table); //将一个table对象转换成一个sheet对象
最后通过点击事件即可下载!
function btn_export() {
var table = document.querySelector("#tb");
var sheet = XLSX.utils.table_to_sheet(table); //将一个table对象转换成一个sheet对象
openDownloadDialog(sheet2blob(sheet), 'excel.xlsx');//文件名称
}
这个小demo是在完成公司项目时经历的,其中有个需求就是涉及到excel表格的下载,也在网上看了很多案例和文档完成的,毕竟众人拾柴火焰高嘛。