V3Excel导入_vue3 xlxs库-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_67480392/article/details/135914834

文章介绍了如何在Vue组件中使用xlsx库处理Excel文件上传，包括文件选择、二进制读取、转换为JSON格式的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装插件xlsx

npm install xlsx

组件所有代码

<template>
  <div>
    <el-upload
      action
      accept=".xlsx,.xls"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handleChange"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
    </el-upload>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import * as XLSX from "xlsx";
// 把文件按照二进制进行读取
function readFile(file: any) {
  return new Promise((resolve) => {
    let reader = new FileReader();
    reader.readAsBinaryString(file);
    reader.onload = (ev) => {
      resolve(ev.target.result);
    };
  });
}
// 选择文件的方法
const handleChange = async (ev: any) => {
  let file = ev.raw; //这里面就是数据
  console.log("file", file);
  // 将file变成二进制读取到的
  let data = await readFile(file);
  // 将得到的二进制转化一下
  let workbook = XLSX.read(data, { type: "binary" });
  // 最后把数据转成json格式的
  let worksheet = workbook.Sheets[workbook.SheetNames[0]]; 
  //将得到的worksheet转化为json格式
  data = XLSX.utils.sheet_to_json(worksheet);
  // 上传的数据
  console.log("data", data);
};
</script>