如何使用Angular和Spring Rest服務下載xls文件？

Question

我在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; 
      }); 
     } 
    }; 
}); 

我有我的休息服務驗證碼：

@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（這裏春季）

<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> 

在你的角度控制器，你從服務器eg.below

$scope.items = [{ 
     name: "John Smith", 
     email: "j.smith@example.com", 
     dob: "1985-10-10" 
    }, { 
     name: "Jane Smith", 
     email: "jane.smith@example.com", 
     dob: "1988-12-22" 
    }, { 
     name: "Jan Smith", 
     email: "jan.smith@example.com", 
     dob: "2010-01-02" 
    }, { 
     name: "Jake Smith", 
     email: "jake.smith@exmaple.com", 
     dob: "2009-03-21" 
    }, { 
     name: "Josh Smith", 
     email: "josh@example.com", 
     dob: "2011-12-12" 
    }, { 
     name: "Jessie Smith", 
     email: "jess@example.com", 
     dob: "2004-10-12" 
    }] 
} 

添加按鈕接收的項目出口

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

定義功能控制器

$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"); 
    }; 

Demo