一网打尽前端解决利用blob下载csv因多语言而引起的乱码的方法

2024-01-04 10:25:17

前言

在前端开发中，我们经常会遇到需要下载csv文件的情况，csv文件是一种使用逗号分隔各字段的纯文本文件。它因其简单性和通用性而被广泛使用。然而，当我们使用blob下载csv文件时，可能会遇到乱码问题，特别是当csv文件包含多语言时。

乱码原因

csv文件使用逗号分隔各字段，但是不同语言的逗号编码不同。例如，在英文中，逗号使用ASCII码44表示，而在中文中，逗号使用GB2312码12450表示。因此，当我们在使用blob下载csv文件时，如果浏览器没有正确识别csv文件的编码，就会出现乱码。

解决方法

要解决前端利用blob下载csv因多语言而引起的乱码问题，我们可以采用以下方法：

后台把文件流获取成二进制形式并用base64加密返回。
前端把返回的二进制window.atob(data.content)解密,利用Uint8Array 数组类型（表示一个8位无符号整型数组）生成。
使用Blob对象将Uint8Array数组转换为Blob对象。
使用URL.createObjectURL()方法将Blob对象转换为URL。
使用window.open()方法打开URL，即可下载csv文件。

代码示例

// 后台代码
$content = $file->getContents();
$base64 = base64_encode($content);
return response()->json(['content' => $base64]);

// 前端代码
const data = await fetch('download.php');
const content = await data.json();
const binary = window.atob(content.content);
const uint8Array = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
  uint8Array[i] = binary.charCodeAt(i);
}
const blob = new Blob([uint8Array]);
const url = URL.createObjectURL(blob);
window.open(url);