Ionic中使用@ionic-native/file-opener打开PDF遇Cordova不可用问题求解

Hey there, let's resolve that frustrating error you're hitting when trying to open PDFs with FileOpener in Ionic. This issue almost always relates to how your Cordova environment is set up or how you're running your app. Here's a breakdown of the fixes to try:

1. You're probably testing in the browser (not a device/simulator) #

Cordova plugins don't work in the browser when using ionic serve. The error message says this explicitly, but it's easy to miss! You need to run your app on a physical device or emulator instead:

• For Android: ionic cordova run android
• For iOS: ionic cordova run ios

If you need to test in the browser, you'll have to use a mock implementation or switch to a web-based PDF viewer for browser testing.

2. Double-check your dependencies are installed correctly #

It's easy to skip a step when setting up Ionic Native plugins. Make sure you've installed both the Cordova plugin and the Ionic Native wrapper:

1. Install the core Cordova plugin:

   cordova plugin add cordova-plugin-file-opener2
   

2. Install the Ionic Native package:

   npm install @ionic-native/file-opener
   

3. Don't forget to add FileOpener to your app's providers in app.module.ts:

   import { FileOpener } from '@ionic-native/file-opener/ngx';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [...],
     providers: [
       ...
       FileOpener // Add this line
     ],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. Ensure cordova.js is included in your app #

Ionic usually adds this automatically, but it's worth verifying in your index.html file. Look for this line (it will only load on devices, not in the browser):

<script src="cordova.js"></script>

Don't manually add this file to your project—Cordova injects it at build time for device runs.

4. Wait for the platform to be ready before calling FileOpener #

Cordova needs a moment to initialize all plugins after the app starts. Always wrap your FileOpener calls in platform.ready() to make sure everything is loaded:

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

constructor(private platform: Platform, private fileOpener: FileOpener) {}

async openPdfFile() {
  // Wait for Cordova to be fully ready
  await this.platform.ready();
  
  try {
    // Replace with your actual PDF file path
    await this.fileOpener.open('/path/to/your/file.pdf', 'application/pdf');
  } catch (error) {
    console.error('Failed to open PDF:', error);
  }
}

5. If you're using Capacitor instead of Cordova #

If your project uses Capacitor, you need to sync the plugin after installing it:

1. Install the plugin as usual:

   npm install cordova-plugin-file-opener2
   

2. Sync it with Capacitor:

   npx cap sync
   

Then run your app on a device/simulator with npx cap run android or npx cap run ios.

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