SpringBoot+Vue实现文件下载

1、前台vue代码,没有使用axios,用的是this.$http.post来实现的

this.$http({
     url: this.$http.adornUrl('/stats/importExportUsers/downloadTemplate'),
     method: 'post',
     responseType: 'arraybuffer'
 }).then((res) => {
     let url = window.URL.createObjectURL(new Blob([res.data]))
     let a = document.createElement('a')
     a.setAttribute("download","userTemplate.xls")
     a.href = url
     a.click();
  })

2、后台代码使用的是springBoot的一个controller

// 导入模板下载路径,在application.yml文件中配置的路径
@Value("${capitek.usertemplate.path}")
private String templatePath;  

@PostMapping("/downloadTemplate")
public void downloadTemplate(HttpServletRequest request, HttpServletResponse response){  
    	File file = new File(templatePath);
    	byte[] buffer = new byte[1024];
    	BufferedInputStream bis = null;
    	OutputStream os = null; //输出流
    	try {
    	   //判断文件父目录是否存在
	       if (file.exists()) {
	          //设置返回文件信息
	           response.setContentType("application/vnd.ms-excel;charset=UTF-8");
	           response.setCharacterEncoding("UTF-8");
	           response.setHeader("Content-Disposition", "attachment;fileName=" + java.net.URLEncoder.encode("userTemplate.xls","UTF-8"));	           
               os = response.getOutputStream();
               bis = new BufferedInputStream(new FileInputStream(file));
               while(bis.read(buffer) != -1){
                   os.write(buffer);
               }
	       }
        } catch (Exception e) {
            e.printStackTrace();       
        } finally {
        	try {
        		if(bis != null) {
        			bis.close();
        		}
        		if(os != null) {
        			os.flush();
        			os.close();
        		}
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
}

 

遇到的问题:

1、开始的时候跳转不到后台代码中,提示跨域问题,于是设置返回值等多种方式,无果。发现使用的请求是this.$http.get请求,修改给post之后,成功跳转到后台代码中。

错误信息:Access to XMLHttpRequest at 'http://localhost:8082/stats/importExportUsers/downloadTemplate' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2、执行完代码之后返回到前台内容为undefined,一度认为是输出流读取的有问题,后发现后台方法中添加了返回值,是公司封装的工具,所有返回成功时,内容为undefined,改为void之后,可以看到返回了内容。

3、返回内容之后,在vue页面进行了处理,但是下载的文件中是一堆乱码,经过查询是未设置返回类型,因为使用的是bolb所以设置了{responseType: 'blob'},仍然无效果。

      然后查询到时字节流的话需要按照字节方式设置返回值类型,修改为responseType: 'arraybuffer'之后,成功下载。

 

response.setContentType中的内容

application/vnd.ms-excel:可以保存为xls格式的excel文件(兼容老版本)

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet:则会保存为xlsx

 

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页