JS 前端Table导出excel 支持多sheet页并且支持合并单元格

最新推荐文章于 2023-07-24 10:40:24 发布
最新推荐文章于 2023-07-24 10:40:24 发布
阅读量2.3k 收藏 6
点赞数
分类专栏： 前端辅助 JavaScript
原文链接：https://github.com/wangyunhui1993/neo-export-excel
版权

excel js

JS 前端Table导出excel 支持多sheet页并且支持合并单元格

资源下载地址：https://download.youkuaiyun.com/download/qq_27946017/14890680
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>demo</title>
    <script src="exportExcel.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <table border="1" style="width: 400px;">
        <thead>
            <tr>
                <th rowspan="2" colspan="2">标题</th>
                <th colspan="2">汇总</th>
                <th rowspan="2">日期</th>
            </tr>
            <tr>
                <th>二级</th>
                <th>三级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">标题1</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题2</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题3</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题4</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题5</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
        </tbody>
    </table>
    <table border="1" style="width: 400px;margin-top: 20px;">
        <thead>
            <tr>
                <th rowspan="2">姓名</th>
                <th colspan="2">成绩</th>
                <th rowspan="2">日期</th>
            </tr>
            <tr>
                <th>语文</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>李琦</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
        </tbody>
    </table>
</body>
<script type="text/javascript">
    console.log('exportToExcel', exportToExcel)
        /* 
        //导合多sheet
        var list1 = [{
        		ypsj: "2020-10-10",
        		tbbm: "技术科",
        		score: "99.12"
        	},
        	{
        		ypsj: "2020-10-11",
        		tbbm: "办公室",
        		score: "56.4"
        	},
        ];
        var list2 = [{
        		ypsj: "2020-10-10",
        		tbbm: "技术科",
        		score: "73.567"
        	},
        	{
        		ypsj: "2020-10-11",
        		tbbm: "办公室",
        		score: "89"
        	},
        ];
        const tHeader = [{
        		key: "ypsj",
        		name: "研判时间",
        	},
        	{
        		key: "tbbm",
        		name: "填报部门"
        	},
        	{
        		key: "score",
        		name: "代码",
        		format: "0.00",  //单元格格式 例："0.00"代表数字保留2位小数，"@"代表文本，"Percent"代表百分比
        		style:{"text-align":"right"}  //单元格样式
        	},
        ];
        var excelInfo = {
        	name: "这是表格的名称",
        	sheets: [{
        			name: "这是sheet1",
        			content: list1,
        			tHeader: tHeader,
        		},
        		{
        			name: "这是sheet2",
        			content: list2,
        			tHeader: tHeader,
        		},
        	],
        }; 
        exportToExcel(excelInfo);
        */


    //导合并单元格的
    var content =
        ` <thead>
            <tr>
                <th rowspan="2" colspan="2">标题</th>
                <th colspan="2">汇总</th>
                <th rowspan="2">日期</th>
            </tr>
            <tr>
                <th>二级</th>
                <th>三级</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">标题1</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题2</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题3</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题4</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td colspan="2">标题5</td>
                <td>二级部门</td>
                <td>三级部门</td>
                <td>2020-01-09</td>
            </tr>
        </tbody>`
    var content2 =
        `     <thead>
            <tr>
                <th rowspan="2">姓名</th>
                <th colspan="2">成绩</th>
                <th rowspan="2">日期</th>
            </tr>
            <tr>
                <th>语文</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
            <tr>
                <td>李琦</td>
                <td>100</td>
                <td>90</td>
                <td>2020-01-09</td>
            </tr>
        </tbody>`
    var excelInfo = {
        name: "多sheet页复杂excel导出",
        sheets: [{
            name: "这是sheet1",
            content: content,
        }, {
            name: "这是sheet2",
            content: content2,
        }],
    };
    exportToExcel(excelInfo);
</script>

</html>
tableexport.js 导出多个表格 结果放到一个sheet_VBA汇总多个Sheet数据
weixin_39715290的博客
12-14 401
1、需求：有1个工作簿，多个工作表，格式一致，按某列作为关键字(具有唯一性)，汇总数据，以工作表名称作为汇总后的新列名称，并生成1列合计。2、实际例子：有1个记录员工工资的工作簿，姓名是唯一的，需要汇总每一个人当年的工资数据，举例3个月的数据：3个月中，人员也会有变动。需要的结果表：3、代码实现简单分析：读取数据根据姓名确定数据要存放的行号，并累加到合计列输出个人碰到的很多VBA...
前端不使用任何插件导出excel，支持多sheet，合并表头。
qq_41839956的博客
06-13 718
相信大家都遇到过，你去把这个表格导出来，要带样式哦，一个excel会有多个sheet。百度搜肯定是让用xlsxjs，这个设置样式自认为好麻烦，不如自己写css的style。思路就是HTML的table生成excel可以直接拉到最后复制使用。
JavaScript 实现 Excel数据导出 支持多个Sheet页导出
09-20
纯JavaScript实现json格式数据导出到Excel文件,支持多个Sheet页导出
js实现多个表格数据导出到excel ，并且支持合并单元格
weixin_40362806的博客
05-06 1203
js实现Table导出excel 支持多sheet页并且支持合并单元格
tableexport.js 导出多个表格 结果放到一个sheet_表格高级筛选、表格合并，让表格处理事半功倍...
weixin_39871378的博客
11-13 485
今天给大家介绍WPS最受欢迎的2个表格功能，表格合并和表格高级筛选。这都是能够切实让工作事半功倍的功能，一定要掌握哦！一、表格合并当我们有多个表格的内容需要合并到一个表格中，很多人会采取复制粘贴的方式。表格数量少时可能影响不大，数量多了，【表格合并】功能就会大显神威。下面教大家如何快速完成多表格合并。温馨提示：如果图片用手机看不清，可以收藏文章用电脑看哦。使用步骤➊打开需要合并的表格(无须全部打开...
利用js把异步加载的表格导出为excel多sheet的那一种
han_xiao_xiao的博客
04-13 981
最近还在为这一功能的实现而苦恼，但是经过不断地思考以及查资料，终于找到了一款自己项目的解决方案。做出来的效果如图： 因为自己要做的表格是自定义样式的，不是规规整整的。所以花的时间有点久。不然推荐直接使用jquery的插件table2excel.js，可以直接把表格样式带过来。但是考虑到多sheet，我不太知道应该改那一块的源码。所以就放弃了这一条路，用js完成了多sheet的功能。但是效果如图，...
前端导出excel，可以控制样式，单元格合并居中等
09-08
通过"xlsx.full.min.js"这个库，我们可以实现前端直接导出带有样式的Excel文件，包括单元格的合并和居中对齐等高级功能。下面将详细介绍这个过程及涉及到的技术要点。 一、xlsx.full.min.js库介绍 "xlsx.full.min....
前端导出 excel ，设置字体，列宽，行高，对其方式，合并单元格等效果
06-23
本示例中的"前端导出 excel，设置字体，列宽，行高，对其方式，合并单元格等效果"是一个完整的解决方案，它涵盖了多个关键知识点。 首先，让我们了解如何在前端实现Excel导出。通常，我们会使用一些库或API，如` ...
xlsx-js-style导出Excel，带样式合并单元格边框显示不全和动态插入表头 解决
最新发布
09-27
xlsx-js-style库在使用纯JavaScript进行Excel导出方面提供了强大的功能，不仅处理了合并单元格的显示问题，还支持动态表头的插入，并允许对导出的Excel文件样式进行自定义。这为开发人员提供了一种灵活、高效的解决...
使用js多级次合并单元格
galeno的博客
06-27 3020
表格相同内容合并 合并前： c1 c2 c3 c4 c5 c6 a 1 2 3 4 5 a 1 3 4
javascript excel导出多张工作表
01-29
javascript怎么导出多张工作表，并进行数据导入，可以兼容ie,firefox,google
tableexport.js 导出多个表格 结果放到一个sheet_高效神器 | 表格高级筛选、表格合并，让表格处理事半功倍...
weixin_39997795的博客
12-14 600
今天给大家介绍WPS最受欢迎的2个表格功能，表格合并和表格高级筛选。这都是能够切实让工作事半功倍的功能，一定要掌握哦！一、表格合并当我们有多个表格的内容需要合并到一个表格中，很多人会采取复制粘贴的方式。表格数量少时可能影响不大，数量多了，【表格合并】功能就会大显神威。下面教大家如何快速完成多表格合并。温馨提示：如果图片用手机看不清，可以收藏文章用电脑看哦。使用步骤➊打开需要合并的表格（无须全部打开...
js导出excel表格并生成多sheet
bangweixiao1238的博客
09-10 4351
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ExportTablesToExcel</title> <script src="js/echarts.js"></scr...
sheet.js实现多个html的表格分为多个sheet导出为一个excel
weixin_42032770的博客
02-21 2453
一个页面上有多个tab，希望导出数据的时候，按tab分一下sheet工作表，导出为一整个xlsx文件。
js页面导出为pdf
qq_43513271的博客
07-24 412
js生成pdf
html利用js生成excel表格（html表格标签生成excel）table2excel实例：一表格多sheets
This blog is a space to document my professional learnings, personal reflections, and everything in between.
03-26 1289
’table2excel’ 可以转换和下载html上的表格，使他成为.xlsx格式，能够被Excel打开
tableexport 可以导出多个表格到一个excel文件吗_关于合并EXCEL文件
weixin_39667652的博客
12-11 465
最近要准备审计的事，忙的都忘了更新，大家见谅！*^*说起来跟大家说说这次准备审计时用到的VBA，抛点砖，引一下大家的玉~(此处可以有掌声~)闲话不多说，直接说碰到的问题，这次审计是别家单位，因此没有办法直接使用审计软件采集数据来分析，被审单位只提供了财务系统导出的序时账，而且还是断断续续，有按月导出的、按季导出的、按年导出，还有跨年导出！，一共5年80多个EXCEL表格，...
使用JS导出多页面数据在一张表EXCEL中
w2481296的博客
07-18 1273
使用JS导出多页面数据在一张表EXCEL中使用前提功能代码总结 使用前提 1. 首先我的功能是：在一个总页面（一级页面）中会有数据结果。点击相应的数据结果可以跳转到相应的二级页面并根据一级的点击数据作为二级页面查询条件，把结果也查出来。三级页面与二级相似。就是这么一个总分分的页面层级关系。 2.我的导出功能作用：将一级界面所有查询到的数据导出，并将每条一级数据下所查询到的二级三级数据进行导出。 导...
纯前端预览并且导出pdf----js将table预览为pdf、并导出为pdf
huanhuan03的博客
04-28 7579
纯前端导出pdf js导出table为pdf js预览pdf js将table导出为pdf 导出pdf 预览pdf
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值