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

最新推荐文章于 2024-08-10 07:29:35 发布

TNT_xy

最新推荐文章于 2024-08-10 07:29:35 发布

阅读量1.1w

点赞数 2

分类专栏： html基础

本文链接：https://blog.csdn.net/sinat_27639721/article/details/72673034

版权

html基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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

    }

});