本教程详细指导如何在ionic capacitor应用中安全有效地打开本地pdf文件。针对`@ionic-native/file-opener`在capacitor环境中存在的cordova兼容性问题，我们推荐使用专为capacitor设计的插件，并重点讲解如何将应用资产目录（`assets`）中的pdf文件复制到设备可访问的存储路径，然后利用capacitor文件打开插件进行显示。
引言：理解问题根源
在Ionic Capacitor项目中，尝试使用基于Cordova的@ionic-native/file-opener插件直接打开位于assets目录下的PDF文件通常会遇到问题。主要原因有两点：
- Cordova兼容性问题：@ionic-native系列插件本质上是Cordova插件的Angular封装。虽然Capacitor提供了Cordova兼容层，但并非所有Cordova插件都能在Capacitor环境中完美运行，或者需要特定的配置。当控制台出现.open, but Cordova is not available的错误时，通常意味着Capacitor未能正确加载或识别Cordova环境。
- assets目录的特殊性：assets目录下的文件在应用打包后是作为应用资源的一部分，它们并不直接位于设备的文件系统上，因此无法通过常规的文件路径（如/assets/documents/mizzica.pdf）直接访问。要打开这些文件，需要先将它们从应用包中读取出来，并复制到设备上可访问的临时或永久存储位置。
为了解决这些问题，我们需要采用专为Capacitor设计的插件，并结合文件系统操作来处理assets中的文件。
解决方案：Capacitor原生插件与文件处理
正确的解决方案涉及两个核心步骤：
- 文件复制：使用Capacitor的@capacitor/filesystem插件将assets目录中的PDF文件读取为二进制数据，然后将其写入到设备的文件系统（例如，应用的数据目录或缓存目录）。
- 文件打开：使用专为Capacitor设计的第三方文件打开插件（如@capawesome/capacitor-file-opener或@capacitor-community/file-opener）来打开复制到设备上的PDF文件。
本教程将以@capawesome/capacitor-file-opener和@capacitor/filesystem为例进行演示。
实现步骤
步骤一：安装必要的Capacitor插件
首先，在您的Ionic Capacitor项目中安装文件系统和文件打开插件：
npm install @capacitor/filesystem @capawesome/capacitor-file-opener npx cap sync
步骤二：配置Android权限（仅Android平台需要）
为了允许应用读取和写入外部存储（在某些情况下是必需的，尤其是在Android 9及以下版本），您可能需要在android/app/src/main/AndroidManifest.xml文件中添加以下权限：
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<!-- ... 其他权限 ... -->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- 对于Android 10+，如果仅操作应用私有目录，可能不需要这些权限 -->
<!-- 如果需要向外部共享文件，可能还需要在application标签下添加FileProvider -->
<application
android:requestLegacyExternalStorage="true"> <!-- 仅在Android 9及以下版本可能需要 -->
<!-- ... -->
</application>
</manifest>注意：对于Android 10 (API 29) 及更高版本，Google引入了分区存储（Scoped Storage），应用默认只能访问自己的私有目录。如果您只将文件复制到Filesystem.Directory.Data或Filesystem.Directory.Cache等应用私有目录，通常不需要READ_EXTERNAL_STORAGE和WRITE_EXTERNAL_STORAGE权限。然而，如果您的应用需要将文件保存到公共目录或与其他应用共享，则需要更复杂的权限处理和FileProvider配置。本教程将文件复制到应用私有目录，以简化权限管理。
步骤三：创建PDF服务（推荐）
为了更好地组织代码和复用逻辑，建议创建一个服务来处理PDF文件的复制和打开操作。
// src/app/services/pdf-viewer.service.ts
import { Injectable } from '@angular/core';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
import { FileOpener } from '@capawesome/capacitor-file-opener';
import { Platform } from '@ionic/angular';
@Injectable({
providedIn: 'root'
})
export class PdfViewerService {
constructor(private platform: Platform) { }
/**
* 从assets目录读取PDF文件并复制到应用数据目录，然后打开。
* @param assetPath PDF文件在assets目录下的路径，例如 'documents/mizzica.pdf'
* @param fileName 复制到设备后的文件名，例如 'mizzica.pdf'
*/
async openPdfFromAssets(assetPath: string, fileName: string): Promise<void> {
if (!this.platform.is('capacitor')) {
console.warn('此功能仅在Capacitor环境中可用。');
// 可选：在浏览器中处理，例如打开新标签页显示PDF
window.open(assetPath, '_blank');
return;
}
try {
// 1. 读取assets目录中的文件
// 对于assets目录下的文件，Capacitor的Filesystem插件无法直接读取。
// 我们需要通过HTTP请求（或fetch API）来获取这些文件。
const response = await fetch(assetPath);
const blob = await response.blob();
// 2. 将Blob数据写入设备文件系统
// 创建一个文件阅读器来读取Blob数据为Base64字符串
const reader = new FileReader();
reader.readAsDataURL(blob);
await new Promise<void>((resolve, reject) => {
reader.onloadend = async () => {
const base64Data = reader.result as string;
// 移除Base64数据头，只保留实际数据
const base64Content = base64Data.split(',')[1];
// 将Base64数据写入到应用的数据目录
const filePath = `${Directory.Data}/${fileName}`;
await Filesystem.writeFile({
path: fileName, // 文件名
data: base64Content,
directory: Directory.Data, // 写入应用数据目录
recursive: true // 如果目录不存在则创建
});
// 3. 使用FileOpener插件打开文件
await FileOpener.open({
filePath: filePath,
contentType: 'application/pdf',
openWithDefault: true // 尝试使用默认应用打开
});
console.log('PDF文件已成功打开');
resolve();
};
reader.onerror = (e) => {
console.error('读取Blob数据失败:', e);
reject(e);
};
});
} catch (e) {
console.error('打开PDF文件时发生错误:', e);
// 可以根据错误类型提供更友好的用户提示
if (e.message.includes('No app found to open file')) {
alert('未找到可打开PDF的应用程序。');
} else {
alert('无法打开PDF文件，请稍后再试。');
}
}
}
}步骤四：在组件中使用服务
在您的页面组件中注入PdfViewerService并调用其方法。
// src/app/open-pdf/open-pdf.page.ts
import { Component, OnInit } from '@angular/core';
import { PdfViewerService } from '../services/pdf-viewer.service'; // 导入您的服务
@Component({
selector: 'app-open-pdf',
templateUrl: './open-pdf.page.html',
styleUrls: ['./open-pdf.page.scss'],
})
export class OpenPdfPage implements OnInit {
constructor(private pdfViewerService: PdfViewerService) { }
ngOnInit() {
// 可以在这里进行初始化操作
}
async openPdf() {
// 调用服务方法来打开PDF
// 注意：这里的路径是相对于应用的根目录，即 'assets/documents/mizzica.pdf'
// 复制到设备后的文件名可以保持一致或自定义
await this.pdfViewerService.openPdfFromAssets('assets/documents/mizzica.pdf', 'mizzica.pdf');
}
}对应的HTML模板保持不变：
<!-- src/app/open-pdf/open-pdf.page.html -->
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>打开PDF</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">打开PDF</ion-title>
</ion-toolbar>
</ion-header>
<ion-button (click)="openPdf()">打开PDF</ion-button>
</ion-content>注意事项
- 文件路径管理：将文件复制到Directory.Data是推荐的做法，因为这是应用的私有目录，不会与其他应用冲突。但您也可以选择Directory.Cache用于临时文件，并在不再需要时清理它们。
- 错误处理：在实际应用中，务必对文件操作和插件调用进行健壮的错误处理。例如，当设备上没有可用的PDF阅读器时，FileOpener插件可能会抛出错误。
- 跨平台兼容性：上述代码在iOS和Android平台上应该都能良好运行。在Web浏览器环境中，由于没有原生文件系统和文件打开插件，我们提供了window.open(assetPath, '_blank')作为回退方案。
- 权限请求：虽然将文件复制到应用私有目录通常不需要运行时权限请求，但如果您的应用需要将文件保存到公共目录，则必须在运行时使用Capacitor的Permissions API请求相应的存储权限。
- 替代方案：如果您的需求是在应用内部显示PDF而不是调用外部应用，可以考虑使用PDF.js等JavaScript库在Webview中渲染PDF，或者使用支持PDF渲染的Capacitor插件（例如，@capacitor-community/pdf-viewer）。
总结
通过本教程，我们解决了在Ionic Capacitor应用中打开assets目录中PDF文件的常见问题。核心思路是：避免使用基于Cordova的旧插件，转而采用Capacitor原生插件；并通过fetch API读取assets文件，然后利用@capacitor/filesystem将文件复制到设备可访问的路径，最后使用@capawesome/capacitor-file-opener来打开它。遵循这些步骤，您可以在Capacitor项目中稳定可靠地实现本地PDF文件的打开功能。
