});
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. 心态调整