0

I'm hoping there's no such thing as a dumb question in this forum.

I've seen the ngx-extended-pdf-viewer demo at https://www.pdfviewer.net/extended-pdf-viewer/multiple-documents which loads a new pdf when selected from a list on that demo page, but I'm wondering how I could pass the source variable to the pdf-viewer via the URL Like:

www.myviewer/index.html?source=pdfNAME

(index.html is the 'starter' version I built according to https://pspdfkit.com/blog/2021/how-to-build-an-angular-pdf-viewer-with-pdfjs/)

and then have that variable used to select the source location from an array. Such as:

var pdfSource = [
    {
    selector: 'app-root_Selector',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component_A.css'],
    name:'myNewPdf'},
}]

(( and where would I put that array?)

R.Paris
  • 31
  • 3

1 Answers1

0

Are you familiar with Angular routing? Here's a very short run-down:

You need to define a route with a variable:

{ path: ':path', component: ExampleComponent },

Now your component can query the variable part of the URL:

export class ExampleComponent implements OnInit {
  public pdfFile!: string;

  constructor(private router: Router, private currentRoute: ActivatedRoute) { }

  ngOnInit(): void {
    this.currentRoute.paramMap.subscribe(route => {
      this.pdfFile = route.get("path");
  });
}

When you call your application with an URL like https://example.com/example.pdf, the URL snippet example.pdf is copied to the variable pdfFile, and you can use is for the [src] attribute:

 <ngx-extended-pdf-viewer [src]="pdfFile">

I suppose that was a pretty fast description, but now you're better equipped to understand the official and lengthy documentation.

Side remark: The instructions on https://pspdfkit.com/blog/2021/how-to-build-an-angular-pdf-viewer-with-pdfjs/ are good, but setting up ngx-extended-pdf-viewer has become even simpler in the meantime (see the instructions on the showcase.

Stephan Rauh
  • 3,069
  • 2
  • 18
  • 37