ng2-pdf-viewer不適用于離子框架

我正在研究 Ionic 5 angular 專案，它是關于一個移動應用程式，您可以在其中瀏覽一些 pdf 書籍，我安裝了 ng2-pdf-viewer 以在移動設備上顯示 pdf。但我有一個問題，頁面似乎沒有顯示，這是我所擁有的圖片：

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

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

講座.page.html

<ion-content >
  <app-menu></app-menu>
  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-toolbar >
          <ion-buttons slot="primary">
            <ion-button>
              <ion-icon slot="icon-only" icon="star"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-title >
            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>
    

講座模塊.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 {}

uj5u.com熱心網友回復：

我也在研究 Ionic 5 專案，它在移動設備上也運行良好。

模板代碼->
<pdf-viewer [src]="fileUrl message.file_name" [original-size]="false" [external-link-target]="'blank'" [autoresize]="true" [render -text]="true" style="display: block;">

我正在 ngOnInit 中獲取檔案資料。

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

謝謝

uj5u.com熱心網友回復：

你也可以試試這個 你應該在你的檔案 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 {}

標籤：有角的 离子框架

上一篇：VSCode在Angulargetter函式中找不到“get”的名稱，有什么解決辦法嗎？

下一篇：使用ngIf顯示時，某些HTML元素未顯示？