iOS设备上Web App无法加载Excel文件数据问题求助

问题背景 #

开发的酒吧库存管理Web App，基于HTML/CSS/JS实现，支持加载Excel模板、分酒吧（lounge/crystal/green）编辑库存、导出及合并文件。该App在Android、Windows、Mac平台运行正常，但iOS设备无法加载Excel数据。

核心排查方向 #

iOS Safari对FileReader.readAsBinaryString的支持存在兼容性问题，这是导致加载失败的最可能原因。以下是具体解决步骤：

1. 替换二进制读取方式（优先解决） #

将readAsBinaryString改为readAsArrayBuffer，SheetJS原生支持arraybuffer类型的输入，且iOS对该API的支持更稳定：

修改后的handleFile函数：

// Function to manage the loading of the Excel file
function handleFile(e) {
  const file = e.target.files[0];
  if (!file) return;
  
  originalFileName = file.name;
  const reader = new FileReader();
  
  reader.onload = function (e) {
    try {
      // 读取结果为ArrayBuffer，对应SheetJS的type参数改为'arraybuffer'
      const dataBuffer = e.target.result;
      const wb = XLSX.read(dataBuffer, { type: 'arraybuffer' });
      processData(wb);
    } catch (err) {
      console.error('Excel加载失败:', err);
      alert('文件加载出错，请检查文件格式后重试');
    }
  };

  // 增加错误捕获，便于排查iOS上的具体问题
  reader.onerror = function(err) {
    console.error('文件读取错误:', err);
    alert('读取文件时发生异常');
  };

  // 使用readAsArrayBuffer替代readAsBinaryString
  reader.readAsArrayBuffer(file);
}

2. 增加调试手段定位问题 #

如果修改后仍无法加载，用Safari开发者工具连接iOS设备调试：

• 打开Mac上的Safari，启用「开发」菜单（偏好设置-高级-勾选「显示开发菜单」）
• 连接iOS设备，在开发菜单中选择对应设备的Safari实例，查看控制台的错误信息
• 重点排查是否存在文件权限、SheetJS版本兼容性问题

3. 其他可能的兼容调整 #

• 固定SheetJS版本：避免使用xlsx-latest，改用稳定版本（如0.19.0），减少最新版本的兼容性坑
• 测试本地文件：iOS的文件选择器可能优先读取iCloud文件，测试时选择本地存储的Excel文件，排除云文件的权限问题

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