如何将Grafana自定义插件CSV导出分隔符从逗号改为分号

核心原因 #

你遇到的问题主要来自两个层面：

1. 文件解析工具的默认行为：比如Excel这类工具会根据系统区域设置默认选择CSV分隔符（中文环境默认逗号），即使你的文件内容是分号分隔，工具也可能强行按逗号拆分列，导致分号“消失”、数据被拆成多列。
2. 下载环节的声明缺失：虽然你生成的CSV内容正确，但没有在文件中明确声明分隔符类型，也可能在Blob创建时未正确设置编码，导致部分工具无法识别分号作为分隔符。

具体排查与解决步骤 #

1. 确认下载逻辑的Blob创建是否正确 #

检查你生成下载Blob的代码，确保使用正确的MIME类型和编码：

// 正确的Blob创建方式
const blob = new Blob([dataFrameCsv], { type: 'text/csv;charset=utf-8;' });

如果之前的Blob类型只写了text/csv，可能导致编码异常，影响分隔符的识别。

2. 在CSV内容开头添加分隔符声明 #

为了让Excel等工具明确识别分号为分隔符，在生成的CSV字符串最前面添加一行sep=;：

// 修改toCSV后的处理
const rawCsv = toCSV([dataFrame], { delimiter: ';' });
const dataFrameCsv = `sep=;\n${rawCsv}`;

这样打开文件时，工具会自动按分号拆分列，不会再默认用逗号解析。

3. 验证下载流程的完整性 #

检查你创建下载链接的代码，确保没有对生成的CSV字符串做额外的替换或转义处理：

const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'exported_data.csv';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);

这段代码要保证直接使用生成的dataFrameCsv字符串创建Blob，没有中间修改步骤。

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