vue前端调后台接口下载文件(get,post方法集合)
vue前端调后台接口下载文件(get,post方法集合)
·
get方法
1.当前窗口打开
window.location.href = '接口地址'; //当前窗口打开
2.新建窗口打开
window.open('接口地址'); //新建窗口打开
3.a标签 点击下载
<a href="接口地址" download="下载文件名">下载按钮</a> //a标签下载
4.也可以使用接口 get请求更新,下面是请求接口文件exportData.js,也可以使用你目前正在使用封装,如果没有可以参考我的封装
import request from "@/utils/requestExport"
//导出气象因子信息
export function exportWather(data) {
return request({
methods: 'get',
url: '/scientific/sci-meteoric-data/export',
params: data,
responseType: "blob"
})
}
页面请求时,引入这个文件vue
import {exportWather} from "./exportData"
/**
* 点击下载按钮
*/
exportProficients() {
let that =this;
let params = {
startTime: this.time[0],
endTime: this.time[1],
equipId: this.equipId,
type:this.activeEquip.type
};
exportWather(params).then((res) => {
const link=document.createElement("a");
let blob=new Blob([res], { type: "application/vnd.ms-excel" });
link.style.display="none";
link.href=URL.createObjectURL(blob);
link.setAttribute("download", '气象信息');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
},
附上 requestExport.js这个文件的配置
import axios from 'axios'
import store from '@/store'
import router from '@/router'
import Vue from 'vue'
import serviceConfig from './service-config'
import { removeItem } from './storage'
import { checkTokenExpire } from './tokenExpire'
let baseURL = serviceConfig.VUE_APP_BASE_API; // 根据当前环境获取对应的服务地址
const service = axios.create({
baseURL: baseURL,
timeout: 500000 // request timeout
})
axios.defaults.withCredentials = true;
// 请求拦截器
service.interceptors.request.use(config => {
// 统一注入token
if (store.getters.tokenInfo) {
//拦截请求判断处理token是否过期
checkTokenExpire(config);
// 如果有token
config.headers['Authorization'] = `Bearer ${store.getters.tokenInfo.accessToken}`
}
// 必须返回配置
return config
}, error => {
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
/**
* 下面的注释为通过在response里,自定义code来标示请求状态
* 当code返回如下情况则说明权限有问题,登出并返回到登录页
* 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
* 以下代码均为样例,请结合自生需求加以修改,若不需要,则可删除
*/
debugger;
const res = response;
// token失效返回的状态码A0001(因为refresh_token也是有时效的所以这里的失效机制保留) 账号在其他设备登录A0002
if (res.status !== 200) {
// 其他失败状态码做统一拦截
Vue.prototype.$message.error(res.message)
}
return response.data;
}, error => {
return Promise.reject(error)
})
// 导出 axios 实例
export default service
注意:多次调用相同接口,下载多个文件
this.checkList.forEach(item =>{ //checkList 表示批量下载数组
var elemIF = document.createElement("iframe"); //创建iframe元素容器
elemIF.src = 接口地址+item; //循环遍历数组请求同一接口下载
elemIF.style.display = "none";
document.body.appendChild(elemIF);
})
Post方法
通过axios方法(最好重新写不使用已封装好的), Blob 文件对象(File 接口都是基于Blob)完成post接口下载excel文件,其他文件下载换掉Blob对象的 type 。各个type类型参考地址:下载Content-Type,Blob type类型汇总_爱写程序的小高的博客-CSDN博客
import axios from "axios"
exportProficients() {
/**
* 导出表格数据xlsx
*/
let that =this;
let params = { //参数列表
rank:this.formInline.rank,
keyWord:this.formInline.keyWord,
};
var Axios = axios.create({
timeout: 3600 * 1000
});
//添加请求拦截器
Axios.interceptors.request.use(
function(config) {
// 在发送请求之前处理
// header头添加token
config.headers['authc-token'] = window.localStorage.token;
return config;
},
function(error) {
// 发送请求错误处理
console.info(error);
return Promise.reject(error);
}
);
let url=that.getUrl('exportProficients'); //接口地址
Axios.post(url, params, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: "blob" }).then(res => {
const link=document.createElement("a");
let blob=new Blob([res.data], { type: "application/vnd.ms-excel" }); //类型excel
link.style.display="none";
link.href=URL.createObjectURL(blob);
link.setAttribute("download", '下载文件名');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}).catch(res => {
console.log(res);
});
},
更多推荐
已为社区贡献3条内容
所有评论(0)