ionic Object(...) 不是 DocumentViewer.viewDocument 的函数：

Question

我正在尝试从 ionic 的 assets 文件夹中加载 pdf 或下载一个。我看过一些教程，但它们都给了我同样的错误。

离子：

• 离子（离子 CLI）：4.1.2（C:\Users\hanna\node_modules\ionic）
• 离子框架：离子角 3.9.3
• @ionic/app-scripts : 3.2.1

科尔多瓦：

• cordova (Cordova CLI)：8.1.2 (cordova-lib@8.1.1)
• Cordova 平台：android 6.4.0，浏览器 5.0.4
• Cordova 插件：cordova-plugin-ionic-keyboard 2.1.3、cordova-plugin-ionic-webview 3.1.2（和其他 7 个插件）

系统：

• NodeJS : v9.4.0 (C:\Program Files\nodejs\node.exe)
• npm : 5.6.0
• 操作系统：Windows 10

代码：

import { Component } from '@angular/core';
import { DocumentViewer, DocumentViewerOptions } from '@ionic- 
native/document-viewer/ngx';
import { FileOpener } from '@ionic-native/file-opener/ngx';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
import { File } from '@ionic-native/File/ngx';
import { NavController, Platform } from 'ionic-angular';

@Component({
  selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
 constructor(
public navCtrl: NavController,
private file: File,
private ft: FileTransfer,
private document: DocumentViewer,
public platform: Platform
) {}
openLocalPdf() {
// let filePath = this.file.applicationDirectory + 'www/assets';

    // if (this.platform.is('android') || this.platform.is('browser')) {
//   let fakeName = Date.now();
//   this.file.copyFile(filePath, 'Typescript_Jumpstart_Book_Udemy.pdf', this.file.dataDirectory, `${fakeName}.pdf`).then(result => {
//     this.fileOpener.open(result.nativeURL, 'application/pdf')
//       .then(() => console.log('File is opened'))
//       .catch(e => console.log('Error opening file', e));
//   })
// } else {
//   // Use Document viewer for iOS for a better UI
//   const options: DocumentViewerOptions = {
//     title: 'My PDF'
//   }
//   this.document.viewDocument(`${filePath}/5-tools.pdf`, 'application/pdf', options);
// }
console.log('Documents Pressed.....');

    const options: DocumentViewerOptions = {
  title: "My PDF"
}
this.document.viewDocument('assets/Typescript_Jumpstart_Book_Udemy.pdf', 'application/pdf', options)
console.log('Documents Pressed..... afterrr');

  }
  downloadAndOpenPdf() {
let path = null;
if (this.platform.is('ios')) {
  path = this.file.documentsDirectory;
} else {
  path = this.file.dataDirectory;
}

    const transfer = this.ft.create();
transfer.download('https://devdactic.com/html/5-simple-hacks-LBT.pdf', path + 'MyFile.pdf').then(entry => {
  let url = entry.toURL();

      this.document.viewDocument(url, 'application/pdf', {});
  // this.fileOpener.open(url, 'application/pdf')
  // .then(() => console.log('File is opened'))
  // .catch(e => console.log('Error opening file', e));
 });
  }
}

错误是：

ERROR TypeError: Object(...) is not a function
at DocumentViewer.viewDocument (index.js:29)
at HomePage.webpackJsonp.193.HomePage.openLocalPdf (home.ts:43)
at Object.eval [as handleEvent] (HomePage.html:10)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at core.js:10629
at HTMLButtonElement.<anonymous> (platform-browser.js:2628)
at t.invokeTask (polyfills.js:3)

Answer 1

您使用的是 Ionic 3，并且正在使用 Ionic 4 支持的插件版本。通过 Ionic v3 文档使用 Ionic 3 支持的插件。

参考：https://ionicframework.com/docs/v3/native/

第 1 步

卸载所有原生插件。

第 2 步

安装版本 4。示例如下

$ ionic cordova plugin add cordova-plugin-document-viewer
$ npm install --save @ionic-native/document-viewer@4

第 3 步

不要在导入末尾附加 ngx，它仅适用于 Angular 6。

import { DocumentViewer } from '@ionic-native/document-viewer';

第 4 步：

对您的其他原生插件重复第 2 步和第 3 步。