vue3 excel文件导入

前言

最近写小组官网涉及到了excel文件导入的功能 场景是导入小构成员年级 班级 邮箱 组别 姓名等基本信息的excel表格用于展示各组信息
使用

先下载js库

1. npm install xlsx

复制代码

为了提高代码的复用性 我将它写成了一个通用的函数

1. import apiClient from "@/api/axios";
2. import * as XLSX from "xlsx";
4. interface UserData {
5.   姓名: string;
6.   学号: string;
7.   邮箱: string;
8.   班级: string;
9.   年级: string;
10.   组别: string;
11.   电话: string;
12.   QQ: string;
13. }
15. // 验证文件后缀
16. function validateFileExtension(fileName: string): boolean {
17.   return fileName.toLowerCase().endsWith(".xlsx");
18. }
20. // 验证Excel字段
21. async function validateExcelFields(file: File): Promise<string | boolean> {
22.   return new Promise((resolve, reject) => {
23.     const reader = new FileReader();
24.     reader.onload = (e) => {
25.       try {
26.         const data = new Uint8Array(e.target?.result as ArrayBuffer);
27.         const workbook = XLSX.read(data, { type: "array" });
28.         const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
29.         const jsonData = XLSX.utils.sheet_to_json<UserData>(firstSheet);
31.         if (jsonData.length === 0) {
32.           reject("Excel文件内容为空");
33.           return;
34.         }
36.         const requiredFields = [
37.           "姓名",
38.           "学号",
39.           "班级",
40.           "年级",
41.           "组别",
42.           "电话",
43.           "QQ",
44.         ];
46.         const missingFields = requiredFields.filter(
47.           (field) => !(field in jsonData[0]),
48.         );
50.         if (missingFields.length > 0) {
51.           reject(`文件缺少必要字段`);
52.           return;
53.         }
55.         resolve(true);
56.       } catch (error) {
57.         reject("文件解析失败");
58.       }
59.     };
60.     reader.onerror = () => reject("文件读取失败");
61.     reader.readAsArrayBuffer(file);
62.   });
63. }
65. //批量导入
66. export async function processFiles(file: File) {
67.   if (!validateFileExtension(file.name)) {
68.     throw "请上传.xlsx格式的文件";
69.   }
70.   try {
71.     const validationResult = await validateExcelFields(file);
72.     if (validationResult !== true) {
73.       throw validationResult as string;
74.     }
75.     const formData = new FormData();
76.     formData.append("file", file);
78.     return await apiClient.post("/userManager/teamInfo/addUsers", formData, {
79.       headers: {
80.         "Content-Type": "multipart/form-data",
81.       },
82.     });
83.   } catch (error) {
84.     // 修改此处：将返回改为抛出
85.     if (error instanceof Error) {
86.       throw error.message;
87.     }
88.     throw typeof error === "string" ? error : "未知错误";
89.   }
90. }
92. // 模拟非.xlsx 文件
93. const nonXlsxFile = new File([], "example.txt", { type: "text/plain" });
94. processFiles(nonXlsxFile).then((result) => {
95.   console.log(result);
96. });

复制代码

该文件可以在用户上传时查抄上传的文件后缀是否为xlsx 以及假如上传的文件后缀是xlsx
那么查抄表格中是否有该有的字段 假如没有则直接拦截不发送哀求
在vue文件中的使用

1. const handleXlsx = (e: Event) => {
2.   const target = e.target as HTMLInputElement;
3.   if (target.files) {
4.     processFiles(target.files[0])
5.       .then((response) => {
6.         showAlert("上传成功", "pass");
7.         updateData(grade.value, group.value);
8.         target.value = "";
9.       })
10.       .catch((error) => {
11.         showAlert(error, "error");
12.       });
13.   }
14. };

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。