前端使用XLSX插件实现导入功能

最新推荐文章于 2025-06-20 10:32:44 发布

Merlin-蔡

最新推荐文章于 2025-06-20 10:32:44 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript excel typescript

本文链接：https://blog.youkuaiyun.com/Merlin2017/article/details/119953420

这篇博客介绍了如何在前端使用XLSX插件将Excel文件转换为JSON并上传到后端。首先，通过npm安装xlsx库，然后在代码中引入并使用utils模块将工作表转化为JSON。在`importFromLocal`函数中，解析文件内容，提取表头和数据，并在`importData`函数中实现文件选择、数据处理及向后端POST请求。当后端返回200状态码时，显示导入成功消息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端使用XLSX插件实现导入功能，具体代码实现：
1.npm install xlsx --save 下载安装xlsx插件依赖包
2.在使用得地方引入import XLSX, { utils } from ‘xlsx’;
3.把excel数据转成json传给后端;

	 * @description  解析表格文件数据，返回表格中内容，目前暂不支持导入有单元格合并的表格
	 * @param    {Object} file    导入的文件，二进制数据流
	 * @returns  {Object} data    返回的表格数据
	 * @returns  {Array}  data.title   表头
	 * @returns  {Array}  data.body    表格数据
	 */
	 
	async importFromLocal(file) {
		const workBook = (await this.readerWorkBookFromLocal(file)) as any,
			workSheet = workBook.Sheets[workBook.SheetNames[0]],
			content = utils.sheet_to_json(workSheet) as any,
			data = [];
		(data as any).title = Object.keys(content[0]);
		(data as any).body = content;
		return data;
	}

使用

private async importData() {
		const el = document.getElementById('file') as any;
		const file = el.files[0];
		let data = (await Excel.importFromLocal(file)) as any;
		el.value = '';
		data.body.shift();
		console.log('data', data);
		const res = await post(ApiUrl.getUrl, data.body);
		if (res.code === 200) {
			this.$message({
				message: '导入成功',
				type: 'success'
			});
		} else {
			this.$message.error(res.msg);
		}
	}