Oracle APEX 23.1.5交互式网格下载CSV如何添加双引号

问题背景 #

在Oracle APEX 23.1.5中，针对静态ID为maingrid的Interactive Grid（交互式网格），使用以下JavaScript触发默认CSV导出时，导出内容的字段（包括空值）未被双引号包裹：

var ig$ = apex.region("maingrid").widget();  

ig$.interactiveGrid("getActions").invoke("show-download-dialog");  

 $('.ui-button--hot').trigger("click");  

需要修改导出逻辑，让所有字段（含空值）都被双引号包裹，达到预期格式。

解决方案：自定义CSV生成与下载 #

APEX默认的CSV导出仅会给包含特殊字符的字段添加双引号，无法强制全局添加。因此需要替换原有导出逻辑，通过JavaScript手动获取IG数据并生成符合要求的CSV：

替换动态操作中的JavaScript代码为以下内容：

// 获取Interactive Grid核心实例与数据模型
var ig$ = apex.region("maingrid").widget();
var igGrid = ig$.interactiveGrid("getViews", "grid");
var model = igGrid.model;
var columns = igGrid.columns;

// 生成带双引号的表头行
var headerRow = columns.map(col => `"${col.headerText}"`).join(",") + "\n";

// 遍历数据行，生成带双引号的单元格内容（含空值处理）
var dataRows = [];
model.forEach(function(record) {
    var row = columns.map(col => {
        var value = model.getValue(record, col.property);
        // 处理空值，并转义内容中的双引号（避免CSV格式错误）
        var escapedValue = (value == null || value === "") ? "" : String(value).replace(/"/g, '""');
        return `"${escapedValue}"`;
    }).join(",");
    dataRows.push(row);
});

// 拼接完整CSV内容
var csvContent = headerRow + dataRows.join("\n");

// 创建下载链接并触发下载
var blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
var url = URL.createObjectURL(blob);
var link = document.createElement("a");
link.href = url;
link.setAttribute("download", "maingrid_export.csv"); // 自定义导出文件名
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);

代码说明 #

• 直接从IG的数据模型中读取当前展示的所有数据，确保导出内容与页面一致
• 对表头和每个单元格内容都用双引号包裹，空值自动处理为""
• 转义内容中的双引号（将"替换为""），符合CSV格式规范，避免导出后解析出错
• 支持自定义导出文件名，可修改download属性的值调整

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