问题背景
当下载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 正确识别文件编码,并且按照正确的方式解析文件内容。