I'm working on Ionic 5 angular project, It's about an mobile app where you can explore some pdfs books,I installed ng2-pdf-viewer to show pdf's on mobile. but I have a problem, It's seems the page doesn't show on, Here is a picture of what I have:

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 >
  <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>
    

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 {}

CodePudding user response：

I am also working on Ionic 5 project and it is working fine on mobile as well.

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

I am getting file data in ngOnInit.

The version I am using "ng2-pdf-viewer": "^6.3.2".

Thank you

CodePudding user response：

You can also try this You should import the PdfViewerModule in your document-pdf.module.ts, and do not declare the PdfViewerComponent in there, as it is already declared in the 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 {}