POST 请求实现任意的文件下载

JAVA配合POST请求实现任意的文件下载(含前端代码)

一、前言

在最近项目开发中,有一需求是根据请求参数构建文件后,下载下来。

  在我研究文件下载方式中,发现大部分文件请求获取是以Get请求为主的。但这种情况大部分是文件已经存在,只需要直接获取即可。
  因此本次记录一下依靠POST请求进行文件的下载和返回。

二、代码

  • 前置工作

    • JAVA:Springboot、SpringMVC、hutool。
    • JS:vue、axios。
    • 文件:D盘任一文件,文中准备了一个zip文件。
  • JAVA

@RestController
@RequestMapping("/api/file")
public class FileController {

    @PostMapping
    public void getFile(@RequestBody PostEntity entity, HttpServletResponse response) throws IOException {
        File file = new File("E:\\aa.zip");
        FileReader reader = new FileReader(file); // 使用hutool的开发工具包
        byte[] bytes = reader.readBytes();
        response.addHeader("content-type", "application/x-msdownload");//浏览器自己辨别文件类型
        response.addHeader("Content-Disposition", "attachment; filename=" + file.getName());
        response.addHeader("Content-Length", String.valueOf(bytes.length));
        ServletOutputStream outputStream = response.getOutputStream();
        outputStream.write(bytes);
        outputStream.flush();
        outputStream.close();
    }

}
  • 前端

this.$http
        .post("http://localhost:8000/api/file",
          {name : '123'},
		  {
             responseType: 'blob', // 必填。
          }
        ).then(res => {
          // 实质通过a链接触发文件下载
          let data = res.data
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', 'form.zip') // 需要文件名字
          document.body.appendChild(link)
          link.click()
        })

三、不足

下载的文件的名字为js代码设置的form.zip而不是后端设置的文件名。

  • 7
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
在Vue中发送POST请求的跨域处理可以通过两种方式来实现:使用代理或者设置服务器端的CORS。 1. 使用代理: 在Vue项目的根目录下找到`vue.config.js`文件(如果没有则新建一个),在该文件中添加以下代码: ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://api.example.com', // 后端接口的域名 changeOrigin: true, pathRewrite: { '^/api': '' // 如果后端接口没有/api前缀,可以将此行注释掉 } } } } } ``` 上述代码中,`target`是指向后端接口的域名,`changeOrigin`设置为`true`表示开启跨域,`pathRewrite`用于将请求路径中的`/api`替换为空字符串(如果后端接口没有/api前缀,可以将此行注释掉)。 然后,在前端代码中发送POST请求时,将请求路径改为`/api/xxx`即可,例如: ```javascript axios.post('/api/login', { username: 'admin', password: '123456' }) .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); ``` 2. 设置服务器端的CORS: 如果你无法修改Vue项目的配置文件,或者你希望通过服务器端来处理跨域问题,可以在服务器端设置CORS。以Node.js的Express框架为例,在后端接口的路由处理函数中添加以下代码: ```javascript app.use(function(req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); ``` 上述代码中,`Access-Control-Allow-Origin`设置为`*`表示允许任意域名的请求,你也可以将其设置为指定的域名。`Access-Control-Allow-Methods`用于设置允许的HTTP方法,`Access-Control-Allow-Headers`用于设置允许的请求头。 请根据你的具体情况选择其中一种方式来处理跨域问题。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值