前端解决返回的数据编码问题

背景

最近做项目需要调用后端的接口，返回的是服务器静态文本文件，而且这个文本文件是不同人的制作，放到服务器上的。这就导致了文件的编码格式不同。有的是utf-8，有的是gbk，按照一种格式去进行解码，会导致页面显示的内容乱码。如下图所示：

解决方法

发现查资料发现，上面的乱码字符是utf-8，在解析其他编码格式，无法正确的解码，就会使用替换字符进行填充。这样就想到了一个解决的办法，就是把从服务器上拿到的数据，先进行utf-8解码，然后，判断有替换字符，就说明使用的解码格式不正确，然后在换另一种解码格式。代码实现如下：

/**
 * 使用指定的字符编码将 Blob 对象解码为字符串。
 * @param {Blob} blob - 要解码的 Blob 对象。
 * @param {string} [code="utf-8"] - 用于解码的字符编码，默认是 "utf-8"。
 * @returns {Promise<string>} - 返回一个 Promise，解析为解码后的字符串，如果解码失败则拒绝并返回错误信息。
 */
function decode(blob, code = "utf-8") {
  return new Promise((resolve, reject) => {
    // 创建一个 FileReader 对象
    const reader = new FileReader();
    // 定义 load 事件处理程序
    reader.onload = () => {
      const decodedText = reader.result;
      // 检查解码后的字符串中是否包含替换字符（65533），表示解码错误
      let hasError = false;
      for (let i = 0; i < decodedText.length; i++) {
        if (decodedText.charCodeAt(i) === 65533) {
          hasError = true;
          break;
        }
      }
      // 根据解码结果解析或拒绝 Promise
      if (hasError) {
        reject("编码失败");
      } else {
        resolve(decodedText);
      }
    };
    // 定义 error 事件处理程序
    reader.onerror = () => reject("文件读取错误");
    // 将 Blob 读取为 ArrayBuffer
    reader.readAsText(blob, code);
  });
}

但是需要注意的是，从服务器上获得文件要把 responseType设置成blob，下面是axios的设置

 axios.get(文件地址", { responseType: "blob"})

正确的显示结果