简介
平时开发过程中，多多少少都要跟编码打交道，不管是上传下载或者预览展示一些文件的内容。这篇文章主要是自己遇到的坑，然后解决的方案过程。
情况： 为什么我下载下来的文档打开预览没问题，通过前端加载出来乱码？
- 文件本身的编码格式掺杂了多种，导致web中加载的时候乱码（可能性50%）
- web页面中没有在head下面加上编码格式 导致乱码（可能性50%）
先解决第二种可能性因为比较简单 加上：
如图：
参考：http://blog.sina.com.cn/s/blog_67c4e7250100r3g3.html
第一种可能就要从文件本身着手，针对 一般自己创建的文件（带中文）通过js读取之后能够正常不乱码的显示，但是某个文件一直乱码为什么通过js读取之后乱码 大概率：文件中既有ANSI格式的文件,又有UTF-8 无BOM格式的文件
解决方案：
1、在Notepad++中Ctrl+A,Ctrl+Z全选并剪切ANSI格式的文件内容
2、选中“格式”->“以 UTF-8 无BOM格式编码”（如果你的notepad++没有格式可以换成： “编码”->“转为UTF-8 无BOM格式编码”）
3、Ctrl+V粘贴
这样就可以完美得将ANSI格式转换为UTF-8 无BOM格式,中文也不会出现乱码.其他文件的转码亦可以采用类似的方法
参考：https://www.cnblogs.com/jpfss/p/8231377.html
那么为什么我要解析这个csv呢？
要做一个通过js导入文件 解析成树形图 打印选中节点的文本。这个csv分三段，编码 内容 分组 逗号隔开。下面分享打印csv的js文件内容
代码分享
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>读取并解析csv</title>
</head>
<body>
<div>
无法根据绝对路径直接读取文件吗？一定要通过input吗？
读取文本文件：
<input type="file" id="file1" accept="*" />
</div>
<div>
显示进度：
<progress id="pro" value="0"></progress>
</div>
<div id="result"></div>
<script type="text/javascript" charset="GBK">
var file1 = document.getElementById('file1');
file1.onchange = function () {
var file = file1.files[0];
//读取为二进制
var reader = new FileReader();
reader.readAsText(file,'utf-8');
//显示进度
var pro = document.getElementById('pro');
pro.max = file.size;
pro.value = 0;
reader.onprogress = function (e) {
pro.value = e.loaded;
}
reader.onload = function () {
var str = reader.result;
var rows = str.split('\n');
console.log(rows);
document.getElementById('result').innerHTML = rows;
}
}
</script>
</body>
</html>
参考：https://blog.csdn.net/qq_34548699/article/details/105707859
以上 做成树的效果出来再更新……
1731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
