angular 2 trigger excel download

Question

how do i trigger a download in angular 2 when the backend is already providing the download in the response?

my backend provides an API endpoint like this:

  Workbook userExcelReport = excelReportGenerator.createUserExcelReport(userSurveys);

    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition", "attachment; filename=\"" + userFileName + ".xlsx\"");

    try {
        userExcelReport.write(response.getOutputStream());
        userExcelReport.close();
        response.flushBuffer();
        return new ResponseEntity(HttpStatus.OK);
    } catch (IOException e) {
        logger.error("The excel workbook could not write to the outputStream ", e);
        return new ResponseEntity(HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

that method is proved to work, (as entering the backend (with no frontend) triggers the download correctly) but now i want to make an angular 2 page that triggers the download

i have the page somewhat ready, i have this in the service:

return this._http.get(this.url, {
        search: params
    });

but now i dont know how to trigger the download with the response (dont know how should i map it or what)

You can just have link directtly to your excel resource URL. Or use window.location to make the browser go to that url and download the file. No need to use an AJAX request. — JB Nizet, Mar 31 '17 at 22:07
Possible duplicate of [Javascript: Create and save file](http://stackoverflow.com/questions/13405129/javascript-create-and-save-file) — toskv, Mar 31 '17 at 22:16
@toskv but that is about creating a file and this question is about triggering a download for a response entity of the backend .-. — Fernando Castilla Ospina, Mar 31 '17 at 22:21
http.get() does trigger the download. Your question should be: how to show a save dialog box to save the response downloaded by http.get(), which is what the duplicate is all about. — JB Nizet, Mar 31 '17 at 22:29

score 0 · Accepted Answer · answered Apr 03 '17 at 21:53

a really simple solution: if the endpoint already triggers the download just build the endpoint url (with its query params)

this.url += '/api/survey/report/';
this.url += this.adminForm.get('fileType').value;

if (this.adminForm.get('evaluated').value !== null || this.adminForm.get('startDate').value !== null
  || this.adminForm.get('endDate').value !== null) {
  this.url += '?';


  if (this.adminForm.get('evaluated').value !== null) {
    this.url += '&name=';
    this.url += this.adminForm.get('evaluated').value;
  }

  if (this.adminForm.get('startDate').value !== null && this.adminForm.get('startDate').value !== '') {
    this.url += '&startdate=';
    this.url += this.adminForm.get('startDate').value;
  }

  if (this.adminForm.get('endDate').value !== null  && this.adminForm.get('endDate').value !== '') {
    this.url += '&enddate=';
    this.url += this.adminForm.get('endDate').value;
  }
}

and then just redirect there

window.location.href = this.url;

this.url = environment.apiURL;

angular 2 trigger excel download

1 Answers1