巧解难题：前端txt文件转码有妙招，赶快收藏！

2024-01-23 06:50:33

乱码之谜：从文件打开说起

前段时间，我遇到了一个比较有意思的bug，那就是txt文件资源用浏览器打开预览的时候乱码。这个问题着实让我困扰了一阵子，最后终于找到了解决方案。

方案一：FileReader.readAsText指定编码格式

第一个方案就比较有意思了，用的是FileReader.readAsText，这个属性可以指定文件编码格式，取出文件的纯文本。

const file = new File(['Hello, world!'], 'hello.txt', {
  type: 'text/plain'
});

const reader = new FileReader();

reader.onload = function() {
  console.log(reader.result); // "Hello, world!"
};

reader.readAsText(file, 'utf-8');

但是，如果指定的编码格式和源文件的编码格式不一致，就会出现乱码。

const file = new File(['你好，世界！'], '你好.txt', {
  type: 'text/plain'
});

const reader = new FileReader();

reader.onload = function() {
  console.log(reader.result); // "????"
};

reader.readAsText(file, 'utf-8');

方案二：使用第三方库

为了解决这个问题，我们可以使用第三方库来转码txt文件。

const fs = require('fs');
const iconv = require('iconv-lite');

const file = fs.readFileSync('你好.txt');

const text = iconv.decode(file, 'gbk');

console.log(text); // "你好，世界！"