vue3读取excel

### Vue3 读取 Excel 文件教程 #### 准备工作 为了在 Vue3 中实现读取 Excel 文件的功能，需要引入 `xlsx` 库。此库能够解析 `.xls` 和 `.xlsx` 类型的文件，并将其转换为 JavaScript 对象以便进一步处理。 安装依赖可以通过 npm 或 yarn 完成： ```bash npm install xlsx --save ``` 或者 ```bash yarn add xlsx ``` #### 组件设计 创建一个新的组件用于展示上传按钮以及表格预览区域。这里假设已经配置好了基本的 Vue3 环境。 ```html <template> <div class="upload-excel"> <!-- File input --> <input type="file" @change="handleFileChange"/> <!-- Table preview area --> <table v-if="data.length > 0"> <thead> <tr> <th v-for="(header, index) in headers" :key="index">{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in data" :key="rowIndex"> <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td> </tr> </tbody> </table> </div> </template> <script setup> import { ref } from 'vue'; import * as XLSX from 'xlsx'; const file = ref(null); const data = ref([]); const headers = ref([]); function handleFileChange(e){ const files = e.target.files; if (files && files[0]) { readFile(files[0]); } } async function readFile(fileObj){ /* 将二进制流转化为ArrayBuffer */ var reader = new FileReader(); reader.onload = async function(e) { let arrayBuffer = this.result; await processWorkbook(arrayBuffer); }; reader.readAsArrayBuffer(fileObj); } async function processWorkbook(buffer){ try{ // 解析workbook对象 const workbook = XLSX.read(buffer,{type:'array'}); // 获取第一个sheet的名字 const firstSheetName = workbook.SheetNames[0]; // 获得所选中的工作表的数据 const worksheet = workbook.Sheets[firstSheetName]; // 将其转为json格式 const jsonData = XLSX.utils.sheet_to_json(worksheet,{ raw:false, defval:"" }); // 处理数据结构适配前端渲染逻辑 formatData(jsonData); }catch(error){ console.error('Error processing workbook:', error); } } // 数据格式化函数 function formatData(rows){ // 假设每行的第一个元素作为列名 if (!rows || rows.length === 0) return; // 提取头部信息 headers.value = Object.keys(rows[0]); // 设置主体内容 data.value = rows.map(row => headers.value.map(key => row[key])); } </script> ``` 这段代码实现了从本地选择 Excel 文件后自动加载并显示其中的内容。通过监听 `<input>` 的 change 事件触发文件读取流程；利用 `FileReader API` 实现异步读取操作；最后借助于 `xlsx` 工具包完成对 Excel 文档的实际解析过程[^1]。