前端读取excel文件的内容

weixin_45055348

已于 2022-06-02 14:36:14 修改

阅读量4.8k

点赞数

文章标签：前端 javascript 开发语言

于 2022-06-02 11:08:47 首次发布

本文链接：https://blog.csdn.net/weixin_45055348/article/details/125097042

版权

这篇博客介绍了如何利用XLSX.js库将前端上传的Excel文件读取并转化为服务器所需的格式。首先，通过FileReader读取文件为二进制，然后使用XLSX库解析成JSON。接着，定义了一个映射对象revertChart将Excel的列头映射到对应的字段名。最后，将解析后的数据转换为适合服务器接收的格式。在实际应用中，需要根据Excel的表头调整revertChart的内容。

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

原始的excel文件：

转化后的数据

使用方法，

1、安装xlsx插件不用再说了，npm

2、新建util文件，我这里是将代码它放在util文件夹下的index.js中，代码如下：

import * as XLSX from 'xlsx'

// 把文件以二进制的方式读出来
let analyseExcelToByte=(file)=>{
    return new Promise(resolve=>{
        let reader=new FileReader();
        reader.readAsBinaryString(file);
        reader.onload=ev=>{
            resolve(ev.target.result);
        }
    })
}

// 转换得对应字段表：****这里需要根据自己的需要修改，一般是根据excel中的表头进行设置
let revertChart={
    name:{
        text:"姓名",
        type:"string"
    },
    phone:{
        text:"联系电话",
        type:"string",
    },
    age:{
        text:"年纪",
        type:"string",
    },
    local:{
        text:"籍贯",
        type:"string",
    }
}
 // 把读取出来得数据变为组后可以传递给服务器的数据（姓名：name、联系电话：phone、年纪：age、籍贯：local）
let parseToServe=(outdata)=>{
    let arr=[];
    outdata.forEach(item=>{
        let obj={};
        for(let key in revertChart){
            if(!revertChart.hasOwnProperty(key)) break;
            let o=revertChart[key],
            text=o.text,
            type=o.type;
            o=item[text]||"";
            type==="string" ? (o=String(o)):null;
            type==="number" ? (o=Number(o)):null;
            obj[key]=o
        }
        arr.push(obj)
    })
    return arr
}

// 前端文件导入解析成传递给服务器的数据
export let resolveFile=async (file)=>{
    let data= await  analyseExcelToByte(file);
    // 将文件以二进制读出
    return new Promise(resolve=>{
        let workbook=XLSX.read(data,{type:"binary"})
        // 将文件中的第一个sheet以json的方式读出outdata
        let worksheets=workbook.Sheets[workbook.SheetNames[0]];
        let outdata=XLSX.utils.sheet_to_json(worksheets)
        let serveData=parseToServe(outdata)
        resolve(serveData)
    })
 }

3、注意根据自己的需要修改 revertChart里面的字段内容，一般是根据自己的excel文件中的字段来设置

4、在需要的页面引入util文件，

import {resolveFile} from '../plugin/fileUtils'

直接在页面中使用，就可以看到改造后的数据了