前端表格解析方法

工具类文件

javascript 复制代码
// fileUtils.ts

import { ref } from 'vue';
import * as xlsx from 'xlsx';

interface RowData {
  [key: string]: any;
}

export const tableData = ref<RowData[]>([]);

export async function handleFileSelect(url: string): Promise<void> {
  try {
    const response = await fetch(url);
    const blob = await response.blob();
    const reader = new FileReader();

    reader.onload = (e: ProgressEvent<FileReader>) => {
      if (e.target && e.target.result) {
        const data = new Uint8Array(e.target.result as ArrayBuffer);
        const workbook = xlsx.read(data, { type: 'array' });

        const worksheet = workbook.Sheets[workbook.SheetNames[0]];
        const jsonData = xlsx.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];

        // 提取标题并保持其顺序
        const headers = jsonData[0];
        console.log('Extracted Headers:', headers);

        // 处理行(从索引1开始跳过标题)
        jsonData.slice(1).forEach((row) => {
          const rowData: RowData = {};
          headers.forEach((header, index) => {
            rowData[header] = row[index];
          });
          tableData.value.push(rowData);
        });

        console.log('Processed Table Data:', tableData.value);
      }
    };

    reader.readAsArrayBuffer(blob);
  } catch (error) {
    console.error('获取或读取文件时出错:', error);
  }
}

调用方法

javascript 复制代码
const url ='https://xxxxx.xlsx';
    await handleFileSelect(url);
相关推荐
jiangzhihao05151 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI3 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front4 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie5 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀5 小时前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻5 小时前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
叶梅树5 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔5 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
Asthenia04126 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj506 小时前
前端基础之《React(1)—webpack简介》
前端·react