xlsx库插件读取excel文件

前端用input读取 .xlsx文件的内容
xlsx库参考连接

项目中我用的ant-design-vue，不过用input一样的大同小异
注意区分xlsx库和node-xlsx库的使用环境

效果

代码

<!--
 * @Descripttion: 
 * @Author: 苍狼一啸八荒惊
 * @Date: 2024-08-18 18:08:51
 * @LastEditTime: 2024-09-27 09:34:04
 * @LastEditors: 一苇以航
-->
<script lang="ts" setup>
// import XLSX from 'node-xlsx';
import * as XLSX from 'xlsx/xlsx.mjs';
const data = reactive({ fileList: [], loading: false });

const customUpload = (info: any) => {
  data.loading = true;
  //文件后缀名
  // let suffixName = info.file.name.split('.').pop();

  let fileReader = new FileReader();
  fileReader.readAsArrayBuffer(info.file);

  fileReader.onload = function (e: any) {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });

    // 假设我们只读取第一个工作表
    const firstSheetName = workbook.SheetNames[0];
    //所有工作表名称
    // console.log(workbook.SheetNames);
    //所有工作表数据 需要用XLSX.utils.sheet_to_json(worksheet, { header: 1 });转换成数组格式
    // console.log(workbook.Sheets);
    const worksheet = workbook.Sheets[firstSheetName];
    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    // console.log(jsonData);
    // 将JSON数据转换成文本
    let text = JSON.stringify(jsonData);
    // console.log(text);
  };

  data.loading = false;
};
</script>
<template>
  <Header />

  <div class="main-container">
    <a-card class="mt-20" title="样本管理">
      <template #extra>
        <a-space>
          <a-upload
            v-model:file-list="data.fileList"
            :customRequest="customUpload"
            accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            name="file"
            :multiple="false"
            :showUploadList="false"
          >
            <a-button :loading="data.loading" type="primary">导入文件</a-button>
          </a-upload>
        </a-space>
      </template>
    </a-card>
  </div>
</template>

<style lang="less" scoped></style>