问题描述:
本人写vue页面想要下载,之前都是使用js a标签直接下载,今使用vue着实有些不适应,因前端有统一配置请求携带参数,使用a标签location.href后不能携带登录认证参数,最后选择ajax下载,这样可以使框架机制不破坏整体结构。、
文本内容
vue axios引入及配置拦截器 axios发送请求下载文件 后端 java excel导出下载
上代码
前端
1.首先安装ajaxs
$ npm install axios
公共处理ajax请求api.js
const fetch = axios.create({
baseURL: 'https://some-domain.com/api/',//基础路径后面我们添加的路径会与基础 路径拼接
timeout: 1000,//超时时间
headers: {'X-Custom-Header': 'foobar'}//浏览器头设置
});
// 添加请求拦截器
fetch.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
fetch.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default fetch;
创建某某模块ajax请求js文件
user.js
/*api接口*/
import fetch from './api'
/** 导出积分接口 ***/
export function download(params){
return fetch({
url:'/api/admin/user/download',
method:'post',
responseType: 'blob',//重点在这里配置为下载文件