LAY-EXCEL实现导入和导出excel功能

最新推荐文章于 2025-11-22 06:17:10 发布

原创最新推荐文章于 2025-11-22 06:17:10 发布 · 641 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#excel #javascript #前端

});
return param;
}


### 1.3  index.vue文件


        这里先准备好页面中html部分、变量定义和使用的相关事件函数定义好，代码如下：


        由于这里使用的是element-ui组件，组件已将布局样式写好，这里index.scss文件就不讲解了。


        此时页面效果如下：


![](https://img-blog.csdnimg.cn/19fb992af9b34bd28b584acc55c7a9e3.png)


## 二、导入数据


### 2.1 导入按钮


        由于导入是需要选择文件，所以在导入按钮前面添加一个隐藏的type=file标签，当点击导入按钮时触发uploadFileEvent()事件函数。

<input hidden
ref=“excel-upload-input”
class=“excel-upload-input”
type=“file”
accept=“.xlsx, .xls”
@change=“uploadFileEvent”
>
<el-button size=“small” type=“primary” @click=“importEvent”>导入


### 2.2 选择文件


        当点击导入按钮时，通过JS触发选择文件事件，代码如下：

/**

导入点击事件
*/
importEvent(){
this.$refs[‘excel-upload-input’].click();
}


### 2.3 配置参数


        importExcel配置参数：




| 参数名称 | 描述 | 默认值 |
| --- | --- | --- |
| files | FileList 对象（通常来自于 input[type='file'] 元素的 files 属性 ） | undefined |
| opt | 导出参数配置，详见下方描述 | undefined |
| callback | 完全读取完毕的回调函数，传入一个参数「data」表示所有数据的集合 | undefined |


        opt配置参数：




| 参数名称 | 描述 | 默认值 |
| --- | --- | --- |
| header | 导入参数的headers，支持"A"、1等 | A |
| range | 读取的范围，支持数字、字符等 | null |
| fields | 可以在读取的过程中进行数据梳理 | null |


         filterImportData参数配置：




| 参数名称 | 描述 | 默认值 |
| --- | --- | --- |
| data | 导入的数据（文件维度） | undefined |
| fields | 可以在读取的过程中进行数据梳理 | undefined |



> 
> 注：梳理导出的数据，包括字段排序和多余数据过滤，filterImportData()函数与 importExcel 的 field 字段含义一致
> 
> 
> 
> 由于处理过程中会抛出一些异常，所以请使用 try{}catch(e){}接收并提示用户！
> 
> 
> 
> 有以下两种方式可以梳理数据：
> 
> 
> * 调用 filterImportData(data, fields)
> * 直接在 importExcel() 的 opt 配置中进行数据梳理
> 
> 
> 



### 2.4 数据处理


        当用户选择excel文件时，opt参数什么都不填，代码如下：

/**

选择导入文件
@param {Object} e
*/
uploadFileEvent(e){
try{
const files = e.target.files;
const rawFile = files[0];
if(!rawFile) return;

LAY_EXCEL.importExcel(files, {}, data => {
console.log(data);
});
}catch(e){
console.error(“error:”, e);
}
}


        此时控制台输入数据结构如下图：


![](https://img-blog.csdnimg.cn/fbb14332a50e45f08f387d1e5a7f29d3.png)


###  2.5 filterImportData


        先使用filterImportData疏导数据，代码如下：

LAY_EXCEL.importExcel(files, {}, data => {
//列名转换方法
data = LAY_EXCEL.filterImportData(data, importParam());

console.log(data);

});


        控制台输出数据结构如下：


![](https://img-blog.csdnimg.cn/1a8104fd0c12439aa8d6e4c33fe73bd8.png)


        此时则拿到了所需要的JSON数据，后期可以将其赋值给页面tableData变量，也可将数据先存储库中再读取显示，根据自己业务需求进行处理即可。


### 2.6 fields字段


        也可以在读取过程中梳理数据，这里使用fields字段，代码如下：

LAY_EXCEL.importExcel(files, {
fields: importParam()
}, data => {
console.log(data);
});


        控制台输出数据结构如下：


![](https://img-blog.csdnimg.cn/1a8104fd0c12439aa8d6e4c33fe73bd8.png)


       在2.5和2.6中演示结果来看，两种疏理数据方式结果是一样的，可根据业务需求选择一种即可。


### 2.7 显示数据


        这里使用fields配置完成梳理数据，将获取数据赋值给表格绑定的变量tableData。此时会发现第一行标题也被导入到数据列表中了，使用shift()函数将第一行去除掉即可。代码如下：

/**

选择导入文件

@param {Object} e
*/
uploadFileEvent(e){
try{
const files = e.target.files;
const rawFile = files[0];
if(!rawFile) return;

LAY_EXCEL.importExcel(files, {
  fields: importParam()
}, data => {
  let newData = data[0]['Sheet 1'];

  if(Array.isArray(newData)){
    newData.shift();    //删除第一行标题数据

    // 赋值给表格列表
    this.tableData = newData;

    //do something...

  }else{
    this.tableData = [];
  }

  // console.log(newData);
});

}catch(e){
console.error(“error:”, e);
}
}


        导入后页面效果如下：


![](https://img-blog.csdnimg.cn/8dd6985a9cca481fa3045c81bbaab693.png)




## 三、导出数据


        导出是本插件的核心功能，用于将接口中的数据/界面上的数据以生成excel文件的方式给用户下载，在设计函数的时候尽量接近实际场景，开发了诸如 filterExportData 辅助梳理数据，setExportCellStyle 辅助添加样式，setRoundBorder 用于调整边框等。


### 3.1 配置参数


        exportExcel参数配置：




| 参数名称 | 描述 | 默认值 |
| --- | --- | --- |
| data | 数据列表（需要指定表名） | 必填 |
| filename | 文件名称（带后缀） | 必填 |
| type | 导出类型，支持 xlsx、csv、ods、xlsb、fods、biff2 | xlsx |
| opt | 其他可选配置 | null |


        opt参数配置项：




| 参数名称 | 描述 | 默认值 |
| --- | --- | --- |
| Props | 配置文档基础属性，支持Title、Subject、Author、Manager、Company、Category、Keywords、Comments、LastAuthor、CreatedData | null |
| extend | 表格配置参数，支持 !merge (合并单元格信息)、!cols(行数)、!protect(写保护)等，原生配置请参考，其中 !merge 配置支持辅助方法生成，详见 makeMergeConfig(origin)！ | null |
| compression | 是否压缩，压缩效果比较明显，建议开启（9列9w行有较多重复的数据，从 30M 缩小到 3M） | true |
| writeOpt | 写入函数的可选项覆盖，一般用默认生成的配置即可，具体请查看 Writing Options | undefined |


        filterExportData参数配置：




| 参数名称 | 描述 | 默认值 |
| --- | --- | --- |
| data | 需要梳理的数据 | 必填 |
#### 算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。



![](https://img-blog.csdnimg.cn/img_convert/c582a01373152bb4cd38bc6ad5cc8027.png)



**写在最后**

**最后，对所以做Java的朋友提几点建议，也是我的个人心得：**

1.  疯狂编程

2.  学习效果可视化

3.  写博客
4.  阅读优秀代码
5.  心态调整