【vue】使用axios发送post请求实现excel下载

1.实现效果：

2.实现代码：

1.前端代码：

1.1.响应拦截：

// 导出
const headers = response.headers
if (headers['content-type'] === 'application/octet-stream;charset=utf-8') {return response
}

1.2.接口文件，api.js

// 导出登录日志
exportLoginLog(data) {return request({url: `/api/log/exportLoginLog`,method: 'post',responseType: 'blob',data})
},

1.3. .vue文件

api.exportLoginLog(me.logForm).then(response => {const blob = new Blob([response.data])// 获取 获取响应头 heads 中的 filename 文件名const temp = response.headers["content-disposition"].split(";")[1].split("filename=")[1];var fileName = decodeURIComponent(temp);// 创建一个 a 标签const link = document.createElement('a')// 不显示a标签link.style.display = 'none'// 给a 标签的href属性赋值link.href = URL.createObjectURL(blob);link.setAttribute('download', fileName)// 把a标签插入页面中document.body.appendChild(link)link.click()// 点击之后移除a标签document.body.removeChild(link)
})

2.后端代码：

response.reset();
response.setContentType("application/octet-stream;charset=utf-8");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("登录日志.xlsx", "UTF-8"));
ServletOutputStream outputStream = response.getOutputStream();
wb.write(outputStream);
// 释放资源
outputStream.close();
wb.close();
log.info("导出成功");

源码地址：https://gitee.com/xhs101/tt-parent

【vue】使用axios发送post请求实现excel下载相关推荐

Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
vue 使用axios发送的请求使用md5加密
之前使用axios发送请求都是直接发送,没有加入任何加密方式,但是这种情况其实是不安全的,最近项目要求使用md5进行加密. 在项目根目录下面安装md5 npm install --save js-md ...
jquery发送ajax请求_复习之Vue用axios发送ajax请求
Axios是一个基于promise的HTTP库. 浏览器支持情况:Chrome.Firefox.Safari.Opera.Edge.IE8+. 官网:https://github.com/axios/ ...
使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
promise的应用和在VUE中使用axios发送AJAX请求服务器
promise 用promise对函数封装: 原来的代码: <!DOCTYPE html> <html> <head><title>vue demo&l ...
Vue前端axios发送请求后端数据样例
1.导入脚手架axios.min.js和vue.min.js 2.模拟请求数据data.json {"sucess": true,"code": 20000,& ...
axios发送网络请求
网络模块封装选择什么网络模块传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览 ...
使用 axios 发送 http 请求
本文是我在学习过程中记录学习的点点滴滴,目的是为了学完之后巩固一下顺便也和大家分享一下,日后忘记了也可以方便快速的复习. 使用 axios 发送 http 请求实战前言一.axios 简介与安装及 ...
如何使用Axios发送异步请求？
首先,让我们来介绍一下Axios.Axios是一个基于Promise的HTTP客户端,它可以帮助我们轻松地发送异步请求.它支持所有现代浏览器(包括IE8+),并且还提供了Node.js的版本. 那么, ...

【vue】使用axios发送post请求实现excel下载

1.实现效果：

2.实现代码：

【vue】使用axios发送post请求实现excel下载相关推荐

最新文章

热门文章