vue+xlsx导入导出

### 实现 Spring Boot 3 和 Vue 3 结合 Element UI 的导入导出功能 #### 后端部分：Spring Boot 3 配置 为了支持 Excel 文件的导入导出，在 `pom.xml` 中添加必要的依赖项[^2]： ```xml <dependencies> <!-- Spring Web --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- MyBatis Plus for ORM --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.5.1</version> </dependency> <!-- Apache POI for Excel handling --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>5.0.0</version> </dependency> <!-- Other dependencies as needed --> </dependencies> ``` 定义控制器来处理上传和下载请求。以下是用于接收文件并保存到数据库以及从数据库读取数据生成 Excel 文件的方法示例。 ```java @RestController @RequestMapping("/api/excel") public class ExcelController { @PostMapping("/upload") public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file) { try { // Process the uploaded file and save data to database using service layer. excelService.importData(file.getInputStream()); return ResponseEntity.ok("Upload successful"); } catch (Exception e) { return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(e.getMessage()); } } @GetMapping("/download") public void download(HttpServletResponse response, HttpServletRequest request) throws IOException { HSSFWorkbook workbook = excelService.exportData(); String fileName = "exported_data.xls"; response.setContentType("application/vnd.ms-excel;charset=utf-8"); response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, StandardCharsets.UTF_8)); ServletOutputStream out = response.getOutputStream(); workbook.write(out); out.flush(); out.close(); } } ``` #### 前端部分：Vue 3 和 Element UI 集成 在前端应用中引入 Element UI 并设置全局使用[^1]: ```javascript import { createApp } from 'vue'; import App from './App.vue'; // Import ElementUI components globally import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 创建一个简单的表单允许用户选择要上载的文件，并通过 API 发送到服务器；同样也提供按钮触发下载操作: ```html <template> <div style="margin-top: 20px;"> <el-upload action="/api/excel/upload" :on-success="handleSuccess"> <el-button type="primary">点击上传</el-button> </el-upload> <br><br> <el-button @click="downloadExcel()">点击下载</el-button> </div> </template> <script setup lang="ts"> import axios from 'axios'; function handleSuccess(response){ ElMessage({ message: '成功', type: 'success' }); } async function downloadExcel(){ await axios.get('/api/excel/download', { responseType: 'blob' }) .then((res)=>{ const url = window.URL.createObjectURL(new Blob([res.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download','data.xlsx'); document.body.appendChild(link); link.click(); }); } </script> ```

首先，你需要安装 `xlsx` 包来处理 Excel 文件的导出。你可以使用 npm 或者 yarn 来安装该包： ```bash npm install xlsx # 或者 yarn add xlsx ``` 接下来，在你的 Vue 组件中，你可以按照以下步骤导出 Excel 文件： 1. 导入 `xlsx` 包： ```javascript import XLSX from 'xlsx'; ``` 2. 创建一个处理导出的方法，例如 `exportExcel`： ```javascript exportExcel() { // 创建一个Workbook对象，用于存储Excel文件内容 const workbook = XLSX.utils.book_new(); // 创建一个Worksheet对象，用于存储工作表数据 const worksheet = XLSX.utils.json_to_sheet(this.data); // 将Worksheet对象添加到Workbook对象中 XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); // 将Workbook对象转换为二进制数据流 const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); // 创建Blob对象，并设置MIME类型为Excel文件 const blob = new Blob([excelData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); // 创建下载链接，并设置相关属性 const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'data.xlsx'; // 下载文件的名称 // 模拟点击下载链接进行文件下载 link.click(); // 释放URL对象 URL.revokeObjectURL(url); } ``` 3. 在你的模板中添加一个按钮或者其他触发导出的元素，并调用 `exportExcel` 方法： ```html <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> ``` 在上述代码中，`this.data` 是你要导出的数据，可以是一个数组或者其他格式的数据。`exportExcel` 方法将数据转换为 Excel 文件，并通过创建下载链接实现文件的下载。 希望以上步骤对你有所帮助！