Angular中使用Blob获取文件：表单参数无法随下载请求发送的问题

你当前代码有两个核心问题，导致表单内容无法随文件下载请求一同发送：

• 使用了GET请求：GET请求仅适合通过URL参数传递简单数据，且你完全没把表单fg的输入值纳入请求中
• 未关联表单数据：创建了表单组，但调用downloadFile时完全没用到表单里的用户输入值

解决方法：改用POST请求传递表单数据 #

GET请求不适合携带复杂表单数据，换成POST请求将表单数据放在请求体里，后端就能拿到参数生成对应文件。修改后的代码如下：

// 表单定义保持不变
this.fg = this.fb.group({
    rptReqCode:[''],
    rptCode:[''],
    parFldVal:[''],
    genType:[]
})

downloadFile(filename: string = null): void{
  const token = 'my JWT';
  const headers = new HttpHeaders().set('authorization','Bearer '+token);
  // 1. 获取表单的用户输入值
  const formData = this.fg.value;

  // 2. 改用POST请求，把表单数据作为请求体发送
  this.http.post(this.appsetting.baseURL + 'File/Download', formData, {
    headers, 
    responseType: 'blob' // 保持blob类型接收文件流
  }).subscribe(
      (response: Blob) =>{
          const downloadLink = document.createElement('a');
          downloadLink.href = window.URL.createObjectURL(response);
          if (filename)
              downloadLink.setAttribute('download', filename);
          document.body.appendChild(downloadLink);
          downloadLink.click();
          // 清理临时URL对象，避免内存泄漏
          window.URL.revokeObjectURL(downloadLink.href);
          document.body.removeChild(downloadLink);
      }
  )
}

额外说明 #

• 要确保后端File/Download接口支持POST请求，并且能解析请求体中的rptReqCode、rptCode等字段
• 如果后端要求用FormData格式接收参数，可替换表单数据的生成方式：

  const formData = new FormData();
  Object.keys(this.fg.value).forEach(key => {
    formData.append(key, this.fg.value[key]);
  });
  

内容的提问来源于stack exchange，提问作者Alluring