CODEWITHSUNDEEP
angularpdf
Happy Sheep
Happy Sheep

Reputation: 127

How can I open a locally stored PDF on a web browser in Angular 6?

For some reason, when I try to click on this link it tries to redirect me to it, and then reloads the page on a blank http://localhost:4200/ page without displaying the PDF. I had this concept working on another project, and I tried to do the same thing as I did before, but nothing that I'm doing seems to be working. I've made sure that the file exists and I've done my best to give it the correct file path. The file link is in the show-report.component.html as:

Report: <a href="backend\PDF\f-1543526335019.pdf" target="_blank">Test</a>

show-report.component.html

<h2>Civil Grand Jury - Reports</h2>

<mat-accordion>
  <mat-expansion-panel *ngFor="let report of reports">
    <mat-expansion-panel-header>
      <mat-panel-title>
        {{ report._id }} {{ report.reportNum }}
      </mat-panel-title>
      <mat-panel-description>
        {{ report.reportTitle }}
      </mat-panel-description>
      <mat-panel-description>
        {{ report.reportDate }}
      </mat-panel-description>
    </mat-expansion-panel-header>
    Report: <a href="backend\PDF\f-1543526335019.pdf" target="_blank">Test</a>
    <mat-action-row>
      <button mat-button color="primary">ADD RESPONSE</button>
      <a mat-button color="primary">EDIT REPORT</a>
      <button mat-button color="warn" (click)="openDialog(report)">DELETE</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

Picture of File Structure:

File Structure

Any additional code/resources will be available upon request.

Upvotes: 0

Views: 3491

Answers (1)

Sam
Sam

Reputation: 6170

First, check if http://localhost:4200/backend/PDF/f-1543526335019.pdf really exists.

If so, try this

<a href="/backend/PDF/f-1543526335019.pdf" target="_blank">Test</a>

Also, use forward slashes. Backward slashes are a Windows thing.

Upvotes: 3

Related Questions