通过ajax异步请求下载文件的方法

在简单的项目中下载文件的方法都是通过一个get请求来下载文件，随着前后端分离，前端使用前端框架（vue，anglajs等）之类的node.js
通过异步请求来关联前后端，下载文件的时候使用get方式请求后端下载文件时，就显得不太合适。

下面介绍如何通过ajax异步请求下载一个zip压缩文件

前端发送一个ajax请求

var self = this;
        this.$http({
          method:'post',
          url:self.config.serverUrl+"/url.json",
          data:xxx,//参数
          responseType: "arraybuffer"
        }).then(function (response) {
          if(response.status=='200'){
            var n = new Blob([response.data], {type: "application/zip"}),
            i = 文件名 + ".zip",
            r = document.createElement("a");
            r.href = URL.createObjectURL(n),
            r.download = i,
            document.body.appendChild(r),
            r.click(),
            window.setTimeout(function() {URL.revokeObjectURL(n),document.body.removeChild(r)},0);
            
          }else{
            alert(‘文件下载异常’);
          }
        }).catch(function (response) {
          console.log(response);
        });

代码中的发送ajax请求的方式可能跟各位的代码有所不同，主要是then方法体中的代码。

后端：

 @RequestMapping(method= RequestMethod.POST,value="url.json",consumes="application/json;charset=UTF-8")
    public void url(@RequestBody Map<String,Object> params, HttpServletRequest request, HttpServletResponse response){
    //params为ajax异步请求带过来的参数（json格式转为map格式了）
    //此处占时用不到这个params
    //创建一个文件用于压缩
    createdTxtFile();
    //压缩成一个zip
    //压缩
	File file = new File("D://ccc.zip");
		ZipUtil.zip(file,false,
				FileUtil.file("D://logs//a.txt"));
	byte[] data = file2ByteArray("D://ccc.zip");
	response.reset();
        response.setHeader("Content-Disposition", String.format("attachment; filename=%s.zip", "a"));
        response.addHeader("Content-Length", "" + data.length);
        response.setContentType("application/octet-stream; charset=UTF-8");
        try {
            IoUtil.write(response.getOutputStream(), Boolean.TRUE, data);
        } catch (IORuntimeException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
	
	/**
	*	在D盘logs文件夹下生成一个txt文件
	*/
	public void createdTxtFile(){
		try {
	        // 保存路径
	        String path = "D://logs";
	        String title = "a";
	        String content = "一段话";
	        // 防止文件建立或读取失败，用catch捕捉错误并打印，也可以throw
	        /* 写入Txt文件 */
	        File mkdirsName = new File(path);// 相对路径，如果没有则要建立一个新的output。txt文件
	        if(!mkdirsName.exists()){
	            mkdirsName.mkdirs();
	        }
	        File writename = new File(path+"\\"+title+".txt");// 相对路径，如果没有则要建立一个新的output。txt文件
	        // 判断文件是否存在，不存在即新建
	        // 存在即根据操作系统添加换行符
	        if(!writename.exists()) {
	            writename.createNewFile(); // 创建新文件
	        } else {
	            String osName = System.getProperties().getProperty("os.name");
	            if (osName.equals("Linux")) {
	                content = "\r" + content;
	            } else {
	                content = "\r\n" + content;
	            }
	        }
	        // 如果是在原有基础上写入则append属性为true，默认为false
	        BufferedWriter out = new BufferedWriter(new FileWriter(writename,true));
	        out.write(content); // 写入TXT
	        out.flush(); // 把缓存区内容压入文件
	        out.close(); // 最后记得关闭文件
	    } catch (Exception e) {
	        e.printStackTrace();
	    }
 	}
	/**
     * 将文件转为byte数组
     *
     * @param filename
     * @return byte[]
     */
    public static byte[] file2ByteArray(String filename) throws IOException {
        FileChannel fc = null;
        try {
            fc = new RandomAccessFile(filename, "r").getChannel();
            MappedByteBuffer byteBuffer = fc.map(FileChannel.MapMode.READ_ONLY, 0,
                    fc.size()).load();
            byte[] result = new byte[(int) fc.size()];
            if (byteBuffer.remaining() > 0) {
                byteBuffer.get(result, 0, byteBuffer.remaining());
            }
            return result;
        } catch (IOException e) {
            e.printStackTrace();
            throw e;
        } finally {
            try {
                fc.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }