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

PDF 查看器 Capacitor 插件

在 iOS、Android 和 Web 上嵌入原生 PDF 查看,支持路径、URL、base64、内联模式和密码。

安装

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

指南

如何在 Capacitor 中使用 PDF Viewer

使用 @capgo/capacitor-pdf-viewer

支持 iOS (PDFKit)、Android (Pdfium) 及 Web 端原生 PDF 查看,支持路径、URL、base64 和内联模式。

安装

bun add @capgo/capacitor-pdf-viewer
bunx cap sync

此插件公开的内容

  • open - 支持通过文件、路径、URL 或 base64 源打开 PDF。
  • close - 关闭当前查看器并移除所有遮罩层。
  • goToPage - 跳转至指定的页码(从 1 开始计数)。
  • setZoom - 设置缩放比例倍数。
  • getPluginVersion - 获取原生或 Web 实现的版本标识。
  • addListener - 监听 load、pageChange、error、close 和 linkTap 事件。

使用示例

open

import { PdfViewer } from '@capgo/capacitor-pdf-viewer';

await PdfViewer.addListener('pageChange', ({ page, pageCount }) => {
  console.log(`Page ${page} of ${pageCount}`);
});

const { pageCount } = await PdfViewer.open({
  source: 'https://example.com/manual.pdf',
  mode: 'fullscreen',
  scrollMode: 'continuous',
  page: 1,
});

console.log(`Opened ${pageCount} pages`);

close

import { PdfViewer } from '@capgo/capacitor-pdf-viewer';

await PdfViewer.close();

完整参考文档

常见问题

PDF Viewer 插件常见问题

如何在 Capacitor 应用中安装 PDF Viewer 插件?

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

@capgo/capacitor-pdf-viewer 是否支持 React、Vue 和 Angular?

是的。PDF Viewer 是一个 Capacitor package,因此它可以与任何在 Capacitor 中运行的 Web framework 配合使用,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-pdf-viewer 支持哪个版本的 Capacitor?

Capgo 插件跟随 Capacitor 的主版本号:插件主版本要与你的 Capacitor 主版本匹配(例如插件 v8 对应 Capacitor 8)。GitHub README 里的兼容性表格列出了仍在维护的版本。

@capgo/capacitor-pdf-viewer 是免费开源的吗?

是的。code 的源码已在 GitHub 上公开,地址为 https://github.com/Cap-go/capacitor-pdf-viewer/,并且你可以直接从 npm 免费安装。欢迎提交 Bug reports 和 pull requests。

我可以在无需经过 App Store 审核的情况下,更新使用了 PDF Viewer 的 code 吗?

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

无需等待 App 审核,即可快速发布 PDF Viewer 更新

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

立即开始使用 Capgo