JS layui导出 多个sheet表, 并且能够合并列数据

已于 2022-12-29 14:12:11 修改
阅读量1k 收藏
点赞数 1
分类专栏： layui 文章标签： javascript layui 前端 开发语言 数组
于 2022-12-08 14:17:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/128236074
版权

 摘自文章：前端读取Excel报表文件 - 知乎

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="xlsx/xlsx.full.min.js"></script>
</head>

<body>
    <button onclick="exportAll()">导出(分多个sheet表, 并且能够合并列)</button>
</body>

<script>
    let listData = [
        {
            deviceAmount: 2, deviceAmountEvery: 2, model: "MA9704E-B1", privilegeListArray: "ADAS", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 3, deviceAmountEvery: 1, model: "MR98C-S4-B3", privilegeListArray: "ADAS,DSM", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 3, deviceAmountEvery: 1, model: "MT95C-D4-B3", privilegeListArray: "ADAS,DSM", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 3, deviceAmountEvery: 1, model: "MT95C-H4-B3", privilegeListArray: "ADAS,DSM", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 6, deviceAmountEvery: 6, model: "MR98C-H6-B1", privilegeListArray: "ADAS,DSM,BSD", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 1, deviceAmountEvery: 1, model: "MA9708E-B1", privilegeListArray: "ADAS,DSM,BSD,BSD2", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 6, deviceAmountEvery: 4, model: "MR98E-H8-B1", privilegeListArray: "ADAS,DSM,DSM2,BSD,BSD2", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 6, deviceAmountEvery: 2, model: "MR98E-H8-B1", privilegeListArray: "ADAS,DSM,DSM2,BSD,BSD2", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 1, deviceAmountEvery: 1, model: "MR98C-H4-B1", privilegeListArray: "ADAS,DSM,DSM2,BSD,BSD2,CMS", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 1, deviceAmountEvery: 1, model: "MA9504E-B1", privilegeListArray: "DSM,OMS", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 2, deviceAmountEvery: 1, model: "MA9504E-B1", privilegeListArray: "DSM,BSD,OMS", supplierName: "BBC", total: 22
        },
        {
            deviceAmount: 2, deviceAmountEvery: 1, model: "MA9504E-B1", privilegeListArray: "DSM,BSD,OMS", supplierName: "BBC", total: 22
        }
    ],

        listData2 = [
            {
                deviceAmount: 2,
                deviceAmountEvery: 1,
                endPrivilegeListArray: "ADAS,DSM",
                model: "MR98E",
                privilegeList: [1, 2],
                privilegeListArr: "ADAS,DSM",
                scrapDeviceAmount: 0,
                supplierName: "魔视",
                total: 8
            },
            {
                deviceAmount: 2,
                deviceAmountEvery: 1,
                endPrivilegeListArray: "ADAS,DSM",
                model: "MR98EH",
                privilegeList: [1, 2],
                privilegeListArr: "ADAS,DSM,BSD,BSD2",
                scrapDeviceAmount: 0,
                supplierName: "魔视",
                total: 8
            },
            {
                deviceAmount: 3,
                deviceAmountEvery: 1,
                endPrivilegeListArray: "ADAS,DSM,BSD",
                model: "MR98EH",
                privilegeList: [1, 2, 4],
                privilegeListArr: "ADAS,DSM,BSD",
                scrapDeviceAmount: 0,
                supplierName: "魔视",
                total: 8
            },
            {
                deviceAmount: 3,
                deviceAmountEvery: 1,
                endPrivilegeListArray: "ADAS,DSM,BSD",
                model: "MR98E",
                privilegeList: [1, 2, 4],
                privilegeListArr: "ADAS,DSM,BSD,BSD2",
                scrapDeviceAmount: 0,
                supplierName: "魔视",
                total: 8
            },
            {
                deviceAmount: 3,
                deviceAmountEvery: 1,
                endPrivilegeListArray: "ADAS,DSM,BSD",
                model: "MR98E",
                privilegeList: [1, 2, 4],
                privilegeListArr: "ADAS,DSM,DSM2,BSD",
                scrapDeviceAmount: 0,
                supplierName: "魔视",
                total: 8
            },
            {
                deviceAmount: 2,
                deviceAmountEvery: 1,
                endPrivilegeListArray: "ADAS,DSM,DSM2",
                model: "MR98EH",
                privilegeList: [1, 2, 3],
                privilegeListArr: "ADAS",
                scrapDeviceAmount: 0,
                supplierName: "魔视",
                total: 8
            },
            {
                deviceAmount: 2,
                deviceAmountEvery: 1,
                endPrivilegeListArray: "ADAS,DSM,DSM2",
                model: "MR98EH",
                privilegeList: [1, 2, 3],
                privilegeListArr: "ADAS,DSM,BSD",
                scrapDeviceAmount: 0,
                supplierName: "魔视",
                total: 8
最低0.47元/天 解锁文章
琪公子呀
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui中列合并
jongsuk_sun的博客
09-26 2717
一，冻结列，冻结行？ 被冻结的列或行，不会随着滚动条的滑动而滚动。 二，js中var i={}与var i=[]的区别： i={} 对象字变量 等同 i = new Object(); i=[] 数组字变量等同 i = new Array(); 参考：https://www.w3school.com.cn/js/js_objects.asp js中：对象基于Hash表存储变量----...
layui表格导出excel文件，记录直接将前端已有数据导出的两种简单方便的方法
生活没有圈的博客
11-09 2714
layui表格导出excel文件，记录直接将前端已有数据导出的两种简单方便的方法。 第一种 ：使用layui 的 table.exportFile 导出方法。 <head> //1.需要引入相关文件 <script type="text/javascript" src="../js/jquery.min.js"></script> <link rel="stylesheet" href="../js/styles/lib/layui/2.4.3/css/layui.
C# List集合查找删除指定数据
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
07-28 3747
C# List集合查找删除指定数据,C# List集合批量查找删除指定数据,C# Linq详解 LINQ 查询简介TOC LINQ 通过提供处理各种数据源和数据格式的数据的一致模型,简化了这一情况。 在 LINQ 查询中,始终会用到对象。...
导出excel--多个sheet
weixin_30236595的博客
06-05 461
def export_channel_loaned(queryset): today = time.strftime('%Y%m%d%H%M%S') excel_name = '%s_channel_loaned' % (today,) head_list = ['渠道', '合同金额', '合同件数', '逾期件数', '首期...
layui表格合并的方法
热门推荐
Benxiaohai_311的博客
08-29 1万+
layui表格合并的方法 NO.3
layui 导出 excel 表格
weixin_30570101的博客
04-19 601
前言 最近这个项目中，涉及到了导出excel表格这个功能，这个后台管理使用的是layui这个框架，大体来说还是很方便，节省了很多的开发时间。 看layui的官网社区论坛，很多人都说layui自带的导出功能，只能导出当前页面的数据。而且，部分的数据都是通过数据之间关联表查询出来的，用layui自带的导出数据会显示（Object），让人很头疼。 所以要用到插件，很简单，下面的网址，把文...
C# NPOI导出多个Sheet页的Excel
04-18
C# 用NPOI导出多个sheet页的Excel，sheet页名称可以自定义
JavaScript 实现 Excel数据导出 支持多个Sheet页导出
09-20
本文将深入探讨如何使用纯JavaScript实现JSON格式数据到Excel文件的导出，同时支持多个Sheet页的导出。这个功能对于前端开发者来说，能够极大地提升用户体验，特别是在数据管理、分析和分享场景下。 首先，我们要...
导出excel多个sheet.zip
06-08
这个工作簿可以包含多个Sheet，每个Sheet相当于一个独立的数据表。 4. 添加多个Sheet：使用`Workbook.Sheets.Add`方法，可以在工作簿中添加新的Sheet。可以循环执行此操作以创建多个Sheet，每个Sheet可以通过`Sheet...
layui导出所有数据的例子
10-16
今天小编就为大家分享一篇layui导出所有数据的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui数据表格导出Excel插件
07-20
layui数据表格导出Excel插件 博客地址： https://www.cnblogs.com/YunRuiSoftWare/p/13346396.html
Javascript导出Excel，自动合并单元格、自动列宽、有进度条
06-28
js导出execl，自动合并单元格，自动增行，增列
LayUiTable表单相同参数的单元格合并
10-26
LayUiTable表单相同参数的单元格合并，可以几个列一起合并，注释相应完善。LayUiTable表单相同参数的单元格合并
POI导出多个sheet工作表Demo
03-04
在“POI导出多个sheet工作表Demo”中，我们将探讨如何利用Apache POI库来创建一个Excel文档，并在其中添加多个工作表，每个工作表可能代表不同的数据模块或分析部分。 首先，我们需要在项目中引入Apache POI库。...
layui数据表格合并列
curtain_yemu的博客
01-12 3553
layui表格合并
layui表格合并
weixin_40362806的博客
03-10 1964
layui表格合并
layui 合并单元格列
weixin_30469895的博客
10-17 175
参考网址：https://fly.layui.com/jie/24259/ 转载于:https://www.cnblogs.com/dream-corner/p/9804901.html
layui table 单元格合并
qq_26702601的博客
10-26 4032
在表格加载完成方法执行 done:function(res, curr, count){                 merge(res);             } //合并单元格 function merge(res) {     var data = res.data;     var mergeIndex = 0;//定位需要添加合并属性的行数     var mark = 1;...
layui合并表格的单元格 合并列或行的两种方法
qq_41515189的博客
11-09 6112
注意：两种方法要求layui表格的单元格中没有使用fixed属性，不然代码不会起效 方法一： /** * 合并单元格（列） * @param res 表格数据 * @param curr 当前页 * @param count 总数 */ function merge(res, curr, count) { var data = res.data; var mergeIndex =...
前端如何实现excel的导出，实现导出多个sheet，并且支持合并
最新发布
07-12
前端实现Excel导出可以利用第三方库如`xlsx`或`exceljs`，下面是使用`exceljs`库的示例代码： 首先，可以使用npm安装`exceljs`库： ``` npm install exceljs ``` 然后在前端代码中引入： ```javascript import ExcelJS from 'exceljs'; ``` 要实现导出多个sheet并支持合并，可以按照以下步骤： 1. 创建一个新的Workbook： ```javascript const workbook = new ExcelJS.Workbook(); ``` 2. 添加多个sheet，并设置每个sheet的数据和样式： ```javascript // 添加第一个sheet const sheet1 = workbook.addWorksheet('Sheet 1'); sheet1.mergeCells('A1:B1'); // 合并单元格 // 设置单元格数据和样式 sheet1.getCell('A1').value = '合并单元格示例'; sheet1.getCell('A1').alignment = { horizontal: 'center' }; sheet1.getCell('A2').value = '内容1'; sheet1.getCell('B2').value = '内容2'; // 添加第二个sheet const sheet2 = workbook.addWorksheet('Sheet 2'); sheet2.getCell('A1').value = 'Sheet 2的内容'; ``` 3. 导出Excel文件： ```javascript // 导出Excel文件 workbook.xlsx.writeBuffer().then(buffer => { const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); const url = URL.createObjectURL(blob); // 创建一个隐藏的链接并点击下载 const link = document.createElement('a'); link.href = url; link.download = 'excel.xlsx'; link.style.display = 'none'; document.body.appendChild(link); link.click(); // 清理链接和URL对象 document.body.removeChild(link); URL.revokeObjectURL(url); }); ``` 这样就可以通过前端代码实现导出多个sheet并支持合并的Excel文件。注意，`exceljs`库还有许多其他功能，如设置样式、设置列宽等，可以根据实际需求进行配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值