Question

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

离子：

ionic（Ionic 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。

ionic Object（...）不是DocumentViewer.viewDocument的函数：

1 个答案: