Search code examples
angularcordovaionic-frameworkionic-native

How can I get and view PDF (DocumentViewer) in Ionic 5?


I follow a YouTube video which guides on how to open PDF viewer. The assets folder contain the PDF is save under app folder which I try multiple file path (let filePath = this.file.applicationDirectory + 'public/assets/';) I'm also unable to make it work. The error logcat can be shown at bottom of this thread that output.

HTML file

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

Ts file

  openLocalPdf(){
            let filePath = this.file.applicationDirectory + 'public/assets/';
        
            if (this.platform.is('android')){
              let fakeName = Date.now //take file from this path inside app and copy it to another file location which can use native url top open and install previously
              this.file.copyFile(filePath,'sample.pdf', this.file.dataDirectory,`${fakeName}.pdf`).then(result =>{
                this.fileOpener.open(result.nativeURL, 'application/pdf');
              });
        
        
            } else {
              const options: DocumentViewerOptions ={
                title: 'My PDF'
              }
              this.document.viewDocument(`${filePath}/sample.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')
              }
            })
          }
  • 2021-06-15 17:06:10.742 8228-8476/io.ionic.starter V/Capacitor/Plugin:
      To native (Cordova plugin): callbackId: File79163689, service: File, action: resolveLocalFileSystemURI, actionArgs:
    ["file:///android_asset/public/assets/"]
  • 2021-06-15 17:06:10.758 8228-8476/io.ionic.starter V/Capacitor/Plugin:
      To native (Cordova plugin): callbackId: File79163690, service: File, action: requestAllFileSystems, actionArgs: []
  • 2021-06-15 17:06:11.277 8228-8476/io.ionic.starter V/Capacitor/Plugin:
      To native (Cordova plugin): callbackId: File79163691, service: File, action: getFile, actionArgs: ["cdvfile://localhost/assets/public/assets/","sample.pdf",{"create":false}]
  • 2021-06-15 17:06:11.304 8228-8228/io.ionic.starter E/Capacitor/Console:
      File: http://localhost/vendor.js - Line 60104 - Msg: ERROR
  • 2021-06-15 17:06:18.941 8228-8476/io.ionic.starter V/Capacitor/Plugin:
      To native (Cordova plugin): callbackId: FileTransfer79163692, service: FileTransfer, action: download, actionArgs: ["https://devdactic.com/html/5-simple-hacks-LBT.pdf","file:///data/user/0/io.ionic.starter/files/myfile.pdf",null,1,null]
  • 2021-06-15 17:06:18.961 8228-8228/io.ionic.starter E/Capacitor/Console:
      File: http://localhost/vendor.js - Line 60104 - Msg: ERROR
  • 2021-06-15 17:06:44.863 8228-8228/io.ionic.starter E/Capacitor/Console:
      File: http://localhost/polyfills.js - Line 3306 - Msg: Unhandled Promise rejection:

Error Shown in Android Studio Logcat

Error Shown in Android Studio Logcat(RightSide)


Solution

  • For this solution, What i found out in this project, already have a built in assets folder, where I'm using android studio before running in the emulator then i able to fix it by copy the pdf file from the assets folder (I created), and paste to the original assets folder that already built with the project which result able to view the pdf on emulator. Thanks.