html table导出到Excel中，不走后台，js完成

静态表格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>

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

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

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

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

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

附上源码注释地址：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中，不走后台，js完成的更多相关文章

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中的解决办法
第一部分:html+js 1.需要使用的表格数据(先不考虑动态生成的table) <table class="table tableStyles" id="tabl ...
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 ...
将datagrid中数据导出到excel中 -------<<工作日志2014-6-6>>
前台datagrid数据绑定 #region 导出到excel中 /// <summary> /// 2014-6-6 /// </summary> / ...
HTML Table导出为Excel的方法
HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...
将Datagridview中的数据导出至Excel中
首先添加一个模块ImportToExcel,并添加引用然后导入命名空间: Imports Microsoft.Office.Interop Imports System.Da ...
html table 保存到excel中
引用:HTML中的table导出为Excel文件 <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

xorm
https://github.com/go-xorm/xorm Simple and Powerful ORM for Go, support mysql,postgres,tidb,sqlite3, ...
活动推荐 | 听说 PHP 是最好的语言 - 和 OneAPM 一起參与上海 PHPCon 技术盛宴吧
2015年7月11日,第三届 PHP 大会就要和各位 PHPer 正式见面了.本年度,由 Think 技术社区主办,OneAPM 赞助的 PHPCon2015 是为全部热爱技术的 PHPer 提供的最 ...
qt使用中的一些问题(linux)
ui_xxx.h的问题工程中(工作空间)中包含的ui_xxx.h文件是系统自动生成的.这个是xxx.ui的创建文件来的,xxx.ui界面上的都是ui_xxx.h在控制的,在项目里是不显示这个头文件的 ...
cgic 中文文档
CGIC英文文档地址:https://boutell.com/cgic/ cgic是用c写cgi程序的一个很小的库,所以英文文档也很少,为了便于日后复习翻看,心血来潮,翻译了一遍. 1. 什么是cgi ...
java.lang.ClassNotFoundException: Didn't find class "org.reactivestreams.Publisher" on path
缺少jar包 reactive-streams-1.0.0.jar 和 reactive-streams-1.0.0-sources.jar 常用于 Rxjava 开发过程中 <?xml ...
《unix环境高级编程》学习笔记【原创】
本文基于unix环境高级编程的学习的笔记,写的比较简如有不对,欢迎指点. 简单的描述下面函数的功能改变ctr+c信号原本的作用终止程序,在按下中断键的时候输出一句话. while循环主要读取用户的输入 ...
codeforces Codeforces Round #273 (Div. 2) 478B
B. Random Teams time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...
SDUT OJ 进制转换
进制转换 Time Limit: 1000MS Memory limit: 65536K 题目描述输入一个十进制数N,将它转换成R进制数输出. 输入输入数据包含多个测试实例,每个测试实例包含两个整 ...
linux应用之openssh server安装及配置（centos）
安装OpenSSH Server 首先,我们搜索一下CentOS的软件库里面有没有已经定义好的SSH服务器包: $ yum search ssh ... ... openssh.x86_64 : An ...
slim.flatten——将输入扁平化但保留batch_size,假设第一维是batch
slim.flatten(inputs,outputs_collections=None,scope=None) (注:import tensorflow.contrib.slim as slim) ...

html table导出到Excel中，不走后台，js完成

html table导出到Excel中，不走后台，js完成的更多相关文章

随机推荐

热门专题