vue+TS + xlsx +ant-design-vue 解析excel文件数据

最新推荐文章于 2024-02-21 18:19:33 发布

yy763496668

最新推荐文章于 2024-02-21 18:19:33 发布

阅读量1.9k

点赞数 1

文章标签： excel java mysql linux android

本文链接：https://blog.csdn.net/yy763496668/article/details/118866201

版权

历史文章目录连接：

https://blog.csdn.net/yy763496668/article/details/113117040

此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

本文解决本地excel数据导入后台的问题。

正文：

导入安装xlsx包

npm install xlsx -S

解决问题之前我们先做一些工具类便于我们在后续开发中重复使用。

首先util.ts

在此文件中添加一个把文件读取成二进制的方法

/**
 * 把文件按照二进制进行读取
 * @param file 
 * @returns 
 */
export function readFile(file:File) {
    return new Promise(resolve=>{
        let reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = ev =>{
            resolve(ev.target?.result);
        }
    });
}

创建excel.ts,此文件封装对excel.ts操作的方法

import xlsx from "xlsx";
import  {readFile} from "./util";
/**
 * 根据sheet索引读取Excel文件中的数据
 * @param file 文件
 * @param sheetIndex excel文件中sheet表索引 默认是从0开始
 * @returns  将表中的数据以json形式的数据返回
 */
export async function  readExcelFile(file:File,sheetIndex:number)
{
    let data = await readFile(file);
    let workbook = xlsx.read(data,{type:'binary'});
    let worksheet = workbook.Sheets[workbook.SheetNames[sheetIndex]];
    data = xlsx.utils.sheet_to_json(worksheet);
    return data;
}

这样基本上对excel的读取数据操作就算完成了。

在vue文件中相关代码如下：

<template>
    <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
      <a-button> <a-icon type="upload" /> 选择文件 </a-button>
    </a-upload>
</template>

以下就是获取文件数据的方式，是不是很简洁明了呢！！

methods:
{
    beforeUpload(file:File) {
        let data = readExcelFile(file,0);
        data.then((d)=>{
            //读取文件数据
            console.log(d);
        });
        return false;
    },
}

THIS IS All !! THANKS !!

【关注、点赞，收藏】

关注公众号，您将第一时间收到文章更新

微信公众号：猿媛大本营

QQ群号：1056320746