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

Question

由于某些原因，当我尝试单击此链接时，它会尝试将我重定向到该链接，然后将其重新加载到空白的http://localhost:4200/页面上而不显示PDF。我曾在另一个项目上使用过这个概念，但我尝试做的事情与以前相同，但是我正在做的事情似乎没有任何作用。我已确保该文件存在，并且已尽力为它提供正确的文件路径。文件链接在show-report.component.html中为：

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>

文件结构图片：

可根据要求提供其他代码/资源。

Answer 1

首先，检查http://localhost:4200/backend/PDF/f-1543526335019.pdf是否确实存在。

如果是这样，请尝试

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

此外，使用正斜杠。反斜杠是Windows的事情。