从 API 读取文件及其属性并在 Angular 客户端下载

Question

需要根据类型下载客户端api返回的动态文件。这就是我的

我的api控制器看起来像这样

    public async Task<IActionResult> GetFile(int id)
    {

         IBaseResult<UserDetails> result = await _Bo.GetUSerDetails(id);
         
         //result will have content likes 

         //1. FileName//fileaname.{extention}
         //2. FileType//eg.application/pdf or application/doc
         //3. FileContent//byte[]

         if (result.Data != null)
         {
             response.Success = result.success;
             response.Data = result.Data;

             return Ok(response);
         }
     }

.ts 文件看起来像这样

  data.service.ts

  getResume(methodName: string, id :string): Observable<any> {
       let httpOptions = this.getAuthoriseHeader();
       return this.http.get(environment.baseApiUrl + methodName + id, { headers: httpOptions, observe: 'response', responseType: 'blob' });

   }

  view.component.ts

     this.dataservice.getResume(method, id).subscribe(result => {
         var resume = result["data"];
         var fileName = resume.resumeName;
         var fileType = resume.resumeType;

         const file = new Blob([resume.resume], { type: fileType  });//Is this correct or do i need to use 'application/octet-stream' here?

         saveAs(file, fileName);
     });

上面的实现文件正在下载，但是当我尝试打开文件时，显示如下

我的响应对象是

更新：

我在我的 .ts 文件中试过这个

var 文件名 = resume.resumeName; var 文件类型 = resume.resumeType; //var byteArray = new Uint8Array(resume.resume);

      const file = new Blob([resume.resume], { type: 'application/octet-stream' });

      this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file));

      let a = document.createElement('a');
      document.body.appendChild(a);
      a.setAttribute('style', 'display: none');
      a.href = this.fileUrl;
      a.download = fileName;
      a.click();
      window.URL.revokeObjectURL(this.fileUrl);
      a.remove();

文件正在下载 失败 - 没有文件 错误

Answer 1

这是我下载文件的方式（Excel 在我的例子中，但我认为这没有什么不同，因为我们都使用 Blob）。我已经安装了 ngx-filesaver 并将其用作依赖项注入。

import { FileSaverService } from 'ngx-filesaver';

constructor(
  private http: HttpClient,
  private fileSaver: FileSaverService
) {}

export(): Observable<any> {
  const body = {...};
  return this.http.post(`${environment.api}/export`, body, {
      responseType: 'blob',
      observe: 'response',
    });
}

anotherFunction() {
  this.export().subscribe(({ body, headers }: HttpResponse<any>) => {
    const blob = new Blob([body], { type: headers.get('content-type') });
    this.fileSaverService.save(blob, 'your_file_name.xlsx');
  });
}

编辑

这是console.log(body, headers)

的画面

Answer 2

我终于找到了解决方案并且现在工作正常。我怀疑这是将我的 blob 数据转换为保存的问题。

 const binaryString = window.atob(resume.resume); // Comment this if not using base64
 const bytes = new Uint8Array(binaryString.length);
 return bytes.map((byte, i) => binaryString.charCodeAt(i));

然后我用了

const blob = new Blob([body]);
//rest of the code is same as posted question

这篇文章对解决问题很有帮助

https://medium.com/@riccardopolacci/download-file-in-javascript-from-bytea-6a0c5bb3bbdb

从 API 读取文件及其属性并在 Angular 客户端下载

Read file and its properties from API and download it in Angular Client

angular

typescript

blob

filecontentresult