入门angular：文件的下载和上传

来源：互联网发布：ubuntu查看安装的软件编辑：程序博客网时间：2024/06/01 08:48

由于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();            }        }    }

对应的前端页面

<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();        });    }});

阅读全文

0 0