Как исправить ошибки загрузки PDF с использованием нативных компонентов в ionic 4? - PullRequest
Новая
       17

Как исправить ошибки загрузки PDF с использованием нативных компонентов в ionic 4?

0 голосов
/ 14 июня 2019

Я проследил видеоурок по открытию PDF с помощью собственных плагинов Cordova.Приложение работает, но когда я перемещаю его на свое устройство Android - оно не открывает локальный или удаленный файл PDF.

Вместо этого я получаю следующую ошибку: 

ERROR TypeError: Cannot read property 'then' of undefined
    at HomePage.push../src/app/home/home.page.ts.HomePage.openLocalPdf (home-home-module.js:112)
    at Object.eval [as handleEvent] (ng:///HomePageModule/HomePage.ngfactory.js:24)
    at handleEvent (vendor.js:57150)
    at callWithDebugContext (vendor.js:58220)
    at Object.debugHandleEvent [as handleEvent] (vendor.js:57947)
    at dispatchEvent (vendor.js:54599)
    at vendor.js:55046
    at HTMLElement.<anonymous> (vendor.js:66909)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2785)
    at Object.onInvokeTask (vendor.js:51333)
View_HomePage_0 @ ng:///HomePageModule/HomePage.ngfactory.js:19

Я попытался изменитькод по-разному, но он либо не работает полностью, либо я не могу скомпилировать в Android.

html файл 

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic PDFs
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button expand="full" (click)="openLocalPdf()">Open Local PDF</ion-button>
  <ion-button expand="full" (click)="downloadAndOpenPdf()">Download and open PDF</ion-button>
</ion-content>

ts файл 

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {


  constructor(private platform: Platform, private file: File, private ft: FileTransfer,
              private fileOpener: FileOpener, private document: DocumentViewer) {

  }

  openLocalPdf() {
    let filePath = this.file.applicationDirectory + 'www/assets';

    if (this.platform.is('android')) {
      let fakeName = Date.now();
      this.file.copyFile(filePath, 'my.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}/my.pdf`, 'application/pdf', options);
    }
  }

  downloadAndOpenPdf() {
    let downloadUrl = 'https://devdactic.com/html/5-simple-hacks-LBT.pdf';
    let path = this.file.dataDirectory;
    const transfer = this.ft.create();

    transfer.download(downloadUrl, path + 'myfile.pdf').then(entry => {
      let url = entry.toURL();

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

Это должнозагрузить PDF - особенно в локальном режиме, но он не загружает PDF в локальном режиме и не загружает удаленный PDF.

...