使用javascript生成Excel表格（内含实例demo），可下载xlsx.core.min.js、excel.js包

分享一个我的小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表格的下载，也在网上看了很多案例和文档完成的，毕竟众人拾柴火焰高嘛。