IT评测·应用市场-qidao123.com技术社区

标题: vue3 excel文件导入 [打印本页]
作者: tsx81428    时间: 3 天前
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/) Powered by Discuz! X3.4