Luckysheet 在线预览 excel

官方文档:https://mengshukeji.gitee.io/luckysheetdocs/
其他方式集合:https://baijiahao.baidu.com/s?id=1630963094390097886&wfr=spider&for=pc

1 基本介绍

Luckysheet ,一款纯前端类似excel的在线表格,功能强大、配置简单、完全开源。

2 引入依赖

引入依赖,有2种方式

2.1 CDN







 

2.2 本地引入

 





3 初始化表格

指定一个表格容器 “id=luckysheet”




    
    Title
    
    
    
    
    
    



预览效果:


image.png

4 添加表格数据




    
    Title
    
    
    
    
    
    




效果:


image.png

4 从后端获取动态数据

上面的数据都是前端的死数据,如果想要从后端读取Excel数据,配置loadUrl的地址,Luckysheet会通过ajax请求表格数据,默认载入status为1的sheet数据中的所有data,其余的sheet载入除data字段外的所有字段

4.1 使用loadUrl加载服务端数据


关于返回的数据格式,请看官方详细文档:
https://blog.csdn.net/DCDC2020/article/details/108486525

4.2 非loadUrl获取动态数据

4.2.1 前端ajax获取json数据,赋值 options.data

4.2.2 后端读取Excel 封装返回json

public JsonResponse previewExcel(String url){
       File file = new File(url);
       if (null == file) {
           LOGGER.info("读取excel文件失败,文件为空");
           return null;
       }

       Workbook wb = createWorkbook(file);
       if (null == wb) {
           return null;
       }
       //返回封装json
       List returnList=new ArrayList<>();
       try {
           int sheetNum = wb.getNumberOfSheets();
           //循环遍历sheet
           for (int currentSheet = 0; currentSheet < sheetNum; currentSheet++) {
               ExcelJson excelJson=new ExcelJson();
               List cellDataList=new ArrayList<>();
               Sheet sheet = wb.getSheetAt(currentSheet);
               String sheetName = sheet.getSheetName();
               excelJson.setName(sheetName);
               excelJson.setIndex(currentSheet+1);
               excelJson.setOrder(currentSheet);
               //获得总列数
               int coloumNum=sheet.getRow(0).getPhysicalNumberOfCells();
               // 得到当前工作表的行数
               int rowNum = sheet.getLastRowNum();
               for (int j = 0; j <= rowNum; j++) {
                   Row row = sheet.getRow(j);
                   if (row != null) {
                       //循环列
                       for (int i = 0; i < coloumNum; i++) {
                           CellData cellData=new CellData();
                           cellData.setR(j);//行
                           cellData.setC(i);//列
                           cellData.setV(getCellValue(row.getCell(i)));//值
                           cellDataList.add(cellData);
                       }
                   }
               }

               excelJson.setCelldata(cellDataList);
               returnList.add(excelJson);
           }

       } catch (RuntimeException e) {
           LOGGER.error("预览指标数据出错!", e);
           //抛出异常以触发数据回滚
           throw e;
       } finally {
           try {
               wb.close();
           } catch (IOException e) {
               e.printStackTrace();
           }
       }

       JsonResponse response = new JsonResponse(ReturnCodeEnum.SUCCESS);
       JSONObject jsonObject = new JSONObject();
       jsonObject.put("returnList", returnList);
       response.setData(jsonObject);
       return response;

   }

你可能感兴趣的:(Luckysheet 在线预览 excel)