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

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

效果

代码

typescript"><!--* @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-uploadv-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>