Web Share API分享application/json类型文件时出现Permission denied错误

你遇到的Permission denied报错，是因为你当前使用的Edge 96（Chromium内核）版本中，Web Share API的允许分享MIME类型白名单没有包含application/json，只有图片、音频、视频、文本等常见类型在白名单内，所以直接指定JSON类型会被拒绝。

以下是可落地的解决方案： #

方案1：兼容旧版本浏览器的折衷方案 #

不需要改浏览器版本，只需把File的MIME类型设置为支持的text/plain，但文件名保留.json后缀即可。绝大多数操作系统和应用识别文件格式优先看后缀，收到的文件依然会被识别为JSON格式，不影响正常使用。
代码示例：

const jsonbtn = () => {
  // 仅修改type为text/plain，文件名保持test.json不变
  navigator.share({
      files: [new File(["{}"],"test.json", {type: "text/plain"})]
  }).catch(e => alert(e.message))
}

方案2：升级浏览器版本 #

Chromium内核从98版本开始已经将application/json加入Web Share API的支持白名单，将Edge浏览器升级到98及以上的正式版本，即可直接使用application/json类型正常分享JSON文件，无需修改代码。 #

最佳实践：分享前做兼容性检测 #

调用分享前先用navigator.canShare()接口检测当前环境是否支持分享对应文件，避免抛出异常，不支持的场景可以自动降级为浏览器下载：

const jsonbtn = () => {
  const jsonFile = new File(["{}"],"test.json", {type: "application/json"})
  if (navigator.canShare && navigator.canShare({ files: [jsonFile] })) {
    navigator.share({ files: [jsonFile] }).catch(e => alert(e.message))
  } else {
    // 降级处理：触发浏览器下载文件
    const a = document.createElement('a')
    a.href = URL.createObjectURL(jsonFile)
    a.download = 'test.json'
    a.click()
    URL.revokeObjectURL(a.href)
  }
}

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