前端表格解析方法

工具类文件

1. // fileUtils.ts
3. import { ref } from 'vue';
4. import * as xlsx from 'xlsx';
6. interface RowData {
7.   [key: string]: any;
8. }
10. export const tableData = ref<RowData[]>([]);
12. export async function handleFileSelect(url: string): Promise<void> {
13.   try {
14.     const response = await fetch(url);
15.     const blob = await response.blob();
16.     const reader = new FileReader();
18.     reader.onload = (e: ProgressEvent<FileReader>) => {
19.       if (e.target && e.target.result) {
20.         const data = new Uint8Array(e.target.result as ArrayBuffer);
21.         const workbook = xlsx.read(data, { type: 'array' });
23.         const worksheet = workbook.Sheets[workbook.SheetNames[0]];
24.         const jsonData = xlsx.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];
26.         // 提取标题并保持其顺序
27.         const headers = jsonData[0];
28.         console.log('Extracted Headers:', headers);
30.         // 处理行（从索引1开始跳过标题）
31.         jsonData.slice(1).forEach((row) => {
32.           const rowData: RowData = {};
33.           headers.forEach((header, index) => {
34.             rowData[header] = row[index];
35.           });
36.           tableData.value.push(rowData);
37.         });
39.         console.log('Processed Table Data:', tableData.value);
40.       }
41.     };
43.     reader.readAsArrayBuffer(blob);
44.   } catch (error) {
45.     console.error('获取或读取文件时出错:', error);
46.   }
47. }

复制代码

调用方法

1. const url ='https://xxxxx.xlsx';
2.     await handleFileSelect(url);

复制代码

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