使用 Angular 6 和 Spring Rest API 下载文件

我在使用 Angular 6 从 Rest api 下载文件时遇到问题

后端方法

  @RequestMapping(value = "/print/{id}")
    public ResponseEntity<byte[]> generateReport(@PathVariable("id") long id_project){
        Map<String, Object> mapper = new HashMap<String, Object>();
        byte[] content =  exportService.export(mapper, ReportUtils.testReport, ReportUtils.FileFormat.PDF.toString());
        return new ResponseEntity<>(content, Utils.getPDFHeaders("Situation_test.pdf"), HttpStatus.OK);
    }

getHeader 方法

public static HttpHeaders getPDFHeaders(String fileName) {
    HttpHeaders head = new HttpHeaders();
    head.setContentType(MediaType.parseMediaType("application/pdf"));
    head.add("content-disposition", "attachment; filename=" + fileName);
    head.setContentDispositionFormData(fileName, fileName);
    head.setCacheControl("must-revalidate, post-check=0, pre-check=0");
    return head;
}

我的角度服务

download(url: string): any {
    let headers = new HttpHeaders();
    headers = headers.append('Authorization', 'Bearer ' + this.getToken());
    this.http.get(this.API_URL + url, {headers: headers}).subscribe((res) => {
      const file = new Blob([res], {
        type: 'application/pdf',
      });
      const a = document.createElement('a');
      a.href = this.API_URL + (<any>res)._body;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      return res;
    }, error => {
      let alert: any = {
        title: 'Notify Title',
        body: 'Notify Body',
      };
      alert.body = error.error.message || JSON.stringify(error.error);
      alert.title = error.error.error;
      alert = this.alertService.handleError(error);
      alert.position = 'rightTop';
      console.log(error);
      this.alertService.notifyError(alert);
      return error;
    });
  }

我已经使用 PostMan 尝试过我的 API，它的字词很完美，但在 Angular 中它给了我这个错误

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8080/api/projects/print/1", ok: false, …}
error: {error: SyntaxError: Unexpected token % in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttp…, text: "%PDF-1.4↵%����↵3 0 obj↵<</Filter/FlateDecode/Lengt…25f1>]/Root 8 0 R/Size 10>>↵startxref↵1049↵%%EOF↵"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for http://localhost:8080/api/projects/print/1"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "http://localhost:8080/api/projects/print/1"

尝试将内容类型添加到您的请求标头中。 你可以尝试这个作为例子：

let headers = new Headers({'Content-Type': 'application/pdf', 'Accept': 'application/pdf'});