.vue文件_只需三步vue实现excel文件数据提取并存为json数据

前言：

以前将excel数据导入到数据库是通过前端，将excel文件上传到后端，通过后端语言进行相应的加工将excel文件中的数据取出并存入数据库；从而实现数据库的存入流程。但是这也带来了一些问题，首先是后端对excel文件数据的操作不够透明；其次是通过服务器操作数据会造成服务器压力和储存的压力增加。所以将数据的读取放置到前端是势在必行。

Vue将excel中的数据进行提取需要js-xlsx库的支持。

EuiAdmin

导入500条数据测试

JavaScript库：js-xlsx

安装：

要安装js-xlsx的JavaScript库，需要安装node.js，提供npm+vuecli的环境支持。在此基础上将命令提示符切换到项目根目录然后执行"npm install js-xlsx --save"便可完成安装。

原理：

要将excel文件的数据取出，在js-xlsx库的支持下需要三步便可完成数据的导入和数据key值的替换。

1. 文件导入，将需要提取的excel文件导入到前端。

2. Excel文件读取，通过js-xlsx库将数据读取出来。

3. 通过key字典转换，将excel中每列的标题替换为数据对应的key方便后端将数据存入数据库。

示例代码：

class="upload-demo"

action

:auto-upload="false"

:show-file-list="false"

:on-change="choose_file"

>

请选择导入excel

示例图片：

选择excel文件：

读取50excel数据：

替换key值后：

注意事项：

1、注意key字典数据的替换，左侧为excel文件中的标题，右边为要替换的内容；如果要存储到数据库那么要和数据库的key相对应。

结语：

你可以通过访问euiadmin.com获取源码进行参考，源码位于文件src/module/excel/ImportExcel.vue文件中；你可以通过源码更好的了解。

如果你喜欢可以"点赞+关注+评论"三联一波。