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

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

在我的演示应用程序中，我得到了两个视图，一个是“主页”，一个是“结果”。在主视图中，我看到一个按钮，它打开一个android文档选择器，函数为

pickDocument（）

。拾取文档后，将文件名和文件路径传递到“结果”视图

在结果视图中，我将文档选择器的给定路径转换为

setPath（）

中的本机路径，但此路径在我的设备上为我提供了404。我似乎无法加载要在那里显示的文件

该文件具有本地路径（在使用

setPath（）

转换之前）：

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

我得到以下错误：

虚拟PDF.PDF:1获取404（OK）

是否有我遗漏的东西？或者是否有更好的方法来做，我正在尝试做什么？是否有人可以帮助我解决这个问题

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

主页.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);
  }
}

...

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.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);
  }
}

...

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>

文件名：{{FileName}
FileUri:{{FileUri}}
文件路径：{{path}