Angular 4如何从Spring Boot服务器下载.zip文件？

嘿，我看你在搞Spring Boot+Angular4的项目，用HttpClient处理ZIP文件下载对吧？先帮你把代码里的坑填上，再给你一套完整的可行方案：

你写的代码里有个拼写错误：reponseType少了个s，应该是responseType；另外在Angular4里，responseType的类型断言需要特殊处理，还有请求头的设置也可以优化下，下面是修正后的服务代码：

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

// 这里替换成你的后端API实际地址
const extractZip = '/api/download/zip';

@Injectable()
export class ZipDownloadService {
  constructor(private http: HttpClient) {}

  getZip(fileName: string): Observable<Blob> {
    const httpOptions = {
      headers: new HttpHeaders({
        // 不需要设置Content-Type（这是请求体的类型，你是GET请求没有请求体），只保留Accept即可
        'Accept': 'application/zip'
      }),
      params: new HttpParams().set('fileName', fileName),
      // Angular4中需要用as 'json'做类型断言，避免TS类型报错
      responseType: 'blob' as 'json'
    };
    return this.http.get<Blob>(extractZip, httpOptions);
  }
}

调用服务后，需要把返回的Blob转换成可下载的链接，实现浏览器自动下载：

import { ZipDownloadService } from './zip-download.service';

@Component({
  selector: 'app-zip-download',
  templateUrl: './zip-download.component.html'
})
export class ZipDownloadComponent {
  constructor(private zipService: ZipDownloadService) {}

  downloadZip(targetFileName: string): void {
    this.zipService.getZip(targetFileName).subscribe(
      (blob) => {
        // 创建临时下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载后的文件名
        link.download = `${targetFileName}.zip`;
        document.body.appendChild(link);
        // 触发点击下载
        link.click();
        // 清理临时资源
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(link);
      },
      (error) => {
        console.error('ZIP文件下载失败:', error);
        // 这里可以添加前端错误提示，比如弹框告知用户
      }
    );
  }
}

为了和前端配合正常返回ZIP文件，后端接口要确保返回正确的二进制流和响应头：

import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.nio.file.Path;
import java.nio.file.Paths;

@RestController
public class ZipDownloadController {

    @GetMapping("/api/download/zip")
    public ResponseEntity<Resource> downloadZip(@RequestParam String fileName) {
        try {
            // 替换成你的ZIP文件实际存储路径
            Path zipFilePath = Paths.get("你的文件存储目录", fileName + ".zip");
            Resource resource = new UrlResource(zipFilePath.toUri());

            return ResponseEntity.ok()
                    .header(HttpHeaders.CONTENT_TYPE, "application/zip")
                    .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\"")
                    .body(resource);
        } catch (Exception e) {
            return ResponseEntity.badRequest().body(null);
        }
    }
}

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