How to export a excel file in Spring boot using Angular 2?

In my project i need to export Customer data in a excel file. I am using table structure using Hybernate build.

my controller is as:

@RequestMapping(value="exporttoexcel", method= RequestMethod.GET, produces={ MediaType.APPLICATION_JSON_VALUE })
public void getMyData(HttpServletRequest request, HttpServletResponse response) throws Exception {
List<Course> listCourses = new ArrayList<Course>();
listCourses.add(new Course(1, "Polarfrosch100", new Date()));
listCourses.add(new Course(2, "Polarfrosch101", new Date()));
listCourses.add(new Course(3, "Polarfrosch102", new Date()));
HashMap<String, Object> model = new HashMap<>();
model.put("courses", listCourses);
new ExcelUtilsHelper().renderMergedOutputModel(model, request, response);
}


My Helper file is as:

public class ExcelUtilsHelper {


private static final DateFormat DATE_FORMAT = DateFormat.getDateInstance(DateFormat.SHORT);

private String contentType;

public ExcelUtilsHelper() {
this.setContentType("application/vnd.ms-excel");
}

public final void renderMergedOutputModel(Map<String, Object> model, HttpServletRequest request, HttpServletResponse response) throws Exception {
Workbook workbook = this.createWorkbook(model, request);
this.buildExcelDocument(model, workbook, request, response);
response.setContentType(this.getContentType());
this.renderWorkbook(workbook, response);
}

protected Workbook createWorkbook(Map<String, Object> model, HttpServletRequest request) {
return new HSSFWorkbook();
}

protected void renderWorkbook(Workbook workbook, HttpServletResponse response) throws IOException {
ServletOutputStream out = response.getOutputStream();
workbook.write(out);
}

public void setContentType(String contentType) {
this.contentType = contentType;
}

public String getContentType() {
return contentType;
}

protected void buildExcelDocument(Map<String, Object> model,
Workbook workbook,
HttpServletRequest request,
HttpServletResponse response) throws Exception {

// change the file name
response.setHeader("Content-Disposition", "attachment; filename=\"my-xls-file.xls\"");

@SuppressWarnings("unchecked")
List<Course> courses = (List<Course>) model.get("courses");

// create excel xls sheet
Sheet sheet = workbook.createSheet("Spring MVC AbstractXlsView");

// create header row
Row header = sheet.createRow(0);
header.createCell(0).setCellValue("ID");
header.createCell(1).setCellValue("Name");
header.createCell(2).setCellValue("Date");

// Create data cells
int rowCount = 1;
for (Course course : courses){
Row courseRow = sheet.createRow(rowCount++);
courseRow.createCell(0).setCellValue(course.getId());
courseRow.createCell(1).setCellValue(course.getName());
courseRow.createCell(2).setCellValue(DATE_FORMAT.format(course.getDate()));
}
}
}


And Cource is as:

public class Course {
int Id;
String Name;
Date Date;
// Getter and setter
}


My list on UI part is as:

<div class="panel-heading">
<h6 class="panel-title">All Customers</h6>
<button (click)="addCustomer()" class="btn btn-xs bg-primary" title="Add"><i class="glyphicon glyphicon-edit"></i></button>
<button (click)="exportToExcel()" class="btn btn-xs bg-danger" title="Add"><i class="glyphicon glyphicon-edit"></i></button>
</div>


in service code is as:

exportToExcel(){
console.log("in exportToExcel");
this.customerService.getCustomersExcelData().subscribe(result => {
console.log("DataResult");
console.log(result)
},
error => {
console.log(error);
});
}


and

getCustomersExcelData(){
return this.http.get(ApiConfig.apiRoot+ApiConfig.excelDataCustomer)
.map((response: Response) => {
this.downloadFile(response),
error => console.log("Error downloading the file."),
() => console.info("OK");
}).catch(this.commonMethods.handleError);
}


when i run this it gives below out put:

Response with status: 200 OK for URL: http://localhost:9966/api/customer/exporttoexcel


Problem is, i am unable to export the given data in excel format.

Continue reading...