Download dan Open File (pdf) Ionic 3

Mari Belajar Coding    9/17/2019    ionic   

Selamat datang kembali di blog Mari belajar coding. Jika tutorial Ionic kemarin kita belajar membuat aplikasi untuk Upload File (pdf, docx, xlsx, etc) ke Server. Tutorial kali ini kita akan belajar membuat sebuah aplikasi untuk mendownload file dari server kemudian membukanya dengan pdf viewer. 

Download dan Open File (pdf) Ionic 3

Pertama-tama kita create app baru dengan nama aplikasi DownloadFile melalui CMD atau terminal. 

ionic start DownloadFile blank --type=ionic-angular --cordova  

Selanjutnya instal plugin yang di perlukan untuk membuat aplikasi download dan open file Ionic 3.

ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file@4

ionic cordova plugin add cordova-plugin-file-opener2
npm install --save @ionic-native/file-opener@4

ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer@4

ionic cordova plugin add cordova-plugin-android-permissions
npm install --save @ionic-native/android-permissions@4 

Setelah plugin berhasil diinstal, selanjutnya tambahkan import module di  provider app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { File } from '@ionic-native/file';
import { FileOpener } from '@ionic-native/file-opener';
import { FileTransfer } from '@ionic-native/file-transfer';
import { AndroidPermissions } from '@ionic-native/android-permissions';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    File,
    FileOpener,
    FileTransfer,
    AndroidPermissions,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Tambahkan permission untuk read and write storage di app.component.ts agar file hasil download bisa di simpan di storage device.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import { AndroidPermissions } from '@ionic-native/android-permissions';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,
    private androidPermissions: AndroidPermissions
    ) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();

      this.androidPermissions.requestPermissions(
        [
          androidPermissions.PERMISSION.READ_EXTERNAL_STORAGE, 
          androidPermissions.PERMISSION.WRITE_EXTERNAL_STORAGE
        ]
      );

    });
  }
}

Selanjutnya kita buat interface di home.html, tambahkan button download file.

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      Mari Belajar Coding
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button color="primary" (click)="DownloadFile()">Download File Pdf</button>
</ion-content>

Buat fungsi download di file home.ts.

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

import { File } from '@ionic-native/file';
import { FileOpener } from '@ionic-native/file-opener';
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    public alertCtrl: AlertController,
    public loadingCtrl: LoadingController,
    private file: File,
    private fileOpener: FileOpener,
    private transfer: FileTransfer
    ) {

  }

  DownloadFile(){    
    const loader = this.loadingCtrl.create({content: "Please wait..."});
    loader.present();

    const url = 'http://192.168.99.183/blog/file.pdf';
    const fileTransfer: FileTransferObject = this.transfer.create();
     fileTransfer.download(url, this.file.externalRootDirectory + 'Download/file.pdf').then((entry) => {     
       
       const confirm = this.alertCtrl.create({
         title: 'Informasi',
         message: 'File dokumen berhasil di unduh.<br>'+entry.toURL(),
         buttons: [
           {
             text: 'Tutup',
             handler: () => {
              // console.log('Disagree clicked');
             }
           },
           {
             text: 'Buka',
             handler: () => {
               this.fileOpener.open(this.file.externalRootDirectory + 'Download/file.pdf', 'application/pdf')
                   .then(() => console.log('File is opened'))
                   .catch(e => console.log('Error opening file', e));
             }
           }
         ]
       });
       confirm.present();
       loader.dismiss();

     }, (error) => {
       console.log(error);
       const alert = this.alertCtrl.create({
         title: 'Informasi',
         subTitle: 'File dokumen gagal di unduh.',
         buttons: ['OK']
       });
       alert.present();
       loader.dismiss();
     });
  }

}

Ganti url diatas dengan url dokumen yang akan di download.

Terakhir tambahkan include subdomains IP atau domain url file download di network_security_config.xml yang berada di folder resource/android/xml untuk menghindari Cleartext Traffic Error saat download.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">192.168.99.183</domain>
    </domain-config>
</network-security-config>

Jalankan aplikasi dengan mengetikkan ionic cordova run android.