我叫果冻 2023-10-10 15:16 采纳率: 56.5%
浏览 55
已结题

easyEcexl 导出，并且显示进度条

问题：如何使用easyEcexl 导出，并且显示进度条，后端技术方案如何设计，与前端及交互

  • 写回答

2条回答 默认 最新

  • Leodong. 2023-10-10 15:22
    关注

    该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
    要使用easyExcel导出并显示进度条，后端技术方案可以设计如下：

    1. 首先，在项目中引入easyExcel依赖。

    2. 创建一个导出的实体类，用于存储要导出的数据。

    3. 编写一个监听器类，实现AnalysisEventListener接口，用于处理导出过程中的事件。

    4. 在监听器类中，重写invoke和doAfterAllAnalysed方法，分别处理数据填充和导出完成后的操作。

    5. 在invoke方法中，计算已填充数据的行数，然后根据行数计算进度百分比，并通过前端接口返回给前端。

    6. 前端接收到进度百分比后，使用JavaScript绘制进度条。

    下面是一个简单的示例代码：

    后端代码：

    import com.alibaba.excel.EasyExcel;
import com.alibaba.excel.write.metadata.WriteSheet;
import com.alibaba.excel.write.metadata.fill.FillConfig;
import com.alibaba.excel.write.metadata.fill.FillWrapper;
import com.alibaba.excel.write.metadata.style.WriteCellStyle;
import com.alibaba.excel.write.metadata.style.WriteFont;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.List;

@RestController
public class ExcelExportController {

    @GetMapping("/export")
    public void export(HttpServletResponse response) throws IOException {
        // 设置响应头
        response.setContentType("application/vnd.ms-excel");
        response.setCharacterEncoding("utf-8");
        String fileName = URLEncoder.encode("测试", "UTF-8");
        response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");

        // 准备数据
        List<Data> dataList = new ArrayList<>();
        for (int i = 0; i < 1000; i++) {
            dataList.add(new Data("测试" + i, "数据" + i));
        }

        // 创建监听器
        DataExportListener dataExportListener = new DataExportListener();

        // 导出数据
        EasyExcel.write(response.getOutputStream(), Data.class)
                .registerWriteHandler(dataExportListener)
                .sheet("Sheet1")
                .doWrite(dataList);
    }

    private static class DataExportListener extends AnalysisEventListener<Data> {
        private int progress = 0;

        @Override
        public void invoke(Data data, AnalysisContext context) {
            // 填充数据
            WriteSheet writeSheet = context.writeSheetHolder().getWriteSheet();
            WriteCellStyle headWriteCellStyle = new WriteCellStyle();
            headWriteCellStyle.setFillForegroundColor(IndexedColors.GREY_25_PERCENT.getIndex());
            headWriteCellStyle.setFillPatternType(FillPatternType.SOLID_FOREGROUND);
            WriteFont headWriteFont = new WriteFont();
            headWriteFont.setFontName("宋体");
            headWriteFont.setFontHeightInPoints((short) 12);
            headWriteCellStyle.setWriteFont(headWriteFont);
            writeSheet.setHead(createHead(data, headWriteCellStyle));

            // 计算进度百分比
            progress += 100 / dataList.size();
            // 通过前端接口返回进度百分比
            // ...
        }

        @Override
        public void doAfterAllAnalysed(AnalysisContext context) {
            // 导出完成后的操作
            // ...
        }
    }
}

    前端代码（HTML + JavaScript）：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyExcel 导出进度条</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <button id="exportBtn">导出Excel</button>
    <div id="progressBar" style="width: 0%; height: 20px; background-color: blue;"></div>

    <script>
        $("#exportBtn").click(function () {
            $.get("/export", function (data) {
                // 更新进度条
                var progress = parseInt(data);
                $("#progressBar").css("width", progress + "%").attr("aria-valuenow", progress).text(progress + "%");
            });
        });
    </script>
</body>
</html>

    这个示例中，后端使用EasyExcel导出数据，并通过前端接口返回进度百分比。前端使用jQuery获取进度百分比，并更新进度条。你可以根据自己的需求进行调整。

    如果以上回答对您有所帮助，点击一下采纳该答案～谢谢

    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月18日
  • 创建了问题 10月10日

悬赏问题

  • ¥15 csmar数据进行spss描述性统计分析
  • ¥15 各位请问平行检验趋势图这样要怎么调整？说标准差差异太大了
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
  • ¥15 wpf界面一直接收PLC给过来的信号，导致UI界面操作起来会卡顿
  • ¥15 init i2c:2 freq:100000[MAIXPY]: find ov2640[MAIXPY]: find ov sensor是main文件哪里有问题吗
  • ¥15 运动想象脑电信号数据集.vhdr
  • ¥15 三因素重复测量数据R语句编写，不存在交互作用
  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？