vue使用js-file-down进行文件下载
作者:互联网
1)安装js-file-download
npm i -S js-file-download
2)编写下载的页面
<template> <div> <el-button @click="download">下载</el-button> </div> </template> <script> import fileDownload from 'js-file-download' import request from '@/request' export default { methods: { download() { request.postDownload('file/download').then(res => { const disposition = res.headers["content-disposition"] //获取文件名 let fileName = disposition.substring(disposition.indexOf("filename=") + 9); if (window.navigator.userAgent.indexOf("Firefox") > -1) { fileName = fileName.substring(fileName.indexOf("-8?B?") + 5, fileName.indexOf("?=")) fileName = base64Util.decode(fileName); } else { fileName = decodeURIComponent(fileName); } fileDownload(res.data, fileName) }).catch(err => { console.log(err) }) } }, } </script> <style scoped> </style>
这里网络请求使用的axios,对其进行了封装。下载的方法很简单,主要是获取响应头中的文件名
3)编写下载的工具类
package com.zys.demo.util; import lombok.extern.slf4j.Slf4j; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.net.URLEncoder; @Slf4j public class FileUtil { /** * 通过流下载文件 * * @param fileName 文件名 * @param response * @throws IOException */ public static void downloadFile(String filePath, String fileName, HttpServletResponse response) throws IOException { File file = new File(filePath + File.separator + fileName); InputStream in = new FileInputStream(file); //允许暴露content-disposition,默认不暴露 response.setHeader("Access-Control-Expose-Headers", "content-disposition"); response.setCharacterEncoding("UTF-8"); response.setContentType("application/octet-stream"); response.setHeader("content-disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8")); int len = 0; byte bytes[] = new byte[1024]; OutputStream out = response.getOutputStream(); while ((len = in.read(bytes)) > 0) { out.write(bytes, 0, len); } in.close(); out.close(); } }
需要注意的是必须设置响应头的Access-Control-Expose-Headers,也就是要暴露的信息,否则在前端无法获取到文件名。
4)编写下载的接口
package com.zys.demo.controller; import com.zys.demo.util.FileUtil; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @RestController @RequestMapping("/api/file") public class FileController { @PostMapping("/download") public void downloadFile(HttpServletResponse response) throws IOException { FileUtil.downloadFile("D://temp", "test.txt", response); } }
启动后,点击下载按钮即可下载。文件需事先存在于对应位置。
标签:vue,disposition,fileName,down,file,download,import,js,response 来源: https://www.cnblogs.com/zys2019/p/15130359.html