csv下载的excel乱序问题

问题背景

当下载csv时，number及wps打开都没有问题，但excel打开出现乱序啊

function downloadCSV(csv: string, filename: string) {
    // const bom = "\uFEFF"
    // const blob = new Blob([bom, csv], { type: "text/csv;charset=utf-8;" })
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", filename)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

解决方案

当增加bom时乱序解决

function downloadCSV(csv: string, filename: string) {
    const bom = "\uFEFF"
    const blob = new Blob([bom, csv], { type: "text/csv;charset=utf-8;" })
    // const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", filename)
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}

问题结论

在下载 CSV 文件时，如果不添加 BOM（Byte Order Mark，字节顺序标记），会出现 Excel 打开乱码或者数据错误的问题。这是因为 Excel 默认使用 ANSI 编码打开 CSV 文件，而 ANSI 编码与 UTF-8 编码存在差异，如果没有 BOM，Excel 无法正确识别文件编码，从而导致乱码或者数据错误的问题。

因此，为了确保下载的 CSV 文件可以在 Excel 中正确打开，需要在文件内容前添加 BOM。BOM 是一个特殊的 Unicode 字符，它可以用来表示文本文件的字节顺序和编码方式。在 UTF-8 编码中，BOM 的字节序列是 EF BB BF，将 BOM 添加到文件内容前，可以让 Excel 正确识别文件编码，并且按照正确的方式解析文件内容。