通过 axios 和 file-saver 在浏览器客户端保存文件 ## 使用插件 [axios](https://www.kancloud.cn/yunye/axios/234845) 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 [file-saver](https://github.com/eligrey/FileSaver.js) 是在客户端保存文件的解决方案,非常适合在客户端生成文件的Web应用程序。 #### 前端代码示例 ``` import saveAs from 'file-saver'; this.excelFileType = '.xlsx'; this.$http({ method: 'post', url: '/downloadExcel', responseType: 'arraybuffer', headers: { 'Accept': 'bytes' }, data: this.users }).then((response) => { let buffer = response.data; let blob = new Blob([buffer]); let cd = response.headers['content-disposition']; let filename = cd && cd.substr(cd.indexOf('=') + 1) filename = filename && decodeURI(filename) || `确认结果.xlsx`; saveAs(blob, filename) }).catch((error) => { console.error(error); }) ``` #### 后端示例 ``` @RequestMapping("/downloadExcel") public void downloadExcelByFront(@RequestBody User[] users, String excelSuffix, HttpServletResponse response) { List<User> list = new ArrayList<User>(Arrays.asList(users)); response.setHeader("Access-Control-Expose-Headers","Content-Disposition"); response.setCharacterEncoding("UTF-8"); response.setHeader("content-Type", "application/vnd.ms-excel"); response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("确认结果.xlsx“, "UTF-8")); ... // 输出文件流 workbook.write(response.getOutputStream()); } ``` ## 前端 GET 请求文件示例 ``` import saveAs from 'file-saver'; this.excelFileType = '.xlsx'; this.$http({ method: 'get', url: '/downloadExcel/确认结果.xlsx', responseType: 'arraybuffer', }).then((response) => { let buffer = response.data; let blob = new Blob([buffer]); let cd = response.headers['content-disposition']; let filename = cd && cd.substr(cd.indexOf('=') + 1) filename = filename && decodeURI(filename) || `确认结果.xlsx`; saveAs(blob, filename) }).catch((error) => { console.error(error); }) ``` ## 小计 **Accept** 代表发送端(客户端)希望接收的数据类型。比如:'Accept': 'bytes' 代表发送端希望接受的数据类型是 bytes。 **Content-Type** 代表发送端(客户端)发送的实体数据的数据类型。比如‘Content-type':'application/json' 代表发送端发送的数据格式是json。