从整个应用程序中的 api 下载 Angular 13 文件（.Net 6）答案

【问题标题】：Angular 13 download file from api in entire app (.Net 6)从整个应用程序中的 api 下载 Angular 13 文件（.Net 6）
【发布时间】：2022-02-27 15:00:16
【问题描述】：

我有一些与其他事情相关的更改，但是当我从 api 下载文件时突然

我遇到了错误

@Injectable()
export class FileDownloadService {
    
 constructor(private httpClient: HttpClient) { }


  public downloadFile(data: HttpResponse<Blob>) {
    const contentDisposition = data.headers.get('content-disposition');
    const filename = this.getFilenameFromContentDisposition(contentDisposition);
    const blob = data.body;
    const url = window.URL.createObjectURL(blob);
    const anchor = document.createElement("a");
    anchor.download = filename;
    anchor.href = url;
    anchor.click();
  }

  private getFilenameFromContentDisposition(contentDisposition: string): string {
    const regex = /filename=(?<filename>[^,;]+);/g;
    const match = regex.exec(contentDisposition);
    const filename = match.groups['filename'];
    return filename;
  }

}

控制器：

 download() {
   
    this.dataService.download(this.fileName)
        .pipe(takeUntil(this.unsubscribe$))
        .subscribe({
          next: (blobresponse: any) => {  
              this.downloadService.downloadFile(blobresponse);      
            }, error: (error:any) => { }
        });   
 }

错误：

错误类型错误：无法读取空属性（读取“组”）在 FileDownloadService.getFilenameFromContentDisposition (:4200/main.js:1323:32) 在 FileDownloadService.downloadFile (:4200/main.js:1312:31) 在 Object.next (:4200/src_app_views_account_account_module_ts.js:1367:38) 在 ConsumerObserver.next (:4200/vendor.js:90420:33) 在 SafeSubscriber._next (:4200/vendor.js:90389:26) 在 SafeSubscriber.next (:4200/vendor.js:90360:18) 在：4200/vendor.js:91984:181 在 OperatorSubscriber._next (:4200/vendor.js:91542:21) 在 OperatorSubscriber.next (:4200/vendor.js:90360:18) 在 subscribe.innerComplete (:4200/vendor.js:92213:28) defaultErrorLogger @ vendor.js:sourcemap:130591

没有下载整个应用程序的文件..我已经检查了 api 但响应（文件）来自 api..请让我知道我做错了什么..上周很好..请建议我检查最后 24 小时。但没有找到解决方案..

编辑：API 响应已添加

编辑：可能是内容分解的问题

【问题讨论】：

标签： angular typescript asp.net-core

【解决方案1】：

您必须进行 null 检查：

private getFilenameFromContentDisposition(contentDisposition: string): string {
    const regex = /filename=(?<filename>[^,;]+);/g;
    const match = regex.exec(contentDisposition);
    let filename = null; // or any other value you consider default
    if (typeof match !== 'undefined' && match !== null) {
        filename = match.groups['filename'];
    } 
    return filename; 
}

【讨论】：

感谢 anwer..now 文件下载为空（文件名没有扩展名）但手动重命名文件正在显示..你能建议一下
您当然可以指定您的文件名，但无论如何都必须进行检查。不客气。
实际上我正在从 api 发送文件名......如何从 api 获取文件名......上周相同的代码工作正常..但我没有改变..请问我该如何解决
我已经包含了下载文件的图片..prvious contactform.xlsx（请查看图片）
感谢您的建议..我不知道为什么它会采用角度，但 api 中的一些代码更改对我有用..非常感谢您

【解决方案2】：

在 .net 6 中，我包含了一些核心策略。现在代码工作..它可能有助于其他一些网络 6..谢谢@dmitryro

 services.AddCors(options =>
            {

                options.AddDefaultPolicy(builder => builder
                 .AllowAnyMethod()
                 .AllowAnyHeader()
                  .WithExposedHeaders("Content-Disposition")    ----This line i have added
                 .SetIsOriginAllowed(origin => true) // allow any origin
                 .AllowCredentials());
            });

【讨论】：