使用Angular 6和Spring Rest API下载文件 [英] Download a file using Angular 6 and Spring Rest API

问题描述

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

I have a problem downloading a file from a rest api using angular 6

后端方法

  @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);
    }

Mathod getHeader

Mathod 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;
}

我的Angular服务

My Angular Service

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中，它给了我这个错误

I have already tried my API using PostMan and it word perfectly but in Angular it give me this error

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"

推荐答案

尝试将内容类型添加到请求标头中. 您可以试试看这个例子:

Try adding content-type to your request headers. You can try this as an exemple:

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

这篇关于使用Angular 6和Spring Rest API下载文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！