如何使用Angular和Spring Rest服务下载xls文件？

我创build了一个angular度的工厂来调用spring rest服务来下载xls文件。

这是我的工厂：

angular.module('app') .factory('SportsbookServiceCustom', function ($http) { return { exportToXLS: function () { return $http.get('api/sportsbooks/downloadXLS').then(function (response) { return response.data; }); } }; }); 

我有这个代码为我的rest服务：

 @RequestMapping(value = "/sportsbooks/downloadXLS") public void downloadXLS(HttpServletResponse response) { Pageable pageable = new PageRequest(0, 20, Direction.ASC, "id"); Page<Sportsbook> page = sportsbookRepositoryCustom.findAll(pageable, null, null, null); List<Sportsbook> sportsbookList = page.getContent(); HSSFWorkbook workbook = new HSSFWorkbook(); HSSFSheet sheet = workbook.createSheet("Sample sheet"); Map<String, Object[]> data = new HashMap<String, Object[]>(); data.put("1", new Object[] { "Emp No.", "Name", "Salary" }); data.put("2", new Object[] { 1d, "John", 1500000d }); data.put("3", new Object[] { 2d, "Sam", 800000d }); data.put("4", new Object[] { 3d, "Dean", 700000d }); Set<String> keyset = data.keySet(); int rownum = 0; for (String key : keyset) { Row row = sheet.createRow(rownum++); Object[] objArr = data.get(key); int cellnum = 0; for (Object obj : objArr) { Cell cell = row.createCell(cellnum++); if (obj instanceof Date) cell.setCellValue((Date) obj); else if (obj instanceof Boolean) cell.setCellValue((Boolean) obj); else if (obj instanceof String) cell.setCellValue((String) obj); else if (obj instanceof Double) cell.setCellValue((Double) obj); } } if (workbook != null) { // Writing file to outputstream try { InputStream fileInputStream = new ByteArrayInputStream(workbook.getBytes()); OutputStream output = response.getOutputStream(); response.reset(); response.setContentLength((int) (workbook.getBytes().length)); response.setContentType("application/vnd.ms-excel"); response.setHeader("Content-disposition", "attachment;filename=yourFileName.xls"); IOUtils.copyLarge(fileInputStream, output); output.flush(); } catch (IOException ex) { ex.printStackTrace(); } } } 

代码运行没有错误，但下载文件不起作用。 什么是错误？

Answer 1

试试filesaver.js

从你的服务器端传递Json（这里是Spring）

 <div id="exportable"> <table width="100%"> <thead> <tr> <th>Name</th> <th>Email</th> <th>DoB</th> </tr> </thead> <tbody> <tr ng-repeat="item in items"> <td>{{item.name}}</td> <td>{{item.email}}</td> <td>{{item.dob | date:'MM/dd/yy'}}</td> </tr> </tbody> </table> </div> 

在angular度控制器中，您从服务器eg.below收到项目

 $scope.items = [{ name: "John Smith", email: "[e-mail]", dob: "1985-10-10" }, { name: "Jane Smith", email: "[e-mail]", dob: "1988-12-22" }, { name: "Jan Smith", email: "[e-mail]", dob: "2010-01-02" }, { name: "Jake Smith", email: "[e-mail]", dob: "2009-03-21" }, { name: "Josh Smith", email: "[e-mail]", dob: "2011-12-12" }, { name: "Jessie Smith", email: "[e-mail]", dob: "2004-10-12" }] } 

添加button导出

 <button ng-click="exportData()"> Export </button> 

在控制器中定义function

 $scope.exportData = function () { var blob = new Blob([document.getElementById('exportable').innerHTML], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }); saveAs(blob, "Report.xls"); }; 

演示