如何在Angular web中显示blob内容(doc、ppt、xls)

import { HttpClient, HttpHeaders } from '@angular/common/http';

// ...

constructor(private http: HttpClient) {}

// ...

// 获取blob数据
getBlobData(): Observable<Blob> {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  return this.http.get<Blob>('your_blob_url', { headers, responseType: 'blob' });
}

npm install file-saver --save

import { saveAs } from 'file-saver';

// ...

// 处理blob数据
handleBlobData(blob: Blob, fileName: string): void {
  saveAs(blob, fileName);
}

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

// ...

constructor(private sanitizer: DomSanitizer) {}

// ...

// 处理blob数据
handleBlobData(blob: Blob): SafeUrl {
  const blobUrl = URL.createObjectURL(blob);
  return this.sanitizer.bypassSecurityTrustUrl(blobUrl);
}

<a [href]="blobUrl" download="file.doc">Download</a>

<iframe [src]="blobUrl"></iframe>