<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table border>

        <tr style="text-align: center;">

            <th rowspan="2">姓名</th>

            <th colspan="2">一月</th>

            <th colspan="2">二月</th>

        </tr>

        <tr style="text-align: center;">

            <th>收入</th>

            <th>支出</th>

            <th>收入</th>

            <th>支出</th>

        </tr>

        <tr style="text-align: center;">

            <td>张三</td>

            <td>10元</td>

            <td>20元</td>

            <td>15元</td>

            <td>25元</td>

        </tr>

        <tr style="text-align: center;">

            <td>李四</td>

            <td>100元</td>

            <td>200元</td>

            <td>150元</td>

            <td>250元</td>

        </tr>

    <table>

    <button onclick="tableToExcel()"">导出excel</button>

    <script type="text/javascript">

        function tableToExcel(){

            //要导出的数据

            var exportData = [

                {

                    name: '张三',

                    month1: {

                        income: '10元',

                        outlay: '20元'

                    },

                    month2: {

                        income: '15元',

                        outlay: '25元'

                    }

                },

                {

                    name: '李四',

                    month1: {

                        income: '100元',

                        outlay: '200元'

                    },

                    month2: {

                        income: '150元',

                        outlay: '250元'

                    }

                }

            ]

            // 自定义的表格

            var tableStr = ` <tr style="text-align: center;">

                                <th rowspan="2">姓名</th>

                                <th colspan="2">一月</th>

                                <th colspan="2">二月</th>

                            </tr>

                            <tr style="text-align: center;">

                                <th>收入</th>

                                <th>支出</th>

                                <th>收入</th>

                                <th>支出</th>

                            </tr>`;

            for(let item of exportData) {

                tableStr += `<tr style="text-align: center;">

                                <td>${item.name}</td>

                                <td>${item.month1.income}</td>

                                <td>${item.month1.outlay}</td>

                                <td>${item.month2.income}</td>

                                <td>${item.month2.outlay}</td>

                            </tr>`;

            }

            //Worksheet名

            var worksheet = 'Sheet1'

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

            // 真正要导出（下载）的HTML模板

            var exportTemplate = `<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 syle="table-layout: fixed;word-wrap: break-word; word-break: break-all;">${tableStr}</table>

                                </body>

                            </html>`;

            //下载模板

            window.location.href = uri + base64(exportTemplate)

        };

        //输出base64编码

        function base64 (s) {

            return window.btoa(unescape(encodeURIComponent(s)))

        };

    </script>

</body>

</html>

ps：要想修改导出的excel表中表格的格式，可直接在上面的模板中给相应的table、tr、td、th等标签添加css样式即可。

js导出复杂表头（多级表头）的excel的更多相关文章

  1. element ui表格常用功能如：导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求

    <template> <div class="table-cooperte"> <el-table :data="tableData&quo ...

  2. js导出到word、json、excel、csv

    tableExport.js ///*The MIT License (MIT) //Copyright (c) 2014 https://github.com/kayalshri/ //Permis ...

  3. JS 导出网页中Table内容到excel

    <html> <head> <script type="text/javascript" language="javascript" ...

  4. 导出多级表头表格到Excel

    方法一:用NPOI定义多级表头导出: 引用头: using NPOI.DDF; using NPOI.OpenXmlFormats.Wordprocessing; using NPOI.HSSF.Us ...

  5. js导出excel增加表头、mso-number-format定义数据格式

    问题1:增加表头 js导出表格时,只会导出table里的展现出的内容,如需增加表头等内容需要在页面获取的字符串中拼接表头的相关字符串,详细介绍如下: tableString:新增的表头内容字符串: c ...

  6. Html Table用JS导出excel格式问题 导出EXCEL后单元格里的000412341234会变成412341234 7-14 会变成 2018-7-14(7月14) 自定义格式 web利用table表格生成excel格式问题 js导出excel增加表头、mso-number-format定义数据格式 数字输出格式转换 mso-number-format:"\@"

    Html Table用JS导出excel格式问题 我在网上找的JS把HTML Tabel导出成EXCEL.但是如果Table里的数字内容为0开的的导成Excel后会自动删除0,我想以text的格式写入 ...

  7. js导出excel

    function inportEx() { $("#btnEx").text("导出中..."); var fugNumber = "";/ ...

  8. EasyUI 如何结合JS导出Excel文件

    出处:http://blog.csdn.net/jumtre/article/details/41119991 EasyUI 如何结合JS导出Excel文件 分类: 技术 Javascript jQu ...

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

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

  10. Qt实现表格树控件-支持多级表头

    目录 一.概述 二.效果展示 三.实现方式 四.多级表头 1.数据源 2.表格 3.QStyledItemDelegate绘制代理 五.测试代码 六.相关文章 原文链接:Qt实现表格树控件-支持多级表 ...

随机推荐

  1. 【C++第一个Demo】---控制台RPG游戏3【登陆菜单树】

    [登陆系统--树结构] 1 首先我这里设计,由一个基类MainMenu构建树结构,并实现控制台上菜单之间的切换和返回操作 #ifndef _UI_BASE_H_ #define _UI_BASE_H_ ...

  2. docker x509: certificate has expired or is not yet valid

    系统环境:centos 6.5 内核版本:2.6.32-696.1.1.el6.x86_64 程序版本:Docker version 1.7.1, build 786b29d/1.7.1 问题:下载镜 ...

  3. [轉]udp_sendmsg空指针漏洞分析 by wzt

    udp_sendmsg空指针漏洞分析    by wzt 漏洞描述: 由于Linux ipv4协议栈中udp_sendmsg()函数设计上存在缺陷, 导致struct rtable *rt以空指针形式 ...

  4. CTU OPEN 2017 Punching Power /// 最大独立集

    题目大意: 给定n 给定n个机器的位置 要求任意两个机器间的距离至少为1.3米 求最多能选择多少个机器 至少为1.3米 说明若是位于上下左右一步的得放就不行 将机器编号 将不能同时存在的机器连边 此时 ...

  5. 博客中引入了gitment评论系统

    官方github地址:https://github.com/imsun/gitment 官方中文说明地址:https://imsun.net/posts/gitment-introduction/ 官 ...

  6. CSS新特性（3D转换，perspective（透视），transfrom-style（子元素是否开启三维环境））

    1. 三维坐标系(里面的值不能省略,没有就写 0 ) x 轴:水平向右    注意:x 右边是正值,左边是负值 y轴: 垂直向下    注意:y 下面是正值,上面是负值 z轴:垂直屏幕     注意: ...

  7. Android多线程：深入分析 Handler机制源码（二）

    前言 在Android开发的多线程应用场景中,Handler机制十分常用 接下来,深入分析 Handler机制的源码,希望加深理解 目录 1. Handler 机制简介 定义一套 Android 消息 ...

  8. python发送微信及企业微信消息

    1.发送微信消息 直接使用第三方库 itchat,其文档中有详细使用方式:https://itchat.readthedocs.io/zh/latest/ 如下实例为 发送群聊信息 # -*- cod ...

  9. (好题)2017-2018 ACM-ICPC, Asia Tsukuba Regional Contest F Pizza Delivery

    题意:给n个点m条边的有向图.每次使一条边反向,问你1到2的最短路变短,变长,还是不变. 解法:遇到这种题容易想到正向求一遍最短路d1,反向再求一遍最短路d2.纪录原图上的最短路为ans,然后分开考虑 ...

  10. 【LeetCode】BFS || DFS [2017.04.10--2017.04.17]

    [102] Binary Tree Level Order Traversal [Medium-Easy] [107] Binary Tree Level Order Traversal II [Me ...