只需三步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方便后端将数据存入数据库。

示例代码：

<template>

<el-upload

class="upload-demo"

action

:auto-upload="false"

:show-file-list="false"

:on-change="choose_file"

>

<el-button size="small" type="primary">请选择导入excel</el-button>

</el-upload>

</template>

<script>

import XLSX from "xlsx";

export default {

data() {

return {

file: "",

excel_import_data:''

};

},

methods: {

choose_file(file) {

this.file = file.raw;//这是element的导入数据选择，必须要添加.raw才能获取，其他表单不需要

// console.log(this.file);//上传文件信息

this.importExcel(this.file)

},

importExcel(file) {

var excelData = [];

//声明一个文件读取器

const fileReader = new FileReader();

//文件读取成功时触发事件

fileReader.onload = (ev) => {

try {

//读取的文件;

const data = ev.target.result;

//以二进制流方式读取得到整份excel表格

const workbook = XLSX.read(data, { type: "binary" });

// 循环遍历excel的sheet对象

Object.keys(workbook.Sheets).forEach((sheet) => {

console.info(workbook.Sheets[sheet]["!ref"]);

excelData.push(

//将excel 转换成json对象放入数组中

...XLSX.utils.sheet_to_json(workbook.Sheets[sheet])

);

});

// 自定义事件，比如校验excel数据。转换数据格式…

// console.log(excelData)//未转换key值的数据

this.changeKey(excelData)//调用转换key值

} catch (e) {

this.$message.danger('文件类型不正确');

}

};

//读取文件

fileReader.readAsBinaryString(file);

},

changeKey(excelData){

var newKeyMap={//key转换字典，左侧为旧的key值。右侧为新key值

'昵称':'user_pet_name',

'用户名':'user_name',

'用户邮箱':'user_email',

'用户电话':'user_phone',

'性别':'user_sex',

'用户年龄':'user_age',

'用户类别':'user_label',

}

for (let i = 0; i < excelData.length; i++) {//进行字典替换

var obj = excelData[i];

for (let key in obj) {

var newKey=newKeyMap[key]

if(newKey){

obj[newKey]=obj[key]

delete obj[key]

}

}

}

this.excel_import_data=excelData//转换成功后的数据

// console.log(this.excel_import_data)

this.$emit('excel_data',this.excel_import_data)//将数据传到父组件

this.$message.success("导入成功，已为您显示到数据表格，您也可以查看console");

}

},

};

</script>

示例图片：

选择excel文件：

读取50excel数据：

替换key值后：

注意事项：

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

结语：

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

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