如何在 Ionic 5 中获取和查看 PDF (DocumentViewer)？

Question

我遵循了 YouTube video 的指南，其中介绍了如何打开 PDF 查看器。包含 PDF 的资产文件夹保存在我尝试多个文件路径（let filePath = this.file.applicationDirectory + 'public/assets/';）的应用程序文件夹下，我也无法使其工作。错误 logcat 可以显示在该输出的线程底部。

HTML 文件

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

Ts文件

  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)

Answer 1

我们正在使用 https://www.npmjs.com/package/ng2-pdf-viewer 通过 Ionic 和 Angular 查看 pdf 文件。

Answer 2

对于这个解决方案，我在这个项目中发现，已经有一个内置的资产文件夹，我在模拟器中运行之前使用 android studio 然后我可以修复它通过从资产文件夹（我创建的）复制 pdf 文件，并粘贴到已经用项目构建的原始资产文件夹，结果能够在模拟器上查看 pdf。谢谢。

如何在 Ionic 5 中获取和查看 PDF (DocumentViewer)？

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

cordova

ionic-framework

ionic-native

angular