<!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. 导数与偏导数 Derivative and Partial Derivative

    之前做了很长时间“罗辑思维”的听众,罗胖子曾经讲起过,我们这一代人该如何学习.其中,就讲到我们这个岁数,已经不可能再去从头到尾的学习一门又一门工具课程了,而是在学习某一领域时,有目的的去翻阅工具课程中 ...

  2. java多线程学习笔记（三）

    java多线程下的对象及变量的并发访问 上一节讲到,并发访问的时候,因为是多线程,变量如果不加锁的话,会出现“脏读”的现象,这个时候需要“临界区”的出现去解决多线程的安全的并发访问.(这个“脏读”的现 ...

  3. 抓取猫眼TOP100的数据

    import requests import re import json from multiprocessing import Pool from multiprocessing import M ...

  4. mysql 密码

    http://www.cnblogs.com/jonsea/p/5510219.html character-set-server=utf8 mysql 修改密码: ALTER USER 'root' ...

  5. shell eval命令

    1. eval command-line 其中command-line是在终端上键入的一条普通命令行.然而当在它前面放上eval时,其结果是shell在执行命令行之前扫描它两次.如: pipe=&qu ...

  6. Mysq sql语句教程

    mysql管理命令  show  databases;  显示服务器上当前所有的数据库  use  数据库名称;  进入指定的数据库  show  tables;  显示当前数据库中所有的数据表  d ...

  7. Pytest使用自定义标记mark只执行部分用例

    • 场景:只执行符合要求的某一部分用例 可以把一个web项目划分多个模块,然后指定模块名称执行. App自动化时,如果想Android和IOS公用一套代码时,也可以使用标记功能,标明哪些是IOS 的用 ...

  8. 为什么要用webpack！

    为什么要用webpack?   现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包. 模块化,让我们可以把复杂的程序细化为小的文件;   类似于Type ...

  9. postgresql 两表关联更新

    UPDATE 要更新的表 SET 字段1 = cqt.字段1, 字段2 = cqt.字段2, FROM 数据来源表 cqt WHERE 要更新的表.bsm = cqt.bsm

  10. 前端学习(一）html标签（笔记）

    html->标签 标题标签:<h1>标题文字</h1>段落标签:<p>段落文字</p>换行标签:<br/>图片标签:<img s ...