如何在Angular 6的网络浏览器中打开本地存储的PDF？

Question

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:

Any additional code/resources will be available upon request.

Answer 1

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.