无法在离子中使用本机文档查看器

如何解决无法在离子中使用本机文档查看器

目前我只是在 ionic 应用程序中显示 PDF 文件。我需要为 pdf 视图页面添加捏缩放功能。为此，我使用了如下包

• "@ionic-native/document-viewer": "^5.30.0"
• "cordova-plugin-document-viewer": "^1.0.0"

根据文档，此插件可以显示任何文件系统或文件夹中的 pdf 文件。由于我有 base64 中的数据，因此我转换为对象 URL 并尝试显示 pdf 文件。我收到以下错误：

这是我写的代码：

import { Component } from "@angular/core";
import { NavController,NavParams,ModalController } from "ionic-angular";
import { CertificateService } from "../../services/certificateService";
import { Holder } from "../../models/certificateModel";
import { CertificateSharePage } from "../certificate-share/certificate-share";
import {
  DocumentViewer,DocumentViewerOptions,} from "@ionic-native/document-viewer/ngx";

@Component({
  selector: "page-certificate-display",templateUrl: "certificate-display.html",})
export class CertificatedisplayPage {
  selectedHolder: Holder = null;
  showSpinner: boolean = false;
  pdfSrc: any;
  zoom: number = 1;
  certificateNumber: string;
  isCertificateExpiring: boolean;
  isHistory: boolean = false;

  constructor(
    public navCtrl: NavController,private certificateService: CertificateService,public modalCtrl: ModalController,private params: NavParams,private document: DocumentViewer
  ) {
    this.selectedHolder = params.get("holder");
    this.certificateNumber = params.get("certificateNumber");
    this.isCertificateExpiring = params.get("isCertificateExpiring");
    this.isHistory = params.get("isHistory");
  }

  ionViewDidLoad() {
    this.showSpinner = true;
    if (!this.isHistory) this.displayPDF(this.selectedHolder);
    else this.displayHistoryPDF(this.selectedHolder);
  }

  displayPDF(holder) {
    const options: DocumentViewerOptions = {
      title: "PDF File",};
    this.certificateService
      .downloadPDF(holder.cert_id,holder.user_sub,holder.id)
      .subscribe(
        (result) => {
          this.showSpinner = false;
          // this.pdfSrc = this.base64ToArrayBuffer(result.data);  // old code which works but doesn't have pinch zoom functionality
          const url = URL.createObjectURL(
            this.b64tToBlob(result.data,"application/pdf")
          );
          this.document.viewDocument(url,"application/pdf",options);
        },(error) => {
          this.showSpinner = false;
          console.log(error);
        }
      );
  }

  displayHistoryPDF(holder) {
    this.certificateService
      .downloadHistoryPDF(holder.id,holder.user_sub)
      .subscribe(
        (result) => {
          this.showSpinner = false;
          this.pdfSrc = this.base64ToArrayBuffer(result.data);
        },(error) => {
          this.showSpinner = false;
          console.log(error);
        }
      );
  }

  back() {
    this.navCtrl.pop();
  }

  share() {
    let certificateShareModal = this.modalCtrl.create(CertificateSharePage,{
      holder: this.selectedHolder,certificateNumber: this.certificateNumber,});
    certificateShareModal.onDiddismiss((data) => {
      // if(data)
      // this.loadCertificate();
    });
    certificateShareModal.present();
  }

  base64ToArrayBuffer(base64) {
    const binary_string = window.atob(base64);
    const len = binary_string.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
  }

  b64tToBlob(b64Data,contentType) {
    contentType = contentType || "";
    var sliceSize = 512;
    b64Data = b64Data.replace(/^[^,]+,/,"");
    b64Data = b64Data.replace(/\s/g,"");
    var byteCharacters = window.atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
      var slice = byteCharacters.slice(offset,offset + sliceSize);

      var byteNumbers = new Array(slice.length);
      for (var i = 0; i < slice.length; i++) {
        byteNumbers[i] = slice.charCodeAt(i);
      }

      var byteArray = new Uint8Array(byteNumbers);

      byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays,{ type: contentType });
    return blob;
  }

  zoomIn() {
    this.zoom += 0.25;
  }

  zoomOut() {
    if (this.zoom > 1) {
      this.zoom -= 0.25;
    }
  }

  resetZoom() {
    this.zoom = 1;
  }
}