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

第一部分：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>20</td>

                <td>80</td>

                <td>500</td>

                <td>1</td>

                <td>3</td>

                <td>20</td>

                <td>1</td>

                <td>4.0%</td>

                <td>黄生</td>

            </tr>

            <tr>

                <td>华为东莞店</td>

                <td>20</td>

                <td>80</td>

                <td>500</td>

                <td>1</td>

                <td>3</td>

                <td>20</td>

                <td>1</td>

                <td>4.0%</td>

                <td>黄生</td>

            </tr>

            <tr>

                <td>华为佛山店</td>

                <td>20</td>

                <td>80</td>

                <td>500</td>

                <td>1</td>

                <td>3</td>

                <td>20</td>

                <td>1</td>

                <td>4.0%</td>

                <td>黄生</td>

            </tr>

            <tr>

                <td rowspan="3">小米</td>

                <td>米家深圳店</td>

                <td>20</td>

                <td>80</td>

                <td>500</td>

                <td>1</td>

                <td>3</td>

                <td>20</td>

                <td>1</td>

                <td>4.0%</td>

                <td>林生</td>

            </tr>

        </tbody>

    </table>

2.Js代码

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

<a id="dlink"  style="display:none;"></a>

<input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel">

    <script type="text/javascript">

        var tableToExcel = (function () {

            var uri = 'data:application/vnd.ms-excel;base64,',

                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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]; }) };

            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();

            }

        })()

    </script>

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

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

    <script type="text/javascript">

        var timer;

        function getExplorer(){//获取浏览器

            var explorer=window.navigator.userAgent;

            if(explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)){

                return 'ie';

            }else if (explorer.indexOf("Firefox") >= 0) {

                return 'Firefox';

            }else if(explorer.indexOf("Chrome") >= 0){

                return 'Chrome';

            }else if(explorer.indexOf("Opera") >= 0){

                return 'Opera';

            }else if(explorer.indexOf("Safari") >= 0){

                return 'Safari';

            }

        }

        function excels(table){

            if(getExplorer()=='ie'){

                var curTbl = document.getElementById(table);

                var oXl=new ActiveXObject("Excel.Application");//创建AX对象excel

                var oWB = oXL.Workbooks.Add();//获取workbook对象

                var xlsheet = oWB.Worksheets(1);//激活当前sheet

                var sel = document.body.createTextRange();

                sel.moveToElementText(curTbl);//把表格中的内容移到TextRange中

                sel.select;//全选TextRange中内容

                sel.execCommand("Copy");//复制TextRange中内容

                xlsheet.Paste();//粘贴到活动的EXCEL中

                oXL.Visible = true;//设置excel可见属性

                try{

                    var filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");

                }catch(e){

                    window.print("Nested catch caught " + e);

                }finally{

                    oWB.SaveAs(filename);

                    oWB.Close(savechanges = false);

                    oXL.Quit();

                    oXL = null;//结束excel进程，退出完成

                    timer = window.setInterval("Cleanup();", 1);

                }

            }else{

                tableToExcel("tables");

            }

        }

        function Cleanup(){

            window.clearInterval(timer);

            CollectGarbage();//CollectGarbage,是IE的一个特有属性,用于释放内存的

        }

        var tableToExcel=(function(){

            var uri = 'data:application/vnd.ms-excel;base64,',

                template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></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]; }) };

            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))

            }

        })();

    </script>

第二部分：分析测试
测试环境（谷歌，火狐，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中的解决办法的更多相关文章

html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
C# html的Table导出到Excel中
C#中导出Excel分为两大类.一类是Winform的,一类是Web.今天说的这一种是Web中的一种,把页面上的Table部分导出到Excel中. Table导出Excel,简单点说,分为以下几步: ...
html table导出到Excel中，不走后台，js完成
静态表格table <table class="table tableStyles" id="tables"> <caption>不正经 ...
html table导出到Excel中，走后台保存文件，js并调用另保存
tableToExcel工具类,此工具类指定格式的表格进行转Excel 格式:其中不能带有thead,tbody和th标签 <table> <tr> <td>表头1 ...
【ASP.NET】C# 将HTML中Table导出到Excel（TableToExcel）
首先,说下应用场景就是,把页面呈现的Table 导出到Excel中.其中使用的原理是前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...
HTML Table导出为Excel的方法
HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...
将datagrid中数据导出到excel中 -------<<工作日志2014-6-6>>
前台datagrid数据绑定 #region 导出到excel中 /// <summary> /// 2014-6-6 /// </summary> / ...
将Datagridview中的数据导出至Excel中
首先添加一个模块ImportToExcel,并添加引用然后导入命名空间: Imports Microsoft.Office.Interop Imports System.Da ...
html table 保存到excel中
引用:HTML中的table导出为Excel文件 <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

16.4-uC/OS-III同步（任务信号量）
信号量和消息队列均是单独的内核对象,是独立于任务存在的. 任务信号量仅发布给一个特定任务 .任务消息队列可以发布给多个任务. 任务信号量伴随任务存在,只要创建了任务,其任务信号量就是该任务的一个数 ...
Oracle单行函数
一.尽管各个数据库都是支持sql语句的.可是每一个数据库也有每一个数据库所支持的操作函数,这些就是单行函数.假设想进行数据库开发的话.除了要回使用sql语句外,就是要多学习函数. 1.单行函数的分类: ...
python dict的函数
1. dict.clear() 删除字典内所有元素 2. dict.copy() 返回一个字典的浅复制 3. dict.fromkeys(seq[, val]) 创建一个新字典,以序列 seq 中元素 ...
Applet程序组件与AJAX技术
Applet 定义 Applet是一种运行于Web客户端环境下的Java程序组件. 工作原理 Applet以代码的形式嵌入Web页面中,用标签<applet></applet> ...
QT中显示gif图片方法
movie = new QMovie(":/timg.gif"); movie->setScaledSize(QSize(,)); ui->giflabel->s ...
P1605 迷宫
P1605 迷宫这是一道毒瘤题... 这是一道广搜题 bfs ... 代码: #include<cstdio> #include<iostream> #include< ...
windows安装composer总结
1.直接去网吧下载windows安装EXE程序,傻瓜式安装,so easy. 2.通过命令行安装,可以直接在php目录跑起来 php -r "readfile('https://getcom ...
window安装ab压力测试并使用
ab是Apache HTTP server benchmarking tool的缩写,可以用以测试HTTP请求的服务器性能,也是业界比较流行和简单易用的一种压力测试工具包 1.下载ab工具进入apa ...
【题解】Luogu P4054 [JSOI2009]计数问题
原题传送门我自闭了qaq 这道题非常简单,因为1<=c<=100,所以直接对每个c开二维树状数组,操作就跟模板一样写码5分钟,调码半小时,这道题的输入顺序是x1,x2,y1,y2,我真 ...
.NET ActiveMQ类库
ActiveMQ .NET类库 ActiveMQ是一种开源的,实现了JMS规范的,面向消息(MOM)的中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信. 0. 准备使用Nuget ...

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

HTML table导出到Excel中的解决办法的更多相关文章

随机推荐

热门专题