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

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获取进度百分比，并更新进度条。你可以根据自己的需求进行调整。

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

    评论

报告相同问题？

  • JSP数据分页导出下载显示进度条样式
    2020-10-20 23:30
    JSP数据分页导出下载显示进度条样式涉及了后端数据处理、前端界面展示、以及进度条的实时更新等多个知识点。主要技术包括JSP页面的编写、JavaScript与Ajax的应用、CSS样式设计、以及可能的后端存储技术。下面详细...
  • POI实现Excel导入导出并附带加载进度条
    2019-08-30 10:10
    总之，这个项目是一个完整的Java解决方案，用于处理Excel文件的导入导出，同时具备用户友好的进度条显示。它利用了Apache POI的强大功能，结合maven的依赖管理，以及可能的GUI组件，提供了高效且直观的数据操作体验...
  • 进度条显示导出文件进度
    2012-07-24 14:47
    标题"进度条显示导出文件进度"所涉及的知识点主要集中在如何在文件导出过程中实时更新进度条的状态，确保用户能够了解导出的进度。 首先，我们要理解进度条（ProgressBar）组件。在Windows Forms或WPF等桌面应用...
  • 读取excel并且显示进度条
    2024-11-08 21:05
    星尘库的博客 读取excel并且显示进度条 通过C#实现DataGridView加载EXCEL文件，但加载时不能阻塞UI刷新线程，且向UI显示加载进度条。 每读取一定行数更新进度。// 使用 EPPlus 按行读取 Excel 数据并动态更新进度。// 加载完成后...
  • golang 10w数据流式导出excel并且记录进度条
    2023-08-11 17:27
    joker.zeng的博客 【代码】golang 10w数据流式导出excel。
  • php+ajax实现带进度条的大数据排队导出思路以及
    2020-10-25 21:20
    进度条的更新涉及到一些前端技术，如定时器（如`setInterval()`）或`setTimeout()`函数，以周期性地请求后端获取最新的进度信息，然后更新到进度条的显示状态。 整个导出流程的设计思路是分阶段逐步导出数据，同时...
  • ant design中upload组件上传大文件,显示进度条进度的实例
    2021-01-18 17:49
    Upload组件是自带上传进度，但是样式调起来很麻烦，我们要做的就是自定义一个 首先页面要引入组件 Upload， Progress uploadAttachmentsProps = { action: `/api/upload`, showUploadList: false, // 这里关闭...
  • 简易进度条，oc语言.zip
    2025-08-26 15:37
    进度条的设计和实现是编程语言教学和应用中的一个重要环节，尤其对于初学者来说，通过制作进度条，可以更好地理解和掌握编程的基本概念和用户界面的交互逻辑。 本压缩包文件“简易进度条，oc语言.zip”中的内容，...
  • vue导出excel加一个进度条_vue 实现excel导出功能
    2021-01-13 20:55
    九老师的博客 最近Vue项目中用到了导出功能，在网上搜索了一番之后，决定采用Blob方式，这也是大家推荐的一种的方式，特此做下记录。导出Excel功能我是使用vue-cli3.0的框架，所以在安装过程中没有遇到问题,看百度说有些人在安装...
  • 没有解决我的问题, 去提问

问题事件

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