Android端使用navigator.share API分享CSV文件时文件名异常如何解决？

算力阿峰

2026-10-1

问题根因

这是Android端Chrome、系统WebView对Web Share API的兼容性缺陷，绝大多数Android版本的Web内核不会优先读取File构造函数传入的自定义文件名，会默认生成带随机前缀的文件名，纯文本类格式（比如CSV）的触发概率最高。

修复方案

方案1：调整MIME类型，优先让Android系统识别文件格式
部分Android系统对text/csv的文件识别规则有缺陷，把type参数替换为application/csv或者application/vnd.ms-excel测试，多数场景下识别为表格类文件后就会保留自定义文件名：
```
const file = new File([text], 'myFile.csv', {
  type: 'application/csv'
})
```
方案2：将文件名写入分享的title字段
Android端分享接收器在拿不到文件自带文件名时，会优先提取title字段中匹配后缀的字符串作为文件名，修改share参数如下即可：
```
navigator.share({
  files: [file],
  text: 'Some text',
  title: `myFile.csv` // 直接把完整文件名作为title，或者后缀放在title最前部
})
```

方案3：先下载再触发分享（兼容性最好）
不直接通过navigator.share传递文件，先触发浏览器下载确保文件名正确，再分享文件提示信息，适合所有Android版本：

const blob = new Blob([text], { type: 'text/csv' })
const tempUrl = URL.createObjectURL(blob)
const aTag = document.createElement('a')
aTag.href = tempUrl
aTag.download = 'myFile.csv'
aTag.click()
// 等待下载触发完成后执行分享
setTimeout(() => {
  URL.revokeObjectURL(tempUrl)
  if (navigator.canShare && navigator.canShare({ text: 'Some text' })) {
    navigator.share({
      text: 'CSV文件已保存至下载目录，文件名为myFile.csv',
      title: 'myFile.csv'
    }).then(() => resolve(''))
    .catch(e => reject(e))
  } else {
    reject('Bad news')
  }
}, 300)