vue3模拟excel

### 如何用 Vue3 实现 Excel 类似的表格功能 #### 安装必要依赖 为了实现类似于Excel的表格功能，在项目中需要安装一些必要的库。例如，`xlsx`用于处理Excel文件读取和写入操作；`file-saver`则用来保存生成的文件。 ```bash npm install xlsx file-saver ``` #### 创建基础表格组件 创建一个新的Vue组件来作为表格的基础结构。这里定义了一个简单的HTML表格模板，并通过props接收外部传入的数据源。 ```html <template> <table border="1"> <thead> <tr v-for="(header, index) in headers" :key="'h' + index"> <th>{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(row, rowIndex) in data" :key="'r' + rowIndex"> <td v-for="(cell, cellIndex) in row" :key="'c' + cellIndex">{{ cell }}</td> </tr> </tbody> </table> </template> <script setup> import { defineProps } from 'vue'; const props = defineProps({ headers: Array, data: Array }); </script> ``` #### 添加上传与解析功能 为了让用户能够上传自己的Excel文档并即时查看其内容，需增加文件输入框以及相应的事件处理器来进行文件加载和数据转换工作[^1]。 ```javascript // 在 script 部分加入如下代码 import * as XLSX from 'xlsx'; import { ref } from 'vue'; let uploadedData = ref(null); function handleFileUpload(event){ let files = event.target.files; if(files.length === 0) return; var reader = new FileReader(); reader.onload = function(e){ let data = new Uint8Array(e.target.result); let workbook = XLSX.read(data,{type:'array'}); // 假设只有一张表单 let firstSheetName = workbook.SheetNames[0]; let worksheet = workbook.Sheets[firstSheetName]; // 将 Sheet 转化成 JSON 数据 uploadedData.value = XLSX.utils.sheet_to_json(worksheet); }; reader.readAsArrayBuffer(files[0]); } ``` 同时修改模板部分以支持文件选择器： ```html <input type="file" @change="handleFileUpload"/> <!-- 显示已上传的内容 --> <div v-if="uploadedData"> <!-- 使用之前定义好的表格组件显示数据 --> <TableComponent :headers="Object.keys(uploadedData[0])" :data="uploadedData"></TableComponent> </div> ``` #### 导出当前视图中的表格为Excel文件 当希望把页面上展示出来的表格导出成为真正的Excel文件时，则可以利用先前提到过的`exportExcel()`函数逻辑[^2]。 ```javascript function exportCurrentViewToExcel(){ try { const tableDOM = document.querySelector('table'); // 获取整个表格 DOM const wb = XLSX.utils.table_to_book(tableDOM, {raw:true}); const wbout = XLSX.write(wb, {bookType:'xls', bookSST:true,type:'array'}); import('file-saver').then(FileSaver => { FileSaver.saveAs(new Blob([wbout],{type:"application/octet-stream"}),"导出的文件名.xls"); }); } catch (e) { console.error('导出失败:', e.message); } } // 给按钮绑定点击事件触发此方法即可完成导出动作 <button @click="exportCurrentViewToExcel">导出为Excel</button> ``` 以上就是基于Vue3框架构建具有基本Excel特性的Web应用程序的方法概述。这不仅限于简单地导入/导出Excel文件，还包括了动态渲染表格、响应式布局调整等方面的工作。