AngularJs接受 ResponseEntity<byte[]>二进制流，实现下载文件

最新推荐文章于 2023-10-27 17:43:41 发布

原创最新推荐文章于 2023-10-27 17:43:41 发布 · 5.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #二进制 #ResponseEntitybyte

angularJs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用AngularJS从前端发起文件下载请求，并通过SpringMVC后端响应二进制数据实现文件导出功能。具体展示了两种下载方法：一种允许指定下载文件名，另一种则直接打开下载链接。

后台使用SpringMVC 的 ResponseEntity<byte[]> 参数返回类型，前台使用AngularJs请求。代码如下

后台代码：

@RequestMapping("/down")
@ResponseBody
public ResponseEntity<byte[]> expoertExcel(..) throws IOException{
	     ...
        return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file), httpheaders, HttpStatus.CREATED);
}

前台angularJs接受方式有两种，一种是可以预先设置下载文件的名称，一种是不设置的。但是两种方法都是使用的存储二进制对象blob来实现下载的

第一种模拟连接触发(可以设置下载的文件名称)：

	$http({
		method : 'POST',
		url : url,
		data : data,
		headers : {
			'Content-type' : 'application/json;charset=UTF-8'
		},
		responseType: 'arraybuffer',
		transformRequest : function(obj) {
			return JSON.stringify(obj);
		}
	}).success(function (data) {  
                //type对应着所需要下载的文件类型
	        var blob = new Blob([data], {type: "application/vnd.ms-excel"});  
	        var objectUrl = URL.createObjectURL(blob);  
	        var a = document.createElement('a');  
	        document.body.appendChild(a);  
	        a.setAttribute('style', 'display:none');  
	        a.setAttribute('href', objectUrl);  
                //下载的文件名称
	        var filename="Excel.xls";  
	        a.set`Attribute('download', filename);  
	        a.click();  
	        URL.revokeObjectURL(objectUrl);  
	        }).error(function (data) {  
                    ....
	       });

第二种方式：

 $http({...}).success(function (data) {  
	           var blob = new Blob([data], {type: "application/vnd.ms-excel"});  
	           var fileUrl = URL.createObjectURL(blob);  
	           window.open(fileUrl);
	       })