ReactJS Webview中CSV文件下载功能失效问题求助

问题根源 #

你遇到的NSOSStatusErrorDomain Code=-10814错误，本质是iOS WebKit的Webview默认禁止了通过data: URI直接触发下载的行为——这种方式在普通浏览器里可行，但Webview的安全策略更严格，限制了这类操作。

可行解决方案 #

1. 前端改用Blob+Object URL触发下载 #

把CSV内容包装成Blob对象，再生成Object URL来替代data: URI，这种方式在Webview中兼容性更好，无需修改原生代码：

const downloadCSV = (csvContent, fileName) => {
  // 将CSV文本转为Blob对象
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  // 创建临时URL
  const blobUrl = URL.createObjectURL(blob);
  
  const link = document.createElement('a');
  link.href = blobUrl;
  link.setAttribute('download', `${fileName}.csv`);
  link.style.display = 'none';
  
  document.body.appendChild(link);
  link.click();
  
  // 清理临时资源和DOM元素
  document.body.removeChild(link);
  URL.revokeObjectURL(blobUrl);
};

2. 配置iOS Webview的下载权限（原生端修改） #

如果是iOS的WKWebView，需要开启下载支持并处理下载委托：

• 给WKWebView设置UIDelegate，实现webView:downloadTask:didStartDownload:等方法，接管下载请求；
• 确保Webview的相关权限配置正确，比如允许文件访问、开启下载相关的权限开关。

3. React Native与原生桥接下载（针对RN嵌入的Webview） #

如果你的应用是React Native套Webview的架构，可以通过消息传递让原生端处理下载：

• 前端Webview发送CSV数据到原生：

// 前端代码
window.ReactNativeWebView.postMessage(JSON.stringify({
  action: 'downloadCSV',
  content: csvContent,
  fileName: `${fileName}.csv`
}));

• iOS原生端接收消息后写入文件并触发下载：

// Swift示例代码
func webView(_ webView: WKWebView, didReceive message: WKScriptMessage) {
  guard let payload = message.body as? [String: Any],
        let action = payload["action"] as? String,
        action == "downloadCSV",
        let content = payload["content"] as? String,
        let fileName = payload["fileName"] as? String else {
    return
  }
  
  guard let fileData = content.data(using: .utf8) else { return }
  let docDir = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0]
  let fileUrl = docDir.appendingPathComponent(fileName)
  
  do {
    try fileData.write(to: fileUrl)
    // 弹出系统分享/下载面板
    let activityVC = UIActivityViewController(activityItems: [fileUrl], applicationActivities: nil)
    present(activityVC, animated: true)
  } catch {
    print("文件写入失败: \(error.localizedDescription)")
  }
}

优先推荐 #

先试方案1，只改前端代码就能解决大部分Webview下载问题。如果方案1无效，再根据你的应用架构选择方案2或3。

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