前段时间遇到了一个比较有意思的bug,txt文件资源用浏览器打开预览的时候乱码。而后就想给你们分享一下,最后的处理方案。前端
问题:须要把txt文件统一转成utf-8的编码格式
分析:txt经常使用的编码格式包括 ANSI、UTF-八、GB2312 ,再简体中文的系统下,ASNI 和 GB2312 是同样的,因此咱们要处理的只有GB2312 和 UTF-8node
⚠️:windows office 2003 的 txt 文件默认编码格式是 GB2312
第一个方案就比较有意思了,用的是 FileReader.readAsText,这个属性能够指定文件编码格式,取出文件的纯文本。可是若是指定的编码格式和源文件编码格式不同,提取出来的文本就会乱码。因此这里的思路是:
1⃣️ 先用“utf-8”拿一次文本
2⃣️ 检测 string 有没有中文,若是没有中文的话一概当成乱码处理(gb2312和utf-8的英文编码同样)
3⃣️ 若是前面检测出来乱码了,就用“gb2312”从新拿一次文本,这一次就不用检测了,拿出来的就是正常文本了
4⃣️ 用没有乱码的文本生成一个新的文件正则表达式
function txt2utf8(file, callback){ let newBlob = null const reader = new FileReader() // readAsText 能够 指定编码格式 将文件提取成 纯文本 reader.readAsText(file,'utf-8') reader.onload = e => { const txtString = e.target.result // utf-8 的 中文编码 正则表达式 const patrn=/[\uFE30-\uFFA0]/gi; // 检测当前文本是否含有中文(若是没有,则当乱码处理) // 两个格式的英文编码同样,因此纯英文文件也当成乱码再处理一次 if (!patrn.exec(txtString)) { let reader_gb2312 = new FileReader() // 再拿一次纯文本,这一次拿到的文本必定不会乱码 reader_gb2312.readAsText(file,'gb2312') reader_gb2312.onload = e2 => { newBlob = new Blob([e2.target.result]) callback&&callback(newBlob) } } else { // 这里其实能够直接输出源文件,我是为了统一,都转成blob了 newBlob = new Blob([txtString]) callback&&callback(newBlob) } } }
⚠️:不要调整 “utf-8” 和 “gb2312” 的顺序。由于readAsText内部的实现问题,用gb2312去拿utf-8的txt再作中文检测不许确。
实现流程图:segmentfault
这个方案比较粗暴,引了两个nodejs,前端也能跑。关于这个方案我只是作了个简单的尝试,不过扩展性上一个方案好很多,有兴趣的小伙伴能够试一试。windows
import iconv from 'iconv-lite' import jschardet from 'jschardet' function txt2utf8(file, callback){ const reader = new FileReader() reader.readAsBinaryString(file) reader.onload = e => { const txtBinary = e.target.result // 用 jschardet 拿文件流编码 ,可能会存在误差 const binaMg = jschardet.detect(txtBinary) const buf = new Buffer(txtBinary, 'binary') // 用 iconv 转码 const str = iconv.decode(buf, binaMg.encoding) const newBlob = new Blob([str]) callback&&callback(newBlob) } }
⚠️:方案二只在本地调试过,本地跑起来没什么问题。具体的可用性和兼容性不肯定。