最近碰到下载一个后端生成的文件问题,前端是使用Vue写的前后端分离。
最开始使用post请求,跨域问题,前端接受问题乱七八糟的问题,就改成get方式传值。思想就是生成一个文件,前端通过一个链接进来下载。
1、前端代码
detailDown() { const param = '?aa=' + this.aa + '&bb=' + this.bb //创建一个a标签元素 const a = document.createElement('a') //给a标签设置链接属性 a.href = common.httpUrl + '/down' + param //调用点击事件 a.click(); }
其实不用创建a标签也可以直接实现,如下:
window.location.href = common.httpUrl
2、后端代码
@RequestMapping("/down") public void down(@RequestParam(value = "aa") String aa, @RequestParam(value = "bb") String bb, HttpServletResponse response) throws Exception { SXSSFWorkbook wb = service.getExcel(aa,bb); response.setHeader("Content-type", "application/octet-stream"); response.setCharacterEncoding("UTF-8"); response.setHeader("Content-Disposition", String.format("attachment;filename=%s.xlsx", System.currentTimeMillis())); wb.write(response.getOutputStream()); wb.close(); }
最初用post传值有一堆问题,最后还是决定用get方式简单方便。