目录

• 基本实现
• 后端 - Spring Boot
• • 依赖
  • 创建Controller（demo）
• 前端 - Vue 3 + Vuetify
• • 安装Vuetify和Axios：
  • 创建组件
• 注意事项

基本实现

• 实现在线预览和编辑Excel的功能，尤其是编辑功能，涉及到更复杂的操作，因为需要在Web端提供类似桌面Excel软件的编辑体验。
• 这通常需要一个强大的前端库来处理表格数据的渲染和编辑，以及后端的支持来保存更改。

后端 - Spring Boot

依赖

           org.apache.poi        poi-ooxml        5.2.3       

创建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;     @RestController    public 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> previewExcel() {            List> data = new ArrayList<>();            for (Row row : sheet) {                List rowData = new ArrayList<>();                for (Cell cell : row) {                    rowData.add(getCellValueAsString(cell));                }                data.add(rowData);            }            return data;        }         @PostMapping("/api/excel/edit")        public ResponseEntity 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 

创建组件

注意事项

• 这个示例中的编辑功能非常基础，仅支持修改单个单元格的值。对于更复杂的编辑需求，如公式计算、图表、样式等，可能需要使用专门的在线表格编辑库，如SheetJS或ag-Grid。
• 编辑功能中，每次只更新一个单元格，实际应用中可能需要批量更新多个单元格，以减少与服务器的交互次数。
• 本示例中，编辑后的Excel文件直接保存到服务器的target目录下，实际应用中应考虑更安全的数据存储方案，如数据库或对象存储服务。
• 考虑到性能和用户体验，对于大型Excel文件，可能需要实现分页加载和异步数据更新机制