HTML table导出到Excel中的解决办法

标签：品牌   end   bsp   js代码   collect   佛山   github   其他   demo   

第一部分：html+js

1.需要使用的表格数据（先不考虑动态生成的table）

    table class="table tableStyles" id="tables">
        caption>不正经的统计表caption>
        thead>
            tr>
                th>品牌th>
                th>门店th>
                th>本周回访th>
                th>本月回访th>
                th>总回访th>
                th>本周成交数th>
                th>本月成交数th>
                th>总成交数th>
                th>异常量th>
                th>成交转化率th>
                th>经手人/th>
            tr>
        thead>
        tbody>
            tr>
                td rowspan="3">华为td>
                td>华为深圳店td>
                td>20td>
                td>80td>
                td>500td>
                td>1td>
                td>3td>
                td>20td>
                td>1td>
                td>4.0%td>
                td>黄生td>
            tr>
            tr>
                td>华为东莞店td>
                td>20td>
                td>80td>
                td>500td>
                td>1td>
                td>3td>
                td>20td>
                td>1td>
                td>4.0%td>
                td>黄生td>
            tr>
            tr>
                td>华为佛山店td>
                td>20td>
                td>80td>
                td>500td>
                td>1td>
                td>3td>
                td>20td>
                td>1td>
                td>4.0%td>
                td>黄生td>
            tr>
            tr>
                td rowspan="3">小米td>
                td>米家深圳店td>
                td>20td>
                td>80td>
                td>500td>
                td>1td>
                td>3td>
                td>20td>
                td>1td>
                td>4.0%td>
                td>林生td>
            tr>
        tbody>
    table>
    

View Code

2.Js代码

①利用html5的download属性，点击下载该文件

a id="dlink"  style="display:none;">a>
input type="button" onclick="tableToExcel(‘tables‘, ‘name‘, ‘myfile.xls‘)" value="Export to Excel">

‘, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }; return function (table, name, filename) { if (!table.nodeType) table = document.getElementById(table) var ctx = { worksheet: name || ‘Worksheet‘, table: table.innerHTML } document.getElementById("dlink").href = uri + base64(format(template, ctx)); document.getElementById("dlink").download = filename; document.getElementById("dlink").click(); } })() View Code

②创建ActiveXObject对象复制到表格中

input id="Button1" type="button" value="导出EXCEL" onclick="javascript:excels(‘tables‘)" />

‘, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }; return function(table, name) { if (!table.nodeType) table = document.getElementById(table); var ctx = {worksheet: name || ‘Worksheet‘, table: table.innerHTML}; window.location.href = uri + base64(format(template, ctx)) } })(); View Code

第二部分：分析测试
测试环境（谷歌，火狐，IE，EDGE，QQ浏览器）

①.真正起到作用的是a标签的属性，input按钮只是起到了一个过渡到download属性的作用；

    其中有编码解码，需要注意中文乱码情况；

    测试只有谷歌和火狐起作用，且只有谷歌下载的文件名是“下载.xls”，火狐的文件名像是编码后的~

　双核浏览器当然也只有chrome内核下有效果~~

　我比较喜欢的一点，html中合并的单元格导出到excel中继续保留合并效果~~

    谷歌截图：

    火狐截图:

 ②.主要是利用AX对象创建excel

　　在IE下不行，会提示错误“不能使用啥对象什么什么”

　　难道是需要安装Office软件？没试过。。

这几个浏览器中，谷歌的体验稍微好一点，还可以自己带个命名什么的~~，其他体验都不是很友好~~

还有其他的问题是我继续需要想的，表格内容分页情况导出？筛选条件后导出全部？等等等~

附上源码注释地址：https://github.com/Chuyue0/javascript-demo/blob/master/tableExporeExcel.html

 开发过程中有很多预料不到的事，继续加油吧！

~~~~~~~~~~~~剩到最后的解决办法是利用插件~~~~~~~~~~~~

比如github上的

1020 Star：https://github.com/kayalshri/tableExport.jquery.plugin

270 Star：https://github.com/clarketm/TableExport

159 Star：https://github.com/huanz/tableExport

说明一下，星星多的插件是有base64编码，所以还额外需要js脚本！

个人比较喜欢最少星星的库，感觉明了清晰，可以按需加载~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

HTML table导出到Excel中的解决办法

标签：品牌   end   bsp   js代码   collect   佛山   github   其他   demo   

原文地址：http://www.cnblogs.com/anniey/p/7738278.html