跳转至正文
@capgo/capacitor-file-sharer 文件与存储 开源

文件共享器 Capacitor 插件

在 Android、iOS 和 Web 上分享和保存来自 base64 数据或本地路径的文件

安装

bun add @capgo/capacitor-file-sharer bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-file-sharer
  • pnpm add @capgo/capacitor-file-sharer
  • yarn add @capgo/capacitor-file-sharer

指南

如何在 Capacitor 中使用 File Sharer

在设备上测试

下载 Capgo App,然后扫描二维码 code。

File Sharer 插件预览二维码 code

使用 @capgo/capacitor-file-sharer

支持从 base64 数据、data URL 及本地文件路径分享并保存文件 file:// URL、Android content:// URI 和 Capacitor _capacitor_file_ URL。

安装

bun add @capgo/capacitor-file-sharer
bunx cap sync

插件暴露的内容

  • share - 在 Android 和 iOS 上打开原生分享面板,或在 Web 端下载文件。
  • save - 保存至 Android 公共集合,打开 iOS 保存/分享面板,或在 Web 端下载。
  • getPluginVersion - 返回当前平台的实现版本。

用法示例

分享生成的文件

import { FileSharer } from '@capgo/capacitor-file-sharer';

await FileSharer.share({
  filename: 'report.pdf',
  contentType: 'application/pdf',
  base64Data: reportBase64,
  title: 'Quarterly report',
  text: 'Attached report',
});

分享本地文件

await FileSharer.share({
  filename: 'export.zip',
  contentType: 'application/zip',
  path: fileUri,
});

保存至 Android 下载目录

const result = await FileSharer.save({
  filename: 'backup.zip',
  contentType: 'application/zip',
  base64Data: zipBase64,
  android: {
    saveDirectory: 'downloads',
    relativePath: 'Download/My App',
  },
});

console.log(result.uri);

平台注意事项

  • Android 分享功能使用 FileProvider, ClipData,以及 URI 授权,以便选择器预览和缩略图能够读取文件。
  • Android 保存功能在 Android 10+ 上使用 MediaStore,在 Android 9 及以下版本使用公共目录。
  • iOS 分享同时支持 base64 临时文件和直接本地路径分享。
  • Web 端分享和保存会下载文件,大文件则使用分块 base64 转换。

完整参考

继续阅读:使用 @capgo/capacitor-file-sharer

如果你正在使用 使用 @capgo/capacitor-file-sharer 要规划存储和文件处理,请将其与 @capgo/capacitor-file-sharer 了解 @capgo/capacitor-file-sharer 中的实现细节, 快速入门 有关“入门指南”中的实现细节, @capgo/capacitor-data-storage-sqlite 关于 @capgo/capacitor-data-storage-sqlite 中的实现细节, 使用 @capgo/capacitor-data-storage-sqlite 关于使用 @capgo/capacitor-data-storage-sqlite 的原生能力,以及 @capgo/capacitor-file 关于 @capgo/capacitor-file. 中的实现细节

常见问题

File Sharer 插件常见问题

如何在 Capacitor 应用中安装 File Sharer 插件?

运行 "bun add @capgo/capacitor-file-sharer"(或 "npm install @capgo/capacitor-file-sharer"),然后运行 "bunx cap sync",使 iOS 和 Android 项目同步 native code。最后在你的 code 应用中从 "@capgo/capacitor-file-sharer" 导入即可。

@capgo/capacitor-file-sharer 是否支持 React、Vue 和 Angular?

支持。File Sharer 是一个 Capacitor 包,因此它支持任何在 Capacitor 中运行的 Web 框架,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-file-sharer 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-file-sharer 是免费开源的吗?

是的。code 已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-file-sharer/,该包也可以直接从 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

使用 File Sharer 的 code 可以在不经过 App Store 审核的情况下更新吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待 App 审核,即可快速发布 File Sharer 的变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo