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

Question

我关注一个YouTube视频，该视频指导如何打开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/电容器/插件：
  To native(Cordova插件(：callbackId:File79163689，service:File，action:resolveLocalFileSystemURI，actionArgs:
  [quot；file:///android_asset/public/assets/"]
• 2021-06-15 17:06:10.758 8228-8476/io.ionic.starter V/电容器/插件：
  至本机(Cordova插件(：callbackId:File79163690，服务：文件，操作：requestAllFileSystems，actionArgs:[]
• 2021-06-15 17:06:11.277 8228-8476/io.ionic.starter V/电容器/插件：
  至本机(Cordova插件(：callbackId:File79163691，service:File，action:getFile，actionArgs:["；cdvfile://localhost/assets/public/assets/"quot；sample.pdf"；，{"创建"：false}]
• 2021-06-15 17:06:11.304 8228-8228/io.ionic.starter E/电容器/控制台：
  文件：http://localhost/vendor.js-线路60104-消息：错误
• 2021-06-15 17:06:18.941 8228-8476/io.ionic.starter V/电容器/插件：
  至本机(Cordova插件(：callbackId:FileTransfer79163692，服务：FileTransfer，操作：下载，actionArgs：["；https://devdactic.com/html/5-simple-hacks-LBT.pdf"quot；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/电容器/控制台：
  文件：http://localhost/vendor.js-线路60104-消息：错误
• 2021-06-15 17:06:44.863 8228-8228/io.ionic.starter E/电容器/控制台：
  文件：http://localhost/polyfills.js-线路3306-消息：未处理的承诺拒绝：

Android Studio Logcat 中显示的错误

Android Studio Logcat(右侧(中显示的错误

Answer 1

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

Answer 2

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