ng2-pdf-viewer 不适用于离子框架

Question

我正在开发 Ionic 5 angular 项目，它是关于一个移动应用程序，您可以在其中浏览一些 pdf 书籍，我安装了 ng2-pdf-viewer 以在移动设备上显示 pdf。 但是我有一个问题，页面似乎没有显示，这是我所拥有的图片：

https://i.stack.imgur.com/zvkPf.png

lecture.page.ts:

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DocumentViewer } from '@ionic-native/document-viewer/ngx';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
import { Platform } from '@ionic/angular';
import { File } from '@ionic-native/file/ngx';

@Component({
  selector: 'app-lecture',
  templateUrl: './lecture.page.html',
  styleUrls: ['./lecture.page.scss'],
})
export class LecturePage implements OnInit {
  id:number;
  livre:any;
  pdfSrc:string;
  url:string="https://mypdfs-website.com/";
  localhost:string="http://127.0.0.1:8000/"

  constructor(private http:HttpClient, private route: ActivatedRoute,private platform:Platform,private document:DocumentViewer, private file:File,private transfer:FileTransfer) { 
  
  }

  ouvrirPDF(){
    let path=null;
    if(this.platform.is("ios")){
      path=this.file.documentsDirectory;
    }else{
      path=this.file.dataDirectory;
    }
    const transfer = this.transfer.create();
    transfer.download(this.pdfSrc,path + 'monfichier.pdf')
    .then(entry=>{
      let url=entry.toURL();
      this.document.viewDocument(url,'application/pdf', {});
    });
  }

  ngOnInit() {
    this.route.paramMap.subscribe(params=>{
      this.id=+params.get('id');
      this.getLivre();
      this.ouvrirPDF();
    });
  }
 
  getLivre(){
    this.http.get(this.url+"api/livre/"+this.id)
    .subscribe((res:any)=>{
      this.livre=res;
      this.pdfSrc=this.url+"app/public/doc_livre/"+this.livre.lien_livre;
    })
  }
}

lecture.page.html

<ion-content class="bg-purple">
  <app-menu></app-menu>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-toolbar class="nav-style">
          <ion-buttons slot="primary">
            <ion-button>
              <ion-icon slot="icon-only" icon="star"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-title class="nav-style">
            Lecture
          </ion-title>
          <ion-buttons slot="end">
            <ion-menu-button autoHide="false"></ion-menu-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        
        <pdf-viewer [src]="pdfSrc"
              [render-text]="true"
              style="display: block;"
        ></pdf-viewer>

      </ion-col>
    </ion-row>
</ion-grid>
</ion-content>
    

lecture.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LecturePageRoutingModule } from './lecture-routing.module';

import { LecturePage } from './lecture.page';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { HttpClientModule } from '@angular/common/http';
import { MenuComponent } from 'src/app/components/menu/menu.component';
import { FileTransfer } from '@ionic-native/file-transfer/ngx';
import { DocumentViewer } from '@ionic-native/document-viewer/ngx';
import { File } from '@ionic-native/file/ngx';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PdfViewerModule,
    File,
    FileTransfer,
    DocumentViewer,
    HttpClientModule,
    LecturePageRoutingModule
  ],
  declarations: [LecturePage,MenuComponent]
})
export class LecturePageModule {}

Answer 1

我也在从事 Ionic 5 项目，它在移动设备上也能正常工作。

模板代码->

我正在 ngOnInit 中获取文件数据。

我使用的版本“ng2-pdf-viewer”：“^6.3.2”。

谢谢

Answer 2

你也可以试试这个 您应该在 document-pdf.module.ts 中导入 PdfViewerModule，并且不要在其中声明 PdfViewerComponent，因为它已在 PdfViewerModule 中声明。

Update: this is how your module should look like:

import {NgModule} from `@angular/core`;
import {IonicPageModule} from `ionic-angular`;
import {PdfModalPage} from "./document-pdf";
import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
declarations: [PdfModalPage],
imports: [IonicPageModule.forChild(PdfModalPage), PdfViewerModule]
})
export class PdfModalPageModule {}