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

本文介绍了使用Angular 6和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: "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 localhost:8080/api/projects/print/1" name: "HttpErrorResponse" ok: false status: 200 statusText: "OK" url: "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'});