由于angular的火热
***服务器端:pom.xml*********************jar准备**************************************
1. 首先对文件spring和springMVC进行对文件的上传和下载首先需要下载jar包
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>org.apache.poi</groupId>
<artifactId>poi-ooxml</artifactId>
<version>3.15</version>
</dependency>
****服务器端:spring--MVC.xml********************xml配置***********************************
<!-- 配置文件上传,如果没有使用文件上传可以不用配置,当然如果不配,那么配置文件中也不必引入上传组件包 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- 默认编码 -->
<property name="defaultEncoding" value="utf-8" />
<!-- 文件大小最大值 -->
<property name="maxUploadSize" value="10485760000" />
<!-- 内存中的最大值 -->
<property name="maxInMemorySize" value="40960" />
</bean>
****服务器端:controller层**********************************************************************************
上传:
@RequestMapping(value = "/upload", produces = { "application/json" },
method = RequestMethod.POST )
public @ResponseBody ResultData upload(
@RequestParam(value = "logo", required = true)
MultipartFile excelfile){
Boolean flag=reportService.readExcel(excelfile);
return null;
}
下载:
@RequestMapping(value = "/download", method = RequestMethod.GET )
public void download(HttpServletRequest request,HttpServletResponse response) throws Exception{
InputStream inputStream = null;
XSSFWorkbook xWorkbook = null;
try {
ServletContext context = request.getSession().getServletContext();
inputStream = context.getClassLoader().getResourceAsStream("/templates/商务计划书模板-目标.xlsx");
xWorkbook = new XSSFWorkbook(inputStream);
if (xWorkbook == null) {
return;
}
String agent = request.getHeader("USER-AGENT").toLowerCase();
response.setContentType("applicationnd.ms-excel");
String fileName = "商务计划书模板-目标";
String codedFileName = java.net.URLEncoder.encode(fileName, "UTF-8");
if (agent.contains("firefox")) {
//火狐浏览器特殊处理
response.setCharacterEncoding("utf-8");
response.setHeader("content-disposition", "attachment;filename=" + new String(fileName.getBytes(), "ISO8859-1") + ".xlsx");
} else {
response.setHeader("content-disposition", "attachment;filename=" + codedFileName + ".xlsx");
}
OutputStream os = response.getOutputStream();
xWorkbook.write(response.getOutputStream());
os.close();
xWorkbook = null;
} catch (Exception e) {
logger.error("商务计划书模板导出失败", e);
} finally {
if (inputStream != null) {
inputStream.close();
}
}
}
对应的前端页面
<script src="framework/jquery-1.9.0.js"></script>
<script src="framework/angular-1.3.0.14/angular.js"></script>
<script src="framework/angular-1.3.0.14/angular-animate.min.js"></script>
<script src="framework/angular-1.3.0.14/angular-file-upload.min.js"></script>
<script src="framework/angular-ui-router.js"></script>
<script src="framework/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="js/app.js"></script>
<body ng-app="app">
<div ng-controller="UploaderController" >
<input type="file" file-model="myFile" >
<button ng-click="save()" >上传</button>
<button ng-click="download()" >下载</button>
</div>
</body>以下就是js代码:
var app=angular.module('app',[]);
app.controller('UploaderController',function($scope,$http){
$scope.save = function() {
var fd = new FormData();
var file = document.querySelector('input[type=file]').files[0];
fd.append('logo', file);//angular 上传的文件必须使用特殊的格式处理,不是json格式
$http({
method:'POST',
url:"http://localhost:8080/report/upload",
data: fd,
headers: {'Content-Type':undefined},// 写成是undifined,浏览器才自动转化为 文件上传的类型
transformRequest: angular.identity
}).success( function ( response )
{
//上传成功的操作
alert("uplaod success");
});
}
/* 经验总结:
1.post的方法里要加responseType: 'arraybuffer'参数,不然下载的excel会乱码
2.使用{type: "application/vnd.ms-excel"}的写法,可以保存为xls格式的excel文件
而使用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”则会保存为xlsx
3.使用增加节点调用click方法
*/
$scope.download = function() {
$http({
method:'GET',
url:"http://localhost:8080/report/download",
responseType: "arraybuffer"
}).success( function ( data )
{ // 这里会弹出一个下载框,增强用户体验
var blob = new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var objectUrl = URL.createObjectURL(blob);
// 创建a标签模拟下载
var aForExcel = $("<a><span class='forExcel'>下载excel</span></a>").attr("href",objectUrl);
$("body").append(aForExcel);
$(".forExcel").click();
aForExcel.remove();
});
}
});