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);
    });
},