React使用xlsx和js-export-excel实现前端导出

 更新时间:2024年02月04日 13:48:57   作者:某哈压力大  
这篇文章主要为大家详细介绍了React如何分别使用xlsx和js-export-excel实现前端导出功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下

背景

在数据量不太大,或者开发周期比较急迫的情况下,可以把导出excel功能放到前端实现。

这里笔者结合实际开发的经验,由于我司开发技术选型为React,最终选择

js-export-excel (1.1.4) 和 xlsx (0.18.5)

分别进行介绍如何实现前端导出excel功能。

前置数据模拟以及导出预期结果

mock导出的数据

const dataTable = [
	{index: "1", name: "niko", age: "18", birth: "Mon Dec 11 10:08:15 CST 2023"},
    {index: "1", name: "vivi", age: "16", birth: "Sun Dec 11 10:49:18 CST 2023"},
]

预期导出效果

只需要序号,姓名和年龄字段,且工作表名为个人信息表

js-export-excel

import ExportJsonExcel from 'js-export-excel';

const jsExportExcelHandle = (dataTable = []) => {
	const option = [];
	option.fileName = "个人信息文件";
	const sheetData = dataTable; // 有需要映射的话需要先映射
	const sheetFilter = ["index", "name", "age"];
	const sheetHeader = ["序号", "姓名", "年龄"];
	option.datas = [
		{
			sheetData,
			sheetName: "个人信息表",
			sheetFilter,
			sheetHeader,
			columnWidth: new Array(sheethaeader.length).fill(10); // 列宽
		}
	];
	const toExcel = new ExportJsonExcel(option);
	toExcel.saveExcel()
}

xlsx

import { utils, writeFile } from 'xlsx';

const xlsxHandle = (dataTable = []) => {
	// 表头映射为中文
	const headerMap = {
		index: "序号",
		name: "姓名",
		age: "年龄",
	},
	// 先过滤出需要的属性
	const headList = Object.keys(headerMap); 
	// 返回新的对象数组
	const _dataTable = dataTable.map(item => {
		const filteredItem = {};
		Object.keys(item).forEach(key => {
			if(headList.includes(key)){
				filteredItem[key] = item[key];
			}
		})
        return filteredItem
	})
    
    // xlsx需要转为二维数组
    const dataArr = _dataTable.map(item => Object.values(item));
    // 将表头映射为中文(name => 姓名)
    const headerTranslated = Object.keys(headerMap).map(key => header[key]);//["序号", "年龄", "姓名"]
    dataArr.unshif(headerTranslated); // 插入
    const workSheet = utils.aoa_to_sheet(dataArr); // 转为工作表对象
    // 设置每个的单元格的列宽
    workSheet["!cols"] = new Array(headList.length).fill({wch: 20}); // {!cols:(13)[{wch:20},...],A1:{v: "序号", t: "s"},...} 
    const workBook = utils.book_new();
    utils.book_append_sheet(workBook, workSheet);
    // writeFile 方法只能在 node 环境下使用。
    writeFile(workBook, "个人信息文件.xlsx", {
        Props: { // 作者的相关信息
            title: "个人信息明细",
            creator: window.User,
         
        }
    })
}

worksheet['!cols']:存储列对象的数组,可以在这里设置列宽。

//wpx 字段表示以像素为单位,wch 字段表示以字符为单位
worksheet['!cols'] = [
  { wpx: 200 }, //设置第1列列宽为200像素
  { wch: 50 },  //设置第2列列宽为50字符
];

单元格对象中的属性

//设置A1单元格的值是序号,类型是字符串,字体颜色是FF0187FA
worksheet["A1"] = {
    v: "序号",
    t: "s",
    s: {
        font: {
            color: { rgb: "FF0187FA" }
        },
    }
}

总结

其实js-export-excel是在xlsx的基础上二次封装的,以上是个人工作中对于第三方插件使用的一个小记录,有写错的地方还请不吝赐教

2024/1/22更新

使用xlsx转为二维数组的时候,可能导致数据和表头对应不上的问题(23行)

// 应该根据表头headerMap重新组装每一行的对象
const dataArr = _dataTable.map(item => 
    Object.keys(headerMap)
    .map(key => item[key])
)

到此这篇关于React使用xlsx和js-export-excel实现前端导出的文章就介绍到这了,更多相关React前端导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React实现Step组件的示例代码

    React实现Step组件的示例代码

    这篇文章主要为大家详细介绍了React实现Step组件(步骤条组件)的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • react框架next.js学习之API 路由篇详解

    react框架next.js学习之API 路由篇详解

    这篇文章主要为大家介绍了react框架next.js学习之API 路由篇详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 关于React中使用window.print()出现页面无响应问题解决记录

    关于React中使用window.print()出现页面无响应问题解决记录

    这篇文章主要介绍了React中使用window.print()出现页面无响应问题解决记录,首先问题原因可能是操作了document但是并未进行销毁(可能是),具体问题解决思路参考下本文吧
    2021-11-11
  • 利用React实现一个有点意思的电梯小程序

    利用React实现一个有点意思的电梯小程序

    这篇文章主要为大家详解介绍了如何利用React实现一个有点意思的电梯小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2022-08-08
  • React报错Element type is invalid解决案例

    React报错Element type is invalid解决案例

    这篇文章主要为大家介绍了React报错Element type is invalid解决案例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 详解React-Native全球化多语言切换工具库react-native-i18n

    详解React-Native全球化多语言切换工具库react-native-i18n

    这篇文章主要介绍了详解React-Native全球化语言切换工具库react-native-i18n,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 浅谈React useDebounce 防抖原理

    浅谈React useDebounce 防抖原理

    本文主要介绍了浅谈React useDebounce 防抖原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • React使用TypeScript的最佳实践和技巧

    React使用TypeScript的最佳实践和技巧

    在React项目中使用TypeScript可以显著提高代码的可维护性和可读性,并提供强大的类型检查功能,减少运行时错误,以下是一些优雅地将TypeScript集成到React项目中的最佳实践和技巧,需要的朋友可以参考下
    2024-06-06
  • React服务端渲染和同构的实现

    React服务端渲染和同构的实现

    本文主要介绍了React服务端渲染和同构的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • React受控组件与非受控组件深入讲解

    React受控组件与非受控组件深入讲解

    具体来说这是一种react非受控组件,其状态是在input的react内部控制,不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识,感兴趣的朋友一起看看吧
    2022-12-12

最新评论