Ionic导出Excel时重音字符乱码问题求助

嘿，这个乱码问题我太熟了！你碰到的是典型的UTF-8编码在Excel导出时未被正确识别的问题——当HTML里的ANDRÉS变成Excel里的ANDRÃS，本质是带重音的多字节字符在二进制导出过程中被错误解析了。给你两个可靠的解决办法：

方法1：改用ArrayBuffer类型输出（推荐） #

直接调整XLSX.write的输出类型为arraybuffer，这种格式能更好地保留UTF-8编码的二进制数据，避免手动处理编码的麻烦：

var strContent = document.getElementsByTagName("table")[0];
const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(strContent, {});
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

// 将输出类型从binary改为arraybuffer
const wbout: ArrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'arraybuffer' });

// 调整保存逻辑（这里以FileSaver的saveAs为例，适配你的保存函数即可）
const blob = new Blob([wbout], { 
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
saveAs(blob, 'exported_table.xlsx');

方法2：手动添加UTF-8 BOM（兼容旧逻辑） #

如果必须保留type: 'binary'的输出方式，需要给二进制内容添加UTF-8字节顺序标记（BOM），Excel只有看到这个标记才会正确识别UTF-8编码：

var strContent = document.getElementsByTagName("table")[0];
const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(strContent, {});
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

const wbout: string = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

// 辅助函数：将字符串转为ArrayBuffer
function s2ab(s: string): ArrayBuffer {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
}

// 添加UTF-8 BOM前缀
const bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
const contentBuffer = s2ab(wbout);
// 合并BOM和内容的二进制数据
const combinedBuffer = new Uint8Array(bom.length + contentBuffer.length);
combinedBuffer.set(bom, 0);
combinedBuffer.set(new Uint8Array(contentBuffer), bom.length);

// 生成Blob并保存
const blob = new Blob([combinedBuffer], { 
  type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
saveAs(blob, 'exported_table.xlsx');

为什么会出现乱码？ #

当你使用type: 'binary'时，XLSX库输出的是UTF-8编码的字符串，但Excel默认不会自动识别没有BOM的UTF-8文本。像É这样的重音字符是由两个UTF-8字节组成的，Excel会错误地把它们当成两个独立的ASCII字符，于是就出现了ANDRÃS这种乱码。

内容的提问来源于stack exchange，提问作者Andres