刚刚有小伙伴问我使用js-xlsx导入CSV文件时会出现中文乱码,其实这种问题基本上都是因为文件的编码不对造成的,看过我简书https://www.jianshu.com/p/2a544886dc66这篇文章的小伙伴应该知道CSV其实就是用逗号隔开,行数据进行换行格式的文本文件,所以我们只要从文件编码入手处理问题就行了
首先我新建一个CSV文件,右键用记事本打开,然后查看默认编码是ANSI(一般也就是GBK)
然后,我们打开 https://oss.sheetjs.com/js-xlsx/ 测试下导入这个文件的结果
我们发现导入后显示乱码了,那我们修改下文件格式为UTF-8再次尝试看下
我找了针对js-xlsx的提问,后来发现了https://github.com/SheetJS/js-xlsx/issues/892,其实针对文件编码,官方已经有一个叫https://github.com/sheetjs/js-codepage的库来处理,我从简书https://www.jianshu.com/p/74d405940305的这篇文章中拷出导入功能的示例代码进行稍微的修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.core.min.js"></script>
<script src="./js-codepage-master/dist/cptable.full.js"></script>
<!-- 引入库文件 -->
</head>
<body>
<input type="file" onchange="importf(this)" />
<div id="demo"></div>
<script>
/*
FileReader共有4种读取方法：
1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
*/
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
var isCSV;
function importf(obj) {//导入
if (!obj.files) return;
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
wb = null;
if (isCSV) {
data = rABS ? new Uint8Array(data) : data;
var str = cptable.utils.decode(936, data);
wb = XLSX.read(str, { type: "string" });
}
if (!wb) {
wb = rABS ? XLSX.read(btoa(fixdata(data)), { type: 'base64' }) : XLSX.read(data, { type: 'binary' });
}
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
};
isCSV = f.name.split(".").reverse()[0] == "csv";//判断是否是 CSV
if (rABS) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
obj.value = "";
}
function fixdata(data) { //文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
</script>
</body>
</html>
我们使用ASNI编码的文件进行导入测试看下
但是这时候又有问题了,那就是如果我导入的文件格式就是UTF-8时代码报错了
所以我使用了https://github.com/wayfind/is-utf8/blob/master/is-utf8.js来处理这个问题
isUTF8.js
function isUTF8(bytes) {
var i = 0;
while (i < bytes.length) {
if ((// ASCII
bytes[i] == 0x09 ||
bytes[i] == 0x0A ||
bytes[i] == 0x0D ||
(0x20 <= bytes[i] && bytes[i] <= 0x7E)
)
) {
i += 1;
continue;
}
if ((// non-overlong 2-byte
(0xC2 <= bytes[i] && bytes[i] <= 0xDF) &&
(0x80 <= bytes[i + 1] && bytes[i + 1] <= 0xBF)
)
) {
i += 2;
continue;
}
if ((// excluding overlongs
bytes[i] == 0xE0 &&
(0xA0 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&
(0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF)
) ||
(// straight 3-byte
((0xE1 <= bytes[i] && bytes[i] <= 0xEC) ||
bytes[i] == 0xEE ||
bytes[i] == 0xEF) &&
(0x80 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&
(0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF)
) ||
(// excluding surrogates
bytes[i] == 0xED &&
(0x80 <= bytes[i + 1] && bytes[i + 1] <= 0x9F) &&
(0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF)
)
) {
i += 3;
continue;
}
if ((// planes 1-3
bytes[i] == 0xF0 &&
(0x90 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&
(0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF) &&
(0x80 <= bytes[i + 3] && bytes[i + 3] <= 0xBF)
) ||
(// planes 4-15
(0xF1 <= bytes[i] && bytes[i] <= 0xF3) &&
(0x80 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&
(0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF) &&
(0x80 <= bytes[i + 3] && bytes[i + 3] <= 0xBF)
) ||
(// plane 16
bytes[i] == 0xF4 &&
(0x80 <= bytes[i + 1] && bytes[i + 1] <= 0x8F) &&
(0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF) &&
(0x80 <= bytes[i + 3] && bytes[i + 3] <= 0xBF)
)
) {
i += 4;
continue;
}
return false;
}
return true;
}
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://oss.sheetjs.com/js-xlsx/xlsx.core.min.js"></script>
<script src="./js-codepage-master/dist/cptable.full.js"></script>
<!-- <script src="./js-codepage-master/dist/cputils.full.js"></script> -->
</head>
<body>
<input type="file" onchange="importf(this)" /><label id="ff"></label>
<div id="demo"></div>
<script src="./isUTF8.js"></script>
<script>
/*
FileReader共有4种读取方法：
1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
2.readAsBinaryString(file)：将文件读取为二进制字符串
3.readAsDataURL(file)：将文件读取为Data URL
4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
*/
var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
var isCSV;
function importf(obj) {//导入
if (!obj.files) return;
var f = obj.files[0];
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
wb = null;
if (isCSV) {
data = new Uint8Array(data);
let f = isUTF8(data);
document.getElementById("ff").innerHTML = "是CSV文件,编码" + (f ? "是" : "不是") + "UTF-8";
if (f) {
data = e.target.result;
} else {
var str = cptable.utils.decode(936, data);
wb = XLSX.read(str, { type: "string" });
}
}else{
document.getElementById("ff").innerHTML ="不是CSV文件"
}
if (!wb) {
wb = rABS|| isCSV ? XLSX.read(btoa(fixdata(data)), { type: 'base64' }) : XLSX.read(data, { type: 'binary' });
}
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
};
isCSV = f.name.split(".").reverse()[0] == "csv";//判断是否是 CSV
if (rABS || isCSV) {
reader.readAsArrayBuffer(f);
} else {
reader.readAsBinaryString(f);
}
obj.value = "";
}
function fixdata(data) { //文件流转BinaryString
var o = "",
l = 0,
w = 10240;
for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
return o;
}
</script>
</body>
</html>
关于js-xlsx导入CSV文件中文乱码的说明大概就讲这么多了,一般情况下就这么处理就行了,如果因为其他文件编码造成乱码或者报错,可以参考这篇文章的解决思路进行处理吧 (￣▽￣)／
网友评论