使用Ionic Capacitor调用FileOpener插件打开PDF失败求助

一、报错原因分析 #

你遇到的Cordova is not available错误，核心原因有两个：

1. FileOpener依赖Cordova环境：该插件基于Cordova实现，浏览器开发环境中Capacitor不会加载Cordova相关文件，无法运行该插件，必须在真机或模拟器中测试。
2. Assets文件路径限制：assets/documents下的文件属于应用打包后的只读资源，FileOpener无法直接访问这类路径，需要先将文件复制到应用可读写的沙盒目录。

二、具体解决方案 #

1. 确保插件安装正确 #

执行以下命令完成插件安装与同步：

# 安装Cordova FileOpener插件
npm install cordova-plugin-file-opener2
# 安装Ionic Native包装器
npm install @ionic-native/file-opener
# 同步Capacitor配置
npx cap sync

2. 安装Filesystem插件处理文件复制 #

因为assets目录文件只读，需要用@capacitor/filesystem将PDF复制到可读写目录：

npm install @capacitor/filesystem
npx cap sync

3. 修改open-pdf.page.ts逻辑 #

替换原有打开逻辑，先复制文件再调用FileOpener：

import { Component } from '@angular/core';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';

@Component({
  selector: 'app-open-pdf',
  templateUrl: './open-pdf.page.html',
  styleUrls: ['./open-pdf.page.scss'],
})
export class OpenPdfPage {

  constructor(private fileOpener: FileOpener) { }

  async openPdf() {
    try {
      // 1. 读取assets中的PDF文件
      const assetPath = 'assets/documents/你的PDF文件名.pdf';
      const response = await fetch(assetPath);
      const blob = await response.blob();
      const arrayBuffer = await blob.arrayBuffer();
      const base64Data = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));

      // 2. 将文件写入应用沙盒的Documents目录
      const fileName = '你的PDF文件名.pdf';
      await Filesystem.writeFile({
        path: fileName,
        data: base64Data,
        directory: Directory.Documents,
        encoding: Encoding.Base64
      });

      // 3. 获取沙盒文件路径并打开
      const fileUri = await Filesystem.getUri({
        path: fileName,
        directory: Directory.Documents
      });

      await this.fileOpener.open(fileUri.uri, 'application/pdf');
    } catch (error) {
      console.error('打开PDF失败:', error);
    }
  }
}

4. 配置app.module.ts #

确保插件被正确导入并声明：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { FileOpener } from '@ionic-native/file-opener/ngx';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    FileOpener,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

5. 确认HTML按钮绑定 #

确保按钮正确绑定点击事件：

<ion-content class="ion-padding">
  <ion-button (click)="openPdf()">打开PDF</ion-button>
</ion-content>

6. 在真机/模拟器运行测试 #

浏览器环境无法测试该功能，部署到设备：

# 构建项目
npm run build
# 同步到对应平台
npx cap sync ios
# 或
npx cap sync android
# 打开IDE运行
npx cap open ios
# 或
npx cap open android

三、额外注意事项 #

• Android权限：在AndroidManifest.xml中添加文件访问权限：

  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

• iOS平台：无需额外权限，沙盒目录默认可读写。

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