Vue+Capacitor混合应用html2pdf导出PDF Android报EACCES权限错误求助

1. 适配Android不同版本的存储权限配置 #

你当前的权限配置仅适配Android 12及以下系统，Android 13及以上版本废弃了WRITE_EXTERNAL_STORAGE权限，需要修改AndroidManifest.xml的权限声明：

<!-- 安卓12及以下适用 -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
<!-- 安卓13及以上适用 -->
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.READ_MEDIA_VIDEO" />
<uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
<!-- 如需访问公共目录的所有文件可添加，Google Play上架需要说明使用场景 -->
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />

<!-- 在application节点添加以下属性适配安卓10存储兼容 -->
<application
  android:requestLegacyExternalStorage="true"
  ...
>

2. 修正权限判断逻辑 #

原代码中直接判断if (permission)的逻辑不准确，需要明确校验存储权限的授权状态：

Filesystem.requestPermissions().then( permissionStatus => {
  // 只有publicStorage状态为granted才是获得了存储权限
  if (permissionStatus.publicStorage === 'granted') {
    this.writeCapacitorFile(pdf)
      .then(() => {
        this.$store.dispatch('setLoading', false, { root: true })
        this.$toast.success("Enregistré dans vos documents !")
      })
      .catch(error  => {
        console.log(error)
        this.$toast.error("Vidda n'a pas la permission d'accéder à vos documents")
      })
  } else {
    this.$store.dispatch('setLoading', false, { root: true })
    this.$toast.error("未获得存储权限，无法保存PDF")
  }
})

3. 修正PDF文件写入逻辑 #

html2pdf输出的PDF是二进制格式，原代码用Encoding.UTF8写二进制文件会导致文件损坏或写入失败，需要先将二进制内容转成base64再写入：

async writeCapacitorFile(pdf) {
  try {
    // 将二进制PDF转为base64格式
    const base64Pdf = btoa(
      new Uint8Array(pdf)
        .reduce((data, byte) => data + String.fromCharCode(byte), '')
    )
    await Filesystem.writeFile({
      path: `${this.patient.patientId}.pdf`,
      data: base64Pdf,
      directory: Directory.Documents
      // 移除Encoding.UTF8配置，二进制文件无需指定文本编码
    })
    return true
  } catch (error) {
    console.error('写文件失败：', error)
    throw error
  }
}

4. 无权限替代方案 #

如果不需要让用户直接在系统文件管理器的公共Documents目录找到PDF，可以将存储目录改为App专属目录Directory.Data或Directory.Cache，这两个目录写入不需要申请任何存储权限，不会出现权限报错，如果需要分享文件给用户可以调用Capacitor的Share插件完成分享。

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