angular - Ionic 4 FileOpener 插件_未安装

Question

我正在尝试使用 FileOpener 打开 PDF。我按照这个教程https://ionicacademy.com/create-pdf-files-ionic-pdfmake/这是针对 Ionic 3 的，所以我必须调整一些东西。我让它在浏览器和 iOS 模拟器上运行，但是当我通过 Ionic Viewer 应用程序在我的设备上进行测试时，当我单击下载按钮和 downloadPdf 时，我收到一条错误消息 plugin_not_installed () 被调用。

我已经通过以下方式安装了 cordova 插件: ionic cordova 插件添加 cordova-plugin-file-opener2 和 ionic cordova 插件添加 cordova-plugin-file

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 { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

home.page.ts

import { Component } from '@angular/core';
import { NavController, Platform, AlertController } from '@ionic/angular';

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  letterObj = {
    to: 'Ronnie',
    from: 'Shana',
    text: 'my message'
  }

  pdfObj = null;

  constructor(public navCtrl: NavController, private plt: Platform, private file: File, private fileOpener: FileOpener, private alertController: AlertController) { }

  createPdf() {
    var docDefinition = {
      content: [
        { text: 'REMINDER', style: 'header' },
        { text: new Date().toTimeString(), alignment: 'right' },

        { text: 'From', style: 'subheader' },
        { text: this.letterObj.from },

        { text: 'To', style: 'subheader' },
        this.letterObj.to,

        { text: this.letterObj.text, style: 'story', margin: [0, 20, 0, 20] },

        {
          ul: [
            'Bacon',
            'Rips',
            'BBQ',
          ]
        }
      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
        },
        subheader: {
          fontSize: 14,
          bold: true,
          margin: [0, 15, 0, 0]
        },
        story: {
          italic: true,
          alignment: 'center',
          width: '50%',
        }
      }
    }
    this.pdfObj = pdfMake.createPdf(docDefinition);
  }

  downloadPdf() {
    if (this.plt.is('cordova')) {
      this.pdfObj.getBuffer((buffer) => {
        var blob = new Blob([buffer], { type: 'application/pdf' });
        // Save the PDF to the data Directory of our App
        this.file.writeFile(this.file.dataDirectory, 'myletter.pdf', blob, { replace: true }).then(fileEntry => {
          // Open the PDf with the correct OS tools
          this.fileOpener.open(this.file.dataDirectory + 'myletter.pdf', 'application/pdf')
            .then(() => this.presentAlert('opened'))
            .catch(error => this.presentAlert(error)); // Error thrown here.
        })
        .catch(error => {
          // an error
          this.presentAlert(error);
        })
      });
    } else {
      // On a browser simply use download!
      this.pdfObj.download();
    }
  }

  async presentAlert(message) {
    const alert = await this.alertController.create({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: message,
      buttons: ['OK']
    });

    await alert.present();
  }

}

Answer 1

导入路径如文档here所示显然是错误的。 我曾经得到“Invalidprovider for ngModule”，因此在插件源文件中搜索我发现了一个不同的导入路径，这显然是有效的。

我可以使用导入插件

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

在我的 app.module.ts 和我的页面中。