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

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

    }

});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值