【HTML5版】导出Table数据并保存为Excel

（以下内容与StackOverflow中的答案有重合，那个3条赞同的我认为是最佳答案，可惜我没法顶他……）

准备工作

1. 创建一个空白的Excel文档
2. 另存为“XML表格”，xml格式
3. 好了，模版搞定

图省事儿的也可以直接使用我的模板（这一段我使用了Handlebars，以便将来填充数据）

template = ‘
    {{#each tables}}

复制表格数据

复制数据比较简单了。如前面模版所示，这里我很野蛮的直接复制thead和tbody的全部代码，填充内容。当然为了体现用户操作，我只复制显示的tr。这里需要注意的是，jQuery判断一个dom是否处于显示状体基于以下3点：

1. display:none
2. 表单元素，type="hidden"
3. 宽高为0
4. 父级以上节点不显示，自己也不会显示

所以，不能先clone()再find(‘:hidden‘).remove()，因为没添加到主Dom树的节点宽高都是0，也就会被认为还没显示，这下就都干掉了。

输出内容

套用模版之后，我们就有了完整的表格数据。接下来，我们需要把其转换成base64格式，以便套用dataURI输出。于是便要使用btoa这个函数（将二进制数据转换成base64格式的字符串，HTML5的大礼之一，操作二进制的API），不过注意，这个函数不能直接转换普通unicode字符，不然大多数浏览器都会抛出异常。所以需要先经过两步转换：

function base64(string) {
  return window.btoa(unescape(encodeURIComponent(string)));
}

（MDN中还推荐了另外一种做法，通过Typed Array做中介，我没有实操，有兴趣的可以试下）

然后配上base64头和mime类型，就可以触发下载了：

var uri = ‘data:application/vnd.ms-excel;base64,‘;
location.href = uri + base64(template(tables));

提升体验

貌似到这里就完成了，不过作为一名挂职产品总监的码农，我很难容忍下载的文件文件名是“下载”，而且还没有扩展名（Windows 8下没有；Windows 7 和 Mac下会有.xls的扩展名，我认为和已装软件注册过的mime类型有关）。

这是个用在内部管理后台的需求，我之前曾要求大家必须使用Chrome访问后台；而且我知道，Chrome已经支持里的download属性。那么这就好办了，因为onclick事件会先于系统默认行为触发，所以我可以在这个事件的处理函数中将生成的Base64放在被点击按钮的href里，并将其download属性设为容易理解的“某年某月末日至某年某月某日广告数据分析.xls”。至此，此项功能宣告圆满。

HTML部分（使用到Bootstrap和Handlebars）：

 导出

JavaScript部分

tableToExcel: function (tableList, name) {
  var tables = [],
      uri = ‘data:application/vnd.ms-excel;base64,‘,
      template = Handlebars.compile(‘
{{#each tables}}{{{this}}}{{/each}}‘);

  for (var i = 0; i