CODEWITHSUNDEEP
ionic-framework
Hanna
Hanna

Reputation: 27

ionic Object(...) is not a function at DocumentViewer.viewDocument :

I'm trying to load a pdf from the assets folder in ionic or to download one. I've watched some tutorials but all of them are giving me the same error.

Ionic:

Cordova:

System:

The code :

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));
 });
  }
}

the Error is :

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)

Upvotes: 1

Views: 2690

Answers (1)

Rathnakara S
Rathnakara S

Reputation: 1466

You are on Ionic 3, and you are using plugin version supported for Ionic 4. Use the plugins supported for Ionic 3 by going through Ionic v3 document.

Reference: https://ionicframework.com/docs/v3/native/

Step 1

Un-install all your native plugins.

Step 2

Install version 4. Example below

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

Step 3

Don't append ngx at the end of the import, it's only for Angular 6.

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

Step 4:

Repeat Step 2 and 3 for your other native plugins.

Upvotes: 1

Related Questions