无法从本地文件系统加载pdf（IONIC 4-Android）

Question

我遇到一个问题，无法在我的应用程序视图内加载pdf。

在我的演示应用程序中，我有两个视图，一个是“家”，一个是“结果”。在主视图中，我有一个按钮，该按钮打开一个功能为pickDocument()的android文档选择器。选择文档后，文件名和文件路径将传递到“结果”视图。

在结果视图中，我将文档选择器的给定路径转换为setPath()中的本机路径，但是此路径在我的设备上给了我404。我似乎无法加载要显示在此处的文件。

文件具有本地路径（在使用setPath()进行转换之前：

  

content：//com.android.providers.downloads.documents/document/22

我收到以下错误：

  

Dummy-PDF.pdf：1 GET http://localhost/_app_file_/storage/emulated/0/Download/Dummy-PDF.pdf 404（确定）

我有什么想念的吗？还是有更好的方法来做我想做的事？有人可以帮我解决这个问题。

我在下面包括了重要的代码部分。非常感谢。

home.page.ts

的代码

...

export class HomePage {

  constructor(private chooser: Chooser, private router: Router) { }

  pickDocument() {
    this.chooser.getFile("application/pdf")
      .then(file => {
        this.addFile(file.name, file.uri);
      }, error => {
        console.error(error);
      });
  }

  addFile(fileName: string, fileUri: string) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        "fileName": fileName,
        "fileUri": fileUri
      }
    };
    this.router.navigate(["result"], navigationExtras);
  }
}

result.page.ts

的代码

...

export class ResultPage implements OnInit {

  public fileName: string;
  public fileUri: string;
  public path: string;
  private win: any = window;

  constructor(private route: ActivatedRoute, private filePath: FilePath) {
    this.route.queryParams.subscribe(params => {
      this.fileName = params["fileName"];
      this.fileUri = params["fileUri"];
      this.setPath();
    });
  }

  ngOnInit() {
  }

  setPath() {
    this.filePath.resolveNativePath(this.fileUri).then(path => {
      this.path = this.win.Ionic.WebView.convertFileSrc(path);
    });
  }
}

result.page.html

的代码

<ion-content>
    <ion-list>
        <ion-item>
            <ion-img [src]="path"></ion-img>
        </ion-item>
        <ion-item>FileName: {{fileName}}</ion-item>
        <ion-item>FileUri:{{fileUri}}</ion-item>
        <ion-item>FilePath:{{path}}</ion-item>
    </ion-list>
</ion-content>