angulartypescriptng2-pdf-viewer

Display local PDF with ng2-pdf-viewer


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


Solution

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