如何从 Angular 应用程序打开 PDF 文件

Question

I am building an Angular app that use a PHP backend. The process is:

• The front call a backend endpoint
• The backend builds a PDF file, store it in a specific folder, and returns the file URL (http://serverhost/tmp/somerandompath/somerandomname.pdf)
• The front opens a new tab pointing to the PDF file thanks to its URL

My problem is that the PDF url is intercepted by the Angular router and the user is redirected to the homepage (default behavior) instead of the PDF file.

Here is my (simplified) routing configuration:

const appRoutes: Routes = [
  { path: 'route1', component: Component1 },
  { path: 'route2', component: Component2 },
  { path: 'home', component: HomepageComponent },
  { path: '**', component: HomepageComponent }
];

Do you have any idea how I can open the PDF file?

Thank you for your help, Termos

Answer 1

First of all I think your url from serve is not correct plz fix it first then You can use this *** ng2-pdf-viewer *** package to render pdf in client side

<pdf-viewer [src]="pdfSrc"
          [render-text]="true"
          style="display: block;"
 ></pdf-viewer>

https://github.com/VadimDez/ng2-pdf-viewer#readme