目录
- 基本实现
- 后端 - Spring Boot
-
- 前端 - Vue 3 + Vuetify
-
- 注意事项
基本实现
- 实现在线预览和编辑Excel的功能,尤其是编辑功能,涉及到更复杂的操作,因为需要在Web端提供类似桌面Excel软件的编辑体验。
- 这通常需要一个强大的前端库来处理表格数据的渲染和编辑,以及后端的支持来保存更改。
后端 - Spring Boot
依赖
<dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId><version>5.2.3</version></dependency>
创建Controller(demo)
package com.zjl.controller;import org.apache.poi.ss.usermodel.*;import org.apache.poi.xssf.usermodel.XSSFWorkbook;import org.springframework.core.io.ClassPathResource;import org.springframework.http.ResponseEntity;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.util.ArrayList;import java.util.List;@RestControllerpublic class ExcelController {private Workbook workbook;private Sheet sheet;public ExcelController() throws IOException {workbook = new XSSFWorkbook(new ClassPathResource("sample.xlsx").getInputStream());sheet = workbook.getSheetAt(0);}@GetMapping("/api/excel/preview")public List<List<String>> previewExcel() {List<List<String>> data = new ArrayList<>();for (Row row : sheet) {List<String> rowData = new ArrayList<>();for (Cell cell : row) {rowData.add(getCellValueAsString(cell));}data.add(rowData);}return data;}@PostMapping("/api/excel/edit")public ResponseEntity<String> editExcel(@RequestParam("row") int row,@RequestParam("column") int column,@RequestParam("value") String value) {Row r = sheet.getRow(row);if (r == null) {r = sheet.createRow(row);}Cell c = r.getCell(column);if (c == null) {c = r.createCell(column);}c.setCellValue(value);try {FileOutputStream fileOut = new FileOutputStream("target/sample.xlsx");workbook.write(fileOut);fileOut.close();} catch (IOException e) {return ResponseEntity.badRequest().body("Error saving changes.");}return ResponseEntity.ok("Changes saved successfully.");}private String getCellValueAsString(Cell cell) {switch (cell.getCellType()) {case STRING:return cell.getStringCellValue();case NUMERIC:return String.valueOf(cell.getNumericCellValue());default:return "";}}}
前端 - Vue 3 + Vuetify
- 为了简化前端的表格编辑,可以使用Vuetify这样的框架,它提供了丰富的UI组件。
- 创建Vue 3项目,使用Vite或Vue CLI创建项目。
安装Vuetify和Axios:
npm install vuetify axios
创建组件
<template><v-data-table:headers="headers":items="rows":items-per-page="10"item-key="id"show-expandsingle-expanddensefixed-headerheight="600"@update:items="onUpdateItems"><template v-slot:item="{ item }"><tr><td v-for="(cell, index) in item" :key="index"><input type="text" :value="cell" @change="handleCellChange($event, item, index)"></td></tr></template></v-data-table></template><script setup>import axios from 'axios';const { data, pending } = await useAsyncData('excel-preview', () => {return axios.get('/api/excel/preview').then(response => response.data);});const headers = computed(() => data.value ? data.value[0] : []);const rows = computed(() => data.value ? data.value.slice(1) : []);function handleCellChange(event, row, index) {const newRow = [...rows.value];newRow[row.index][index] = event.target.value;updateRows(newRow);}function updateRows(rows) {axios.post('/api/excel/edit', {row: rows[0].index,column: 0,value: rows[0][0]}).then(response => {console.log(response.data);}).catch(error => {console.error(error);});}</script>
注意事项
- 这个示例中的编辑功能非常基础,仅支持修改单个单元格的值。对于更复杂的编辑需求,如公式计算、图表、样式等,可能需要使用专门的在线表格编辑库,如SheetJS或ag-Grid。
- 编辑功能中,每次只更新一个单元格,实际应用中可能需要批量更新多个单元格,以减少与服务器的交互次数。
- 本示例中,编辑后的Excel文件直接保存到服务器的target目录下,实际应用中应考虑更安全的数据存储方案,如数据库或对象存储服务。
- 考虑到性能和用户体验,对于大型Excel文件,可能需要实现分页加载和异步数据更新机制