<!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. 64位系统sql链接oracle

    在SQL Server 2008中连接Oracle,完成查询.插入操作 建立指向Oracle的连接 在32位的系统中sql链接oracle,在链接服务器里点击服务器对象,右键链接服务器,选择micro ...

  2. upc组队赛6 Bumped!【最短路】

    Bumped! 题目描述 Peter returned from the recently held ACM ICPC World finals only to find that his retur ...

  3. python作业/练习/实战：生成双色球小程序

    作业要求: 每注投注号码由6个红色球号码和1个蓝色球号码组成.红色球号码从1--33中选择:蓝色球号码从1--16中选择 代码范例 import random all_red_ball = [str( ...

  4. 手把手教你吧Python应用到实际开发 不再空谈悟法✍✍✍

    手把手教你吧Python应用到实际开发 不再空谈悟法 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问 ...

  5. Docker 容器使用

    Docker 客户端 docker 客户端非常简单 ,我们可以直接输入 docker 命令来查看到 Docker 客户端的所有命令选项. runoob@runoob:~# docker :~# doc ...

  6. Linux部分常用命令详解（一）

    echo 命令详解 格式: echo string 显示普通字符: echo "it is a test" 或者 echo it is a test 显示转义字符: echo &q ...

  7. 处理CSS前缀问题的神器——AutoPrefixer

    众所周知为兼容所有浏览器,有的CSS属性需要对不同的浏览器加上前缀,然而有时添加一条属性,需要添加3~4条类似的属性只是为了满足浏览器的兼容,这不仅会增加许多的工作量. What is AutoPre ...

  8. Andoid之硬件访问服务1（让Andoid应用程序访问c库）

    andoid 项目文件结构图 新建Hardcontrol.java package com.thisway.hardlibrary; public class HardControl { public ...

  9. Manjaro配置中国源

    1.自动寻找中国源 sudo pacman-mirrors -i -c China -m rank//更新镜像排名sudo vim /etc/pacman.d/mirrorlist //查看选择的源s ...

  10. teb教程10 teb questions

    http://wiki.ros.org/teb_local_planner/Tutorials/Frequently%20Asked%20Questions