VUE+Springboot从服务器指定路径下载文件（过程中各种坑的处理）

我们使用的是VUE+Springboot前后端分离模式开发，本地调试的时候使用nginx解决跨越问题：

1、后台文件下载接口：

@RequestMapping(value = "/downFile")
    public HttpServletResponse downloadFile(HttpServletResponse response,HttpServletRequest request) {
        try {
            String fileName = request.getParameter("name").toString();
            // 要下载的文件的全路径名
            String filePath ="D:\\test\\upload\\file\\"+fileName;
            File file = new File(filePath);
            // 获取文件名
            String filename = file.getName().toString();
            //通过流把文件内容写入到客户端
            InputStream fis = new BufferedInputStream(new FileInputStream(filePath));
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
            // 清空response
            response.reset();
            // 设置response的Header
            response.addHeader("Content-Disposition", "attachment;filename=" + new String(filename.getBytes(),"ISO-8859-1"));
            response.addHeader("Content-Length", "" + file.length());
            OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/octet-stream");
            toClient.write(buffer);
            toClient.flush();
            toClient.close();
        } catch (IOException ex) {
            ex.printStackTrace();
        }
        return response;
    }

2、前端（VUE）下载文件，两种方法：

第一种方法：

页面效果（样式还没调，凑合着看吧）：

元素：

<div>
    <h4 style="font-weight:500;height:15px;">发票附件</h4>
    <template v-for="(value,index) in attachedUrls">
      <a>{{value}}</a>
      <v-button-search @click='download(value)' style="float:right;">下载</v-button-search>
    </template>
</div>

事件：

    download(name) {
      window.location.href="http://127.0.0.1:8088/server/invoice/downFile?name="+name;
    }

第二种方法：

页面效果：

元素：

<div>
	  <h4 style="font-weight:500;height:15px;">发票附件</h4><br><br>
	  <template v-for="(value,index) in attachedUrls">
	    	<a :href='attUrl+value'>{{value.substring(value.indexOf('_')+1,value.length)}}</a><br>
	  </template>
</div>

初始化变量：

  data() {
    return {
      attUrl:'http://127.0.0.1:8088/server/invoice/downFile?name='
    };
  },

3、遇到的各种坑

①http请求报413

经调查发现是我使用的nginx的问题，前后端分离项目为解决跨域我使用了nginx反向代理，nginx对上传文件的大小有限制，需要做如下修改：
不论是linux系统还是windows系统找到nginx的conf路径下的nginx.conf文件，在http{}的大括号中添加下面几行代码：

	#配置请求体缓存区大小
	client_max_body_size 8M; 
	#设置客户端请求体最大值
	client_body_buffer_size 128k; 
	fastcgi_intercept_errors on;

如图：

保存后重启nginx，我这里是windows下的开发环境

nginx.exe -s reload

②springboot对上传文件的大小限制

报错如下：

调查报错信息发现问题所在：
原来Spring Boot工程嵌入的tomcat限制了请求的文件大小，这一点在Spring Boot的官方文档中有说明，请求中单个文件大小上限为1Mb，单次请求的文件的总数不能大于10Mb。要更改这个默认值需要在配置文件（如application.properties）中加入两个配置（不同版本的springboot这个配置的key略有差异，大家对应版本查一下，我的Spring Boot 2.0.2）：

spring.servlet.multipart.max-file-size=5MB
spring.servlet.multipart.max-request-size=50MB

如图：

一番周折之后：

成功了！！！