【原创】前端Vue Element SheetJs实现excel自动导入功能

最新推荐文章于 2024-10-11 09:05:45 发布

guo_123258

最新推荐文章于 2024-10-11 09:05:45 发布

阅读量4.2k

点赞数

分类专栏：前端文章标签： EXCEL导入 vue element

本文链接：https://blog.csdn.net/guo_123258/article/details/102723096

版权

本文介绍了一种在前端使用Vue和Element UI结合SheetJs插件实现Excel导入功能的方法。通过封装代码模块，提高了代码复用性，简化了导入操作。在Vue应用中，利用Element的upload组件和SheetJs进行交互，实现了文件上传并解析Excel数据。

摘要由CSDN通过智能技术生成

在工作中有个excel导入的功能需求，有两种实现方式，一个是在前端处理，另一个是在后端处理。我使用前端处理方式实现该功能。

主要用到SheetJs插件：SheetJs的GitHub连接。由于需要多次使用该功能，我将其封装成功能模块，提高代码使用效率（再也不要复制粘贴一大段代码了）。

先上封装的代码：

import XLSX from 'xlsx'

///excel导入功能使用：
// 1、首先要安装SheetJs, npm install xlsx --save;
// 2、在需要的文件中引入importExcel.js文件
// 3、参数说明：file是指需要导入的excel文件（会有弹窗选择即可）；colnumData是指对应数据库表的列名与注释组成的集合
// 4、excel的列名称要与数据库表中的注释保持一致
export function importExcel(file,colnumData){
    const types = file.name.split('.').pop();
    let dataList = [];
    const fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item