<!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. Struts1.3——Struts入门

    1.Struts的几个基本概念 1.struts是一个开源框架(frameset) 2.struts是一个Web框架 3.struts是一个基于MVC的Web框架 2.为什么有struts 因为我们对 ...

  2. 解决oracle v$sqlarea sql不完整

    解决oracle v$sqlarea sql不完整根据SELECT * FROM v$sqlarea中找到hash_value然后执行SELECT * FROM v$sqltext WHERE has ...

  3. leetcode python丑数

    # Leetcode 263 丑数### 题目描述 编写一个程序判断给定的数是否为丑数. 丑数就是只包含质因数 `2, 3, 5` 的**正整数**. **示例1:** 输入: 6 输出: true ...

  4. Spring Cloud动态刷新配置信息

    有时候在配置中心有些参数是需要修改的,这时候如何不重启而达到实时生效的效果呢? 添加依赖 <dependencies> ... <dependency> <groupId ...

  5. JSP简单练习-一个简单的计数器

    在JSP中,在"<%"和"%>"之间书写的程序代码成为java程序片. 一个JSP页面中能够有多个java程序片. 要注意的是,在Java程序片中声 ...

  6. Android开发 Butterknife使用方法总结

    前言: ButterKnife是一个专注于Android系统的View注入框架,以前总是要写很多findViewById来找到View对象,有了ButterKnife可以很轻松的省去这些步骤.是大神J ...

  7. myeclipse中使用maven插件的时候，报错-Dmaven.multiModuleProjectDirectory system propery is not set.

    -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable a ...

  8. shell只读变量

  9. DBCP重连的问题及解决办法（转）

    本文转载:http://lc87624.iteye.com/blog/1734089,欢迎大家阅读原文. 使用数据库连接池时,免不了会遇到断网.数据库挂掉等异常状况,当网络或数据库恢复时,若无法恢复连 ...

  10. git安装和使用方法url

    1.如何在ubuntu下使用Github? https://blog.csdn.net/tina_ttl/article/details/51326684 https://segmentfault.c ...