1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.                    <div id="table1">
  9.                         <div class="tbHeadFix">
  10.                             <div class="theadDiv" id="table1_theadDiv">
  11.  
  12.                                 <div class="theadDivBox">
  13.                                     <table id="ta">
  14.                                         <thead>
  15.                                             <tr class="font-size-12 tr_head" >
  16.                                                 <th rowspan="2">
  17.                                                     <div class="col col0">品号</div>
  18.                                                 </th>
  19.                                                 <th rowspan="2">
  20.                                                     <div class="col col2">客户</div>
  21.                                                 </th>
  22.                                                 <th colspan="2">
  23.                                                     <div class="col col3">1月</div>
  24.                                                 </th>
  25.                                                 <th colspan="2">
  26.                                                     <div class="col col4">2月</div>
  27.                                                 </th>
  28.                                                 <th colspan="2">
  29.                                                     <div class="col col5">3月</div>
  30.                                                 </th>
  31.                                                 <th colspan="2">
  32.                                                     <div class="col col6">4月</div>
  33.                                                 </th>
  34.                                                 <th colspan="2">
  35.                                                     <div class="col col7">5月</div>
  36.                                                 </th>
  37.                                                 <th colspan="2">
  38.                                                     <div class="col col8">6月</div>
  39.                                                 </th>
  40.                                                 <th colspan="2">
  41.                                                     <div class="col col9">7月</div>
  42.                                                 </th>
  43.                                                 <th colspan="2">
  44.                                                     <div class="col col10">8月</div>
  45.                                                 </th>
  46.                                                 <th colspan="2">
  47.                                                     <div class="col col11">9月</div>
  48.                                                 </th>
  49.                                                 <th colspan="2">
  50.                                                     <div class="col col12">10月</div>
  51.                                                 </th>
  52.                                                 <th colspan="2">
  53.                                                     <div class="col col13">11月</div>
  54.                                                 </th>
  55.                                                 <th colspan="2">
  56.                                                     <div class="col col14">12月</div>
  57.                                                 </th>
  58.                                                 <th colspan="2">
  59.                                                     <div class="col col15">小计</div>
  60.                                                 </th>
  61.                                             </tr>
  62.                                             <tr class="font-size-12 tr_head" >
  63.                                                 <th>
  64.                                                     <div class="mcol">预算</div>
  65.                                                 </th>
  66.                                                 <th>
  67.                                                     <div class="mcol">决算</div>
  68.                                                 </th>
  69.                                                 <th>
  70.                                                     <div class="mcol">预算</div>
  71.                                                 </th>
  72.                                                 <th>
  73.                                                     <div class="mcol">决算</div>
  74.                                                 </th>
  75.                                                 <th>
  76.                                                     <div class="mcol">预算</div>
  77.                                                 </th>
  78.                                                 <th>
  79.                                                     <div class="mcol">决算</div>
  80.                                                 </th>
  81.                                                 <th>
  82.                                                     <div class="mcol">预算</div>
  83.                                                 </th>
  84.                                                 <th>
  85.                                                     <div class="mcol">决算</div>
  86.                                                 </th>
  87.                                                 <th>
  88.                                                     <div class="mcol">预算</div>
  89.                                                 </th>
  90.                                                 <th>
  91.                                                     <div class="mcol">决算</div>
  92.                                                 </th>
  93.                                                 <th>
  94.                                                     <div class="mcol">预算</div>
  95.                                                 </th>
  96.                                                 <th>
  97.                                                     <div class="mcol">决算</div>
  98.                                                 </th>
  99.                                                 <th>
  100.                                                     <div class="mcol">预算</div>
  101.                                                 </th>
  102.                                                 <th>
  103.                                                     <div class="mcol">决算</div>
  104.                                                 </th>
  105.                                                 <th>
  106.                                                     <div class="mcol">预算</div>
  107.                                                 </th>
  108.                                                 <th>
  109.                                                     <div class="mcol">决算</div>
  110.                                                 </th>
  111.                                                 <th>
  112.                                                     <div class="mcol">预算</div>
  113.                                                 </th>
  114.                                                 <th>
  115.                                                     <div class="mcol">决算</div>
  116.                                                 </th>
  117.                                                 <th>
  118.                                                     <div class="mcol">预算</div>
  119.                                                 </th>
  120.                                                 <th>
  121.                                                     <div class="mcol">决算</div>
  122.                                                 </th>
  123.                                                 <th>
  124.                                                     <div class="mcol">预算</div>
  125.                                                 </th>
  126.                                                 <th>
  127.                                                     <div class="mcol">决算</div>
  128.                                                 </th>
  129.                                                 <th>
  130.                                                     <div class="mcol">预算</div>
  131.                                                 </th>
  132.                                                 <th>
  133.                                                     <div class="mcol">决算</div>
  134.                                                 </th>
  135.                                                 <th>
  136.                                                     <div class="mcol">预算</div>
  137.                                                 </th>
  138.                                                 <th>
  139.                                                     <div class="mcol">决算</div>
  140.                                                 </th>
  141.                                             </tr>
  142.                                         </thead>
  143.                                         <tbody>
  144.                                             <tr class="font-size-12 tr_head" >
  145.                                                 <th rowspan="2">
  146.                                                     <div class="col col0">品号</div>
  147.                                                 </th>
  148.                                                 <th rowspan="2">
  149.                                                     <div class="col col2">客户</div>
  150.                                                 </th>
  151.                                                 <th colspan="2">
  152.                                                     <div class="col col3">1月</div>
  153.                                                 </th>
  154.                                                 <th colspan="2">
  155.                                                     <div class="col col4">2月</div>
  156.                                                 </th>
  157.                                                 <th colspan="2">
  158.                                                     <div class="col col5">3月</div>
  159.                                                 </th>
  160.                                                 <th colspan="2">
  161.                                                     <div class="col col6">4月</div>
  162.                                                 </th>
  163.                                                 <th colspan="2">
  164.                                                     <div class="col col7">5月</div>
  165.                                                 </th>
  166.                                                 <th colspan="2">
  167.                                                     <div class="col col8">6月</div>
  168.                                                 </th>
  169.                                                 <th colspan="2">
  170.                                                     <div class="col col9">7月</div>
  171.                                                 </th>
  172.                                                 <th colspan="2">
  173.                                                     <div class="col col10">8月</div>
  174.                                                 </th>
  175.                                                 <th colspan="2">
  176.                                                     <div class="col col11">9月</div>
  177.                                                 </th>
  178.                                                 <th colspan="2">
  179.                                                     <div class="col col12">10月</div>
  180.                                                 </th>
  181.                                                 <th colspan="2">
  182.                                                     <div class="col col13">11月</div>
  183.                                                 </th>
  184.                                                 <th colspan="2">
  185.                                                     <div class="col col14">12月</div>
  186.                                                 </th>
  187.                                                 <th colspan="2">
  188.                                                     <div class="col col15">小计</div>
  189.                                                 </th>
  190.                                             </tr>
  191.                                             <tr class="font-size-12 tr_head" >
  192.                                                 <th>
  193.                                                     <div class="mcol">预算</div>
  194.                                                 </th>
  195.                                                 <th>
  196.                                                     <div class="mcol">决算</div>
  197.                                                 </th>
  198.                                                 <th>
  199.                                                     <div class="mcol">预算</div>
  200.                                                 </th>
  201.                                                 <th>
  202.                                                     <div class="mcol">决算</div>
  203.                                                 </th>
  204.                                                 <th>
  205.                                                     <div class="mcol">预算</div>
  206.                                                 </th>
  207.                                                 <th>
  208.                                                     <div class="mcol">决算</div>
  209.                                                 </th>
  210.                                                 <th>
  211.                                                     <div class="mcol">预算</div>
  212.                                                 </th>
  213.                                                 <th>
  214.                                                     <div class="mcol">决算</div>
  215.                                                 </th>
  216.                                                 <th>
  217.                                                     <div class="mcol">预算</div>
  218.                                                 </th>
  219.                                                 <th>
  220.                                                     <div class="mcol">决算</div>
  221.                                                 </th>
  222.                                                 <th>
  223.                                                     <div class="mcol">预算</div>
  224.                                                 </th>
  225.                                                 <th>
  226.                                                     <div class="mcol">决算</div>
  227.                                                 </th>
  228.                                                 <th>
  229.                                                     <div class="mcol">预算</div>
  230.                                                 </th>
  231.                                                 <th>
  232.                                                     <div class="mcol">决算</div>
  233.                                                 </th>
  234.                                                 <th>
  235.                                                     <div class="mcol">预算</div>
  236.                                                 </th>
  237.                                                 <th>
  238.                                                     <div class="mcol">决算</div>
  239.                                                 </th>
  240.                                                 <th>
  241.                                                     <div class="mcol">预算</div>
  242.                                                 </th>
  243.                                                 <th>
  244.                                                     <div class="mcol">决算</div>
  245.                                                 </th>
  246.                                                 <th>
  247.                                                     <div class="mcol">预算</div>
  248.                                                 </th>
  249.                                                 <th>
  250.                                                     <div class="mcol">决算</div>
  251.                                                 </th>
  252.                                                 <th>
  253.                                                     <div class="mcol">预算</div>
  254.                                                 </th>
  255.                                                 <th>
  256.                                                     <div class="mcol">决算</div>
  257.                                                 </th>
  258.                                                 <th>
  259.                                                     <div class="mcol">预算</div>
  260.                                                 </th>
  261.                                                 <th>
  262.                                                     <div class="mcol">决算</div>
  263.                                                 </th>
  264.                                                 <th>
  265.                                                     <div class="mcol">预算</div>
  266.                                                 </th>
  267.                                                 <th>
  268.                                                     <div class="mcol">决算</div>
  269.                                                 </th>
  270.                                             </tr>
  271.                                         </tbody>
  272.                                     </table>
  273.                                 </div>
  274.                             </div>
  275.  
  276.                     <!--表格1结束-->
  277.         <button onclick="javascript:method1('ta')">导出EXCEL</button>
  278.         <script type="text/javascript">
  279.             var idTmr;
  280. function  getExplorer() {
  281.     var explorer = window.navigator.userAgent ;
  282.     //ie
  283.     if (explorer.indexOf("MSIE") >= 0) {
  284.         return 'ie';
  285.     }
  286.     //firefox
  287.     else if (explorer.indexOf("Firefox") >= 0) {
  288.         return 'Firefox';
  289.     }
  290.     //Chrome
  291.     else if(explorer.indexOf("Chrome") >= 0){
  292.         return 'Chrome';
  293.     }
  294.     //Opera
  295.     else if(explorer.indexOf("Opera") >= 0){
  296.         return 'Opera';
  297.     }
  298.     //Safari
  299.     else if(explorer.indexOf("Safari") >= 0){
  300.         return 'Safari';
  301.     }
  302. }
  303. function method1(tableid) {//整个表格拷贝到EXCEL中
  304.     if(getExplorer()=='ie')
  305.     {
  306.         var curTbl = document.getElementById(tableid);
  307.         var oXL = new ActiveXObject("Excel.Application");
  308.  
  309.         //创建AX对象excel
  310.         var oWB = oXL.Workbooks.Add();
  311.         //获取workbook对象
  312.         var xlsheet = oWB.Worksheets(1);
  313.         //激活当前sheet
  314.         var sel = document.body.createTextRange();
  315.         sel.moveToElementText(curTbl);
  316.         //把表格中的内容移到TextRange中
  317.         sel.select();
  318.         //全选TextRange中内容
  319.         sel.execCommand("Copy");
  320.         //复制TextRange中内容
  321.         xlsheet.Paste();
  322.         //粘贴到活动的EXCEL中
  323.         oXL.Visible = true;
  324.         //设置excel可见属性
  325.  
  326.         try {
  327.             var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  328.         } catch (e) {
  329.             print("Nested catch caught " + e);
  330.         } finally {
  331.             oWB.SaveAs(fname);
  332.  
  333.             oWB.Close(savechanges = false);
  334.             //xls.visible = false;
  335.             oXL.Quit();
  336.             oXL = null;
  337.             //结束excel进程，退出完成
  338.             //window.setInterval("Cleanup();",1);
  339.             idTmr = window.setInterval("Cleanup();", 1);
  340.  
  341.         }
  342.  
  343.     }
  344.     else
  345.     {
  346.         tableToExcel('ta');
  347.     }
  348. }
  349. function Cleanup() {
  350.     window.clearInterval(idTmr);
  351.     CollectGarbage();
  352. }
  353. var tableToExcel = (function() {
  354.     var uri = 'data:application/vnd.ms-excel;base64,',
  355.     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>',
  356.     base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
  357.     format = function(s, c) {
  358.         return s.replace(/{(\w+)}/g,
  359.         function(m, p) { return c[p]; }) }
  360.             return function(table, name) {
  361.                 if (!table.nodeType) table = document.getElementById(table)
  362.                 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
  363.                 window.location.href = uri + base64(format(template, ctx))
  364.               }
  365. })();
  366.         </script>
  367.     </body>
  368. </html>

js导出表格到excel（合并头）的更多相关文章

  1. 【js】js导出表格到excel

    js: function method(tableid) //读取表格中每个单元到EXCEL中 { var curTbl = document.getElementById(tableid); var ...

  2. java代码导出数据到Excel、js导出数据到Excel(三)

     jsp内容忽略,仅写个出发按钮:          <button style="width: 100px" onclick="expertExcel()&quo ...

  3. JS导出、导入EXCEL(案例)

    插件下载地址:http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js 1.导出excel <!DOCTYPE html> <html> ...

  4. Vue 导出表格为Excel

    放法有多种,我这里是直接转JSON数据为Excel. 1.既然要使用,那首先当然是安装依赖,在终端命令输入: npm install -S file-saver xlsx npm install -D ...

  5. JS 导出Table为excel的三种可行方法

    [html] view plain copy<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. qt技巧--使用html导出表格替代excel

            曾经为qt不能直接导出excel而困扰,后来经过深入了解,得知qt支持xml国际语言,html是xml的一种.html是做网页的,相信大家比较熟悉.所以使用html的<table ...

  7. php JS 导出表格特殊处理

    但是这样导出身份证号会变为科学计数: 解决方法就是: 我们了解一下excel从web页面上导出的原理.当我们把这些数据发送到客户端时,我们想让客户端程序(浏览器)以excel的格式读取 它,所以把mi ...

  8. [转]纯js导出json到excel(支持chrome)

    转自:http://blog.csdn.net/educast/article/details/52775559 function JSONToExcelConvertor(JSONData, Fil ...

  9. js导出表格数据

    考虑到浏览器兼容性问题,采用原生js和后台交互下载网页数据 js: var table = $('.table-panel table'); // Header var tdData ="& ...

  10. js导出table到excel，同时兼容FF和IE

    前台调用(第一个参数是table的id): <input value="导出" type="button" /> function toExcel( ...

随机推荐

  1. PHP 网页 apache24+php8 yii basic

    PHP官网下载 https://windows.php.net/download/ 在PHP官网点击Download下载时不管选择哪个版本的都有两个类型 : Non Thread Safe(非线程安全 ...

  2. mysql 备份定时任务

    #!/bin/bash rq=`date +%Y-%m-%d-%H` #日期 #数据库信息 host=127.0.0.1 user=root password=xxx dbname=script #放 ...

  3. Kubernetes部署的10个注意事项

    摘要 容器开发有望在云中实现前所未有的可移植性和可扩展 性.此外,DevOps 开发和文化实践也有助于提升业务价 值和响应能力.但是,在开始第一个容器开发项目之前, 有一些问题需要考虑清楚:我们应该使 ...

  4. C# 海康威视网络半球摄像头回调YV12取画面

    海康网络摄像头回调取画面,网口最好用千兆的网卡来做,开始用笔记本的百兆网口,不管怎么优化都是卡顿的, 后来用千兆网卡台式机的,基本就没有卡顿了,取图再加上运动检测处理,基本上十几毫秒每帧. 用回调方式 ...

  5. c# Winform 缓动动画

    一.定义缓动动画类public class AnimationHelper { Timer animationTimer = new Timer(); double velocity = 0.0; P ...

  6. MassTransit - .NET Core 的分布式应用程序框架

    简介 MassTransit 是一个免费的.开源的.NET 分布式应用程序框架.MassTransit 使创建应用程序和服务变得容易,这些应用程序和服务利用基于消息的松散耦合异步通信来实现更高的可用性 ...

  7. 使用 WSDL 指定的标准 SOAP 消息格式

    为 XML 文档(定义 Web 服务)定义架构的行业标准 Web 服务描述语言 (WSDL) 提供了两个主要的 SOAP 格式设置选项.这两个选项均在 XML 元素中指定,而不在主 WSDL 命名空间 ...

  8. python+接口参数化（ddt和pytest.mark.parametrize()）使用

    一.ddt(基于unittest) 实例:字典解包[{},{}] test_data=t.read_excel(mode,case_list)@ddt class Interface(unittest ...

  9. gopher必读文章

    Getting Started with Go Programminghttps://www.programiz.com/golang/getting-startedHow to Write Go C ...

  10. 算法学习—————PAM回文自动机

    时隔一年,第一次学习新的算法 原理和AC自动机差不多 基本思想: 两棵树分别代表奇偶 在一个回文串两边同时填上相同字符可以得到另一个回文串,以此构建两棵树 树上维护信息: 节点表示的回文串为当前位置的 ...