Display local PDF with ng2-pdf-viewer

Question

I am trying to display a PDF with ng2-pdf-viewer but it does not show. The PDF is on my computer, inside the project in the assets folder. my src folder tree Here is my html

<h1> Angular 10 PDF Viewer</h1>

<div class="container">
  <textarea title="pdf" [(ngModel)] = "pdfUrl"></textarea>
  <label>PDF HoNOS</label>
  <pdf-viewer [src]="pdfUrl"
              [original-size]="false"
  ></pdf-viewer>
</div>

And my .ts

import { Component } from '@angular/core';
import { GenerationPdfService } from '../generation-pdf.service';

@Component({
  selector: 'app-fin-formulaire',
  templateUrl: './fin-formulaire.component.html',
  styleUrls: ['./fin-formulaire.component.css']
})
export class FinFormulaireComponent {
  constructor(private generationPdfService : GenerationPdfService) { }
  pdfUrl = "../assets/TemplatePDFHonos.pdf";
}

I dont understand why it isnt working, it is supposed to be easy but I am new with angular, ts, html so maybe I made a dumb mistake

I also tried to use assets/TemplatePDFHonos.pdf as pdfUrl but neither of them work

Answer 1

To view PDF files I use ngx-extended-pdf-viewer

npm i ngx-extended-pdf-viewer

Its use is very similar

< ngx-extended-pdf-viewer  [src] =" 'assets/example.pdf' " useBrowserLocale =" true " > </ ngx-extended-pdf-viewer >

I have it in a project and have had no problems. I leave you the page where you can see more examples: https://www.npmjs.com/package/ngx-extended-pdf-viewer

Greetings.

Answer 2

From what i get from ur project structure ,I think the path u r giving is wrong.

Please try ../../assets/ or ./../../assets/

Since the above code is not working iam just describing the steps here.

<pdf-viewer [src]="pdfurl" [render-text]="true" [original-size]="false" [fit-to-page]="true"[zoom]="zoom" [zoom-scale]="'page-width'" style="width: 100%; height: 100vh"></pdf-viewer>

zoom and zoom-scale is used for taking zoom functions.

Please try to add these styles also.Since sometimes eventhough the content is rendered,Due to '0' height in parent ,it's not visible.

style="width: 100%; height: 100vh"

In your Module Please Import the below.(Wherever your Shown component is declared.If component is declared in appmodule,import it there or any responsible module)

import { PdfViewerModule } from 'ng2-pdf-viewer';
imports:[
      //For new NG2 PDF VIEWER
  PdfViewerModule
]

Please add more details even if all these dont works.