vue 组件 excel

### 如何在 Vue 组件中处理 Excel 文件

#### 处理 Excel 文件的依赖库介绍

为了有效地在 Vue 应用程序中处理 Excel 文件，可以利用 `xlsx` 和 `file-saver` 这两个 JavaScript 库。前者用于读取和写入 Excel 数据，后者则负责将生成的数据保存为实际文件并触发浏览器下载行为[^2]。

#### 实现导出功能

对于导出操作而言，在前端部分主要涉及两步工作流程：

1. 构建要被转换成表格形式的数据结构；
2. 利用上述提到的工具包完成最终文档组装以及分发给客户端。

下面是一个简单的例子来展示怎样把 JSON 数组转储至 .xls 格式的电子表单内：

import XLSX from 'xlsx';
import { saveAs } from 'file-saver';

function exportToExcel(data, fileName) {
    const ws = XLSX.utils.json_to_sheet(data);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
    
    /* generate file and download */
    XLSX.writeFile(wb, `${fileName}.xlsx`);
}

此函数接收待输出的信息集合（通常是从 Vuex store 或者 API 请求获得），连同期望设定的目标名称一起传递进来；内部调用了 SheetJS 提供的一系列静态方法构建整个 workbook 对象，并指定 sheet 的名字叫做 “SheetJS”。最后一步就是借助 writeFile 函数直接写出磁盘上的二进制流并且自动弹出另存对话框让用户选择存储位置了。

#### 实现导入功能

当涉及到从外部源加载已有记录时，则需先捕获用户选取的具体档案实例，再经由 FileReader 接口异步解析其携带的内容。这里推荐采用 Element Plus (前身为Element UI)框架下的 Upload 小部件作为交互界面的一部分，因为它内置了许多实用特性比如拖拽支持、进度条显示等等[^3]。

一旦接收到上传事件通知之后就可以着手准备后续动作啦！

<template>
  <!-- ... -->
  <el-upload class="upload-demo" drag action="#" :on-change="handleChange">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">Drop files here or click to upload</div>
  </el-upload>
  <!-- ... -->
</template>

<script setup lang="ts">
// ...
async function handleChange(file: any){
    let reader = new FileReader();

    reader.onload = async(event)=>{
        try{
            var data = event.target?.result;
            /* Read the workbook */
            const workbook = XLSX.read(data,{type:'binary'});
            
            /* Get first worksheet */
            const firstSheetName = workbook.SheetNames[0];
            const worksheet = workbook.Sheets[firstSheetName];

            /* Convert to json */
            console.log(XLSX.utils.sheet_to_json(worksheet));
        }
        catch(e){
            alert('Error reading file');
            throw e;
        }
    };

    await reader.readAsBinaryString(file.raw);
};
</script>

这段代码片段展示了如何监听文件变化事件并将选中的 Excel 文档转化为易于操纵的对象数组以便进一步加工处理。值得注意的是，此处采用了基于 Promise 的方式确保异步任务按序执行完毕后再继续向下走逻辑分支。