Angular：页面上能在线预览（pdf等格式）文件

想要实现一个预览文件的功能：

点击某条图纸记录后面的“查看图纸”按钮，调用预览图纸的方法，将图纸的id传给后端，后端返回图纸的链接存在返回数据的data字段中：

首先我们在点击“查看图纸”的按钮上绑定调用后端接口的方法doView(data)：

/**
    * 查看图纸
    */
  doView(data) {
    const params = {
      id: data.id,
    };
    this.SupplierDrawingProvider.doView(params).subscribe(item => {
      if (!helper.IsEmpty(item)) {
        this._drawingData = item.data;
      }
      this.isSpinning = false;
    }, err => {
      this.notice.error('图纸加载失败');
      this.isSpinning = false;
    });
  }

其中id是取自传入后端接口的数据中的图纸id，后端返回数据存在item中，从item中取出返回的图纸的链接item.data，存放到页面绑定的字段_drawingData中。

在页面上，我们用<a>标签的href绑定接收到的图纸链接，在新建标签页上进行打开：

<td>
   <div class="editable-row-operations">
      <ng-container>
          <a (click)="doView(data)" href={{this._drawingData}} target="_blank">查看图纸</a>
      </ng-container>
   </div>
</td>

这样就实现了一个在前端进行文件在线预览的功能。