无法使用pdfjs库在Ionic3中呈现pdf

Question

import { Component,ViewChild,ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DatabaseProvider } from '../../providers/database/database';
import { File } from '@ionic-native/file'; 
import { FileTransfer, FileUploadOptions, FileTransferObject } from '@ionic-native/file-transfer';
import { SimplePdfViewerModule }  from 'simple-pdf-viewer';
import { DocumentViewer, DocumentViewerOptions } from '@ionic-native/document-viewer';
import { FileOpener } from '@ionic-native/file-opener';
import * as PDFJS from "pdfjs-dist/webpack.js";
import { PDFPageProxy, PDFPageViewport, PDFRenderTask } from 'pdfjs-dist';
import { Base64 } from '@ionic-native/base64';
//import { normalizeURL } from 'ionic-angular';
import { normalizeURL } from 'ionic-angular';
/**
 * Generated class for the ViewerCtrlPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-viewer-ctrl',
  templateUrl: 'viewer-ctrl.html',
})
export class ViewerCtrlPage {
  
  pdfDocument =  PDFJS.PDFDocumentProxy;
  PDFJSViewer = PDFJS;
  pageContainerUnique = {
    width: 0 as number,
    height: 0 as number,
    element: null as HTMLElement,
    canvas: null as HTMLCanvasElement,
    textContainer: null as HTMLElement,
    canvasWrapper: null as HTMLElement
  }
 

  @ViewChild('pageContainer') pageContainerRef: ElementRef;
  @ViewChild('viewer') viewerRef: ElementRef;
  @ViewChild('canvas') canvasRef: ElementRef;
  @ViewChild('canvasWrapper') canvasWrapperRef: ElementRef;
  @ViewChild('textContainer') textContainerRef: ElementRef;
  
 
  pdfUrl : any;
  sourceUrl : any;
  url: any;
  i: number;
  count: number = 0;
  base64Src:any;
  uInt8Arr: any;
 
  currentPage : any;
  zoome: any;
  totalpages: any;
  gotopage: any;
  
  //url:any;
  pdfPath = this.file.dataDirectory;
  public itemList : Array<Object>;
  constructor(public navCtrl: NavController, public navParams: NavParams, public database1: DatabaseProvider,public file: File,public transfer: FileTransfer,private fileopener: FileOpener,private document: DocumentViewer,private base64: Base64) {
  this.url = '';
  this.zoome = '';
  this.totalpages = '';
  this.base64Src = '';
 // this.newpdfPath = '';
  }


  ionViewDidLoad() {
    
    var pdfPath = this.file.dataDirectory;
    console.log('ionViewDidLoad ViewerCtrlPage');


    this.pageContainerUnique.element = this.pageContainerRef.nativeElement as HTMLElement;
    this.pageContainerUnique.canvasWrapper = this.canvasWrapperRef.nativeElement as HTMLCanvasElement;
    this.pageContainerUnique.canvas = this.canvasRef.nativeElement as HTMLCanvasElement;
    this.pageContainerUnique.textContainer = this.textContainerRef.nativeElement as HTMLCanvasElement;
  
    
    
    console.log(this.pdfUrl);
    console.log(this.file.dataDirectory);
    this.loadPdf(pdfPath);
   // this.readPdf(pdfPath);
    //this.loadPdf('/data/data/io.ionic.starter/files/3587.nn');
  }

  public zoomer(zoomer1: any) {
    console.log(zoomer1 +'scale');
    this.zoom(zoomer1);
  }


  public next() {
    console.log(this.currentPage + 'current page');
    this.loadPage(this.currentPage + 1);
  }

  public previous() {
    console.log(this.currentPage + 'current page');
    if(this.currentPage> 1) {
      this.loadPage(this.currentPage-1);
    } 
  }

  public pageNum(pagenumber : number) {
    console.log(pagenumber+ 'existing page');
  }
  


  loadPdf(pdfPath:string): Promise<boolean> {
    console.log('entered into pdf')
    console.log(pdfPath)
  //  PDFJS.disableWorker = true;
    return this.PDFJSViewer.getDocument(pdfPath)
    .then(pdf => {
      this.pdfDocument = pdf;
      this.totalpages = this.pdfDocument.numPages;
      console.log("pdf loaded");
      console.dir(this.pdfDocument);
      this.loadPage(1);
    }).then((pdfPage) => {
      console.dir(pdfPage);
    }).catch(e => {
      console.error(e);
      return false;
    });
  }

  loadPage(pageNum: number ) {
    
    let pdfPage: PDFPageProxy;

    return this.pdfDocument.getPage(pageNum).then(thisPage => {
      pdfPage = thisPage;
      this.pageNum(pdfPage.pageNumber);
      this.currentPage = pdfPage.pageNumber;
      console.log(pdfPage.pageNumber + 'loop page');
      console.log('rendering in the loadpage')
      return this.renderOnePage(pdfPage);
    }).then(() => {  
      return pdfPage;
    });
  }

  public zoom(scale) {
    var pdfPath = this.file.dataDirectory 
    //var newpdfPath = normalizeURL(pdfPath);
    let pdfPage : PDFPageProxy;
    
    this.PDFJSViewer.getDocument(pdfPath).then(pdf => {
      this.pdfDocument = pdf;
    })
    this.pdfDocument.getPage(this.currentPage).then(thisPage => {
      pdfPage = thisPage;
      let viewport = pdfPage.getViewport(scale) as PDFPageViewport;
      let textContainer: HTMLElement;
      let canvas: HTMLCanvasElement;
      let wrapper: HTMLElement;
      let canvasContext: CanvasRenderingContext2D;
      let page: HTMLElement;
      page = this.pageContainerUnique.element;
      textContainer = this.pageContainerUnique.textContainer;
      canvas = this.pageContainerUnique.canvas;
      wrapper = this.pageContainerUnique.canvasWrapper;
      canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;
      canvasContext.imageSmoothingEnabled = false;
      canvasContext.webkitImageSmoothingEnabled = false;
      canvasContext.mozImageSmoothingEnabled = false;
      canvasContext.oImageSmoothingEnabled = false;

      canvas.width = viewport.width;
      canvas.height = viewport.height;
      page.style.width = `${viewport.width}px`;
      page.style.height = `${viewport.height}px`;
      wrapper.style.width = `${viewport.width}px`;
      wrapper.style.height = `${viewport.height}px`;
      textContainer.style.width = `${viewport.width}px`;
      textContainer.style.height = `${viewport.height}px`;

      if (window.devicePixelRatio > 1) {
        let canvasWidth = canvas.width;
        let canvasHeight = canvas.height;

        canvas.width = canvasWidth * window.devicePixelRatio;
        canvas.height = canvasHeight * window.devicePixelRatio;
        canvas.style.width = canvasWidth + "px";
        canvas.style.height = canvasHeight + "px";

        canvasContext.scale(window.devicePixelRatio, window.devicePixelRatio);
    }

         let renderTask: PDFRenderTask = pdfPage.render({
        canvasContext,
        viewport
    });

    })

  }

  public zoomIn() {

   this.zoom(2);
  }

 
    async renderOnePage(pdfPage: PDFPageProxy) {

    let textContainer: HTMLElement;
    let canvas: HTMLCanvasElement;
    let wrapper: HTMLElement;

    let canvasContext: CanvasRenderingContext2D;
    let page: HTMLElement;

    page = this.pageContainerUnique.element;
    textContainer = this.pageContainerUnique.textContainer;
    canvas = this.pageContainerUnique.canvas;
    wrapper = this.pageContainerUnique.canvasWrapper;

    canvasContext = canvas.getContext('2d') as CanvasRenderingContext2D;
    canvasContext.imageSmoothingEnabled = false;
    canvasContext.webkitImageSmoothingEnabled = false;
    canvasContext.mozImageSmoothingEnabled = false;
    canvasContext.oImageSmoothingEnabled = false;

    let viewport = pdfPage.getViewport(1) as PDFPageViewport;

        canvas.width = viewport.width;
        canvas.height = viewport.height;
        page.style.width = `${viewport.width}px`;
        page.style.height = `${viewport.height}px`;
        wrapper.style.width = `${viewport.width}px`;
        wrapper.style.height = `${viewport.height}px`;
        textContainer.style.width = `${viewport.width}px`;
        textContainer.style.height = `${viewport.height}px`;


        if (window.devicePixelRatio > 1) {
          let canvasWidth = canvas.width;
          let canvasHeight = canvas.height;

          canvas.width = canvasWidth * window.devicePixelRatio;
          canvas.height = canvasHeight * window.devicePixelRatio;
          canvas.style.width = canvasWidth + "px";
          canvas.style.height = canvasHeight + "px";

          canvasContext.scale(window.devicePixelRatio, window.devicePixelRatio);
      }

      let renderTask: PDFRenderTask = pdfPage.render({
        canvasContext,
        viewport
    });

    let container = textContainer;

    return renderTask.then(() => {
      return pdfPage.getTextContent();

    }).then((textContent) => {
      let textLayer: HTMLElement;
      textLayer = this.pageContainerUnique.textContainer

      while (textLayer.lastChild) {
        textLayer.removeChild(textLayer.lastChild);
      }

      this.PDFJSViewer.renderTextLayer({
        textContent,
        container,
        viewport,
        textDivs: []
    });

    return true;

  })

       
  }

 


}

我正在使用ionic 3开发一个应用程序，其中我将pdf文件从服务器下载到Ionic 3（file.dataDirectory）中的本地文件目录。我正在尝试使用PDFJS库将文件呈现到屏幕上。我无法呈现页面，因为我收到错误：“fetch api无法加载url scheme”文件“不支持”。请帮我如何从本地文件URL获取文件并加载到我们的应用程序中。