Question

我正在Ionic 4应用程序的iframe中显示PDF。在模拟器（离子实验室）中可以正常工作，但是当我将应用程序推送到Android设备（PH-1）时，出现了黑屏，而不是PDF。

在ionic 4应用程序中显示PDF是否需要做些特殊的事情？

我尝试将各种东西添加到config.xml中，但没有任何效果。

html文件

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{information.name}}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <iframe name= "eventsPage" [src]="this.mysite" width="100%" height="95%">
  </iframe>
</ion-content>

ts文件

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {GetProtocolsService} from '../../services/get-protocols.service';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-protocol-details',
  templateUrl: './protocol-details.page.html',
  styleUrls: ['./protocol-details.page.scss'],
})
export class ProtocolDetailsPage implements OnInit {

  information = null;
  protocols = null;

  mysite = null;

  constructor(private activatedRoute: ActivatedRoute, private protocolService: GetProtocolsService, private router: Router,
              private sanitizer: DomSanitizer) { }

  ngOnInit() {
    // Get the ID that was passed with the URL
    let id = this.activatedRoute.snapshot.paramMap.get('id');

    console.log('Details');

    this.protocolService.getProtocols().subscribe(result => {
      console.log('getHospitals1 executed')
      this.protocols = result;
      console.log('result', result);
      this.information = this.filterArr(id)[0];
      console.log('information', this.information);
      this.mysite = this.sanitizer.bypassSecurityTrustResourceUrl('../../../assets/pdf/' + this.information.pdf.toString());
    });
  }

  filterArr(search) {
    // Get the real array forst of all
    let arr = this.protocols;

    return arr.filter(oneObj => oneObj.id.indexOf(search) >= 0);
  }

}

我希望它显示PDF，但在实际的Android设备上却显示空白屏幕。

在Ionic应用中，PDF不在Android的iframe中显示，而是在模拟器中显示

0 个答案: