Oracle APEX交互式网格大数据下载慢及加载提示需求

一、加快下载启动速度 #

你遇到的核心问题是：默认IG下载逻辑会在前端处理15-30万条数据，这个同步操作完全在客户端执行，所以控制台和网络无更新、耗时久——哪怕用了临时表，也绕不开前端的数据整理步骤。推荐两种解决思路：

1. 后台直接生成下载文件（最优方案） #

绕过前端数据处理，直接在数据库端生成CSV/XLSX文件，通过APEX的下载接口返回。点击按钮后直接触发后台逻辑，几乎无前端等待时间。

具体操作：

• 在IG所在页面新增一个按钮（比如命名为「后台导出」），设置按钮行为为「执行PL/SQL代码」
• 编写PL/SQL代码生成目标文件，示例（以CSV为例）：

DECLARE
    l_clob CLOB;
    l_filename VARCHAR2(100) := 'ig_export_' || TO_CHAR(SYSDATE, 'YYYYMMDDHH24MISS') || '.csv';
    -- 替换为你的查询和筛选条件，可通过APEX会话变量同步IG的动态筛选
    CURSOR c_data IS
        SELECT col1, col2, col3 
        FROM your_temp_table 
        WHERE apex_application.g_filters; -- 自动获取当前页面的筛选参数
BEGIN
    DBMS_LOB.CREATETEMPORARY(l_clob, TRUE);
    -- 写入CSV表头
    DBMS_LOB.WRITEAPPEND(l_clob, LENGTH('列1,列2,列3' || CHR(10)), '列1,列2,列3' || CHR(10));
    -- 遍历数据写入，注意处理含逗号/引号的字段避免格式错误
    FOR rec IN c_data LOOP
        DBMS_LOB.WRITEAPPEND(l_clob, LENGTH(
            REPLACE(rec.col1, ',', '\,') || ',' ||
            REPLACE(rec.col2, ',', '\,') || ',' ||
            REPLACE(rec.col3, ',', '\,') || CHR(10)
        ), 
        REPLACE(rec.col1, ',', '\,') || ',' ||
        REPLACE(rec.col2, ',', '\,') || ',' ||
        REPLACE(rec.col3, ',', '\,') || CHR(10));
    END LOOP;
    -- 触发文件下载
    APEX_UTIL.DOWNLOAD_CLOB(
        p_content => l_clob,
        p_filename => l_filename,
        p_mime_type => 'text/csv'
    );
    DBMS_LOB.FREETEMPORARY(l_clob);
END;

• 注意：如果IG有动态筛选条件，apex_application.g_filters会自动同步当前页面的筛选参数，无需手动拼接。

2. 优化前端数据处理（仅适用于客户端全量加载数据的场景） #

如果你的IG是客户端全量加载所有数据，可尝试升级APEX版本（22+版本对IG下载的前端处理有性能优化），但效果远不如后台导出直接。

二、添加下载时的加载动画 #

如果坚持使用默认IG下载按钮，可通过自定义JavaScript拦截点击事件，显示加载动画：

在页面的「JavaScript」属性中添加以下代码：

// 监听IG下载按钮点击事件
$(document).on('click', '.a-IG-button--download', function() {
    // 获取IG工具栏容器，用于挂载加载动画
    var toolbar = $(this).closest('.a-IG-toolbar');
    // 显示APEX内置加载动画
    var spinner = apex.util.showSpinner(toolbar);
    
    // 用setTimeout确保动画先渲染，再执行后续逻辑
    setTimeout(function() {
        // 监听页面卸载事件（下载开始时浏览器会触发），隐藏动画
        $(window).one('beforeunload', function() {
            spinner.remove();
        });
        // 设置30秒超时，防止异常情况下动画残留
        setTimeout(function() {
            if (spinner && spinner.length > 0) {
                spinner.remove();
            }
        }, 30000);
    }, 100);
});

这段代码会在点击下载按钮时立即显示加载动画，当浏览器开始下载（触发beforeunload）时自动隐藏，同时设置超时避免动画一直显示。

内容的提问来源于stack exchange，提问作者Anand Jagtap