<!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. msfpayload的用法

    daniel@daniel-mint ~/msf/metasploit-framework $ ruby msfpayload windows/exec CMD=calc.exe C WARNING: ...

  2. Android开发之程序猿必需要懂得Android的重要设计理念

         前几天去參加了带着自己的作品去參加服务外包大赛,由于签位抽到的比較靠后就等待了蛮久,就跟坐在前面的一起參赛的选手開始讨论Android的开发经验.各自给对方展示了自己的作品,小伙伴就建议我看 ...

  3. collections库的namedtuple+pytest的使用

    from collections import namedtupleTask=namedtuple('Task',['summary','owner','done','id'])Task.__new_ ...

  4. 在egg中配置 sequelize

    如何在eggjs中引入 sequlize 安装 第一步,在项目中安装 egg-sequelize插件和mysql插件 npm install --save egg-sequelize mysql2 第 ...

  5. react 小技巧

    1.当从redux里异步获取数据时,在render里渲染dom会出现数据还未获取到的情况,这时可以用 usableSchemas.data.vertexes && usableSche ...

  6. Ubuntu14.04.1LTS不能上网解决方法之一

    我们在装好了Ubuntu之后,打开浏览器,显示Server not found. 1.点击网络图标,显示如下: 2.进入etc/NetworkManager,找到 Networkmanager.con ...

  7. Linux服务器上创建日志服务器和FTP服务器

    参考地址: http://www.111cn.net/sys/CentOS/81133.htm https://www.cnblogs.com/laoxiajiadeyun/p/9943742.htm ...

  8. 【模板篇】NTT和三模数NTT

    之前写过FFT的笔记. 我们知道FFT是在复数域上进行的变换. 而且经过数学家的证明, DFT是复数域上唯一满足循环卷积性质的变换. 而我们在OI中, 经常遇到对xxxx取模的题目, 这就启发我们可不 ...

  9. PHP中session存储及删除变量的方法

    Session 变量保存的信息是单一用户的,并且可供应用程序中的所有页面使用.但是session会话信息是临时的,在用户离开网站后就会被删除.如果需要永久储存信息,就需要把数据存储在数据库中. < ...

  10. Windows win32 API 类库 硬件

    // 硬件 Win32_Processor, // CPU 处理器 Win32_PhysicalMemory, // 物理内存条 Win32_Keyboard, // 键盘 Win32_Pointin ...