前端通过axios封装的get或post请求,导出页面表格内容为Excel

1. post 请求
export default function (data) {
    axios({
        method: 'post',
        url: data.url,  //后端接口地址
        responseType: 'blob',  //bolb格式的请求方式
        headers: {
            Authentication: getToken('Admin-Token')  //请求头
        },
        data: data.data //需要传给后端的请求参数体
    }).then(res => {
        const BLOB = res.data;
        const fileReader = new FileReader();  
        fileReader.readAsDataURL(BLOB);  //对请求返回的文件进行处理
        fileReader.onload = (e) => {
            let a = document.createElement('a');
            a.download = data.name + '.xlsx'
            a.href = e.target.result;
            document.body.appendChild(a)
            a.click();
            document.body.removeChild(a)
        }
    }).catch(err => {
        console.log(err.message)
    })
}

fileReader详解

2. get 请求
export default function (data) {
     axios({
         url: data.url,
         method: 'get',
         responseType: 'blob',
         params: data.data,  //与post传参方式不同之处
         headers: {
           Authentication: getToken()       
         }
     }).then(res => {
        var blob = new Blob([res.data], 
        {type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8'});
        var filename = data.name + '.xlsx';  
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.style.display = 'none';
        downloadElement.href = href;
        downloadElement.download =filename ; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
        }
   }

参考文章

注意:有时候导出 excel 表格,报错 “失败,网络错误” ,就是 http 请求头没加的原因,导致请求没发送成功,统一封装的axios 请求和excel导出的封装请求是相互独立的,因此需要在 excel 导出的封装请求里也加上请求头才行,有的接口没做请求头限制,因此不加请求头也能请求成功,这要看后端要求。

欢迎关注公众号:【抓住重点】,获取更多编程周边技能,与博主一起进步在这里插入图片描述

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个封装Axios 网络请求并区分 GET、POST 请求的示例代码: ```javascript import axios from 'axios'; const service = axios.create({ baseURL: 'http://localhost:3000', // 接口的基础路径,根据实际情况修改 timeout: 5000, // 请求超时时间 }); // 请求拦截器 service.interceptors.request.use( config => { // 在请求发送之前,可以在这里对请求进行一些处理,比如添加请求头、设置请求数据格式等 return config; }, error => { // 请求错误时,可以在这里进行一些处理,比如提示错误信息等 console.log(error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { // 在响应数据返回之前,可以在这里对响应进行一些处理,比如过滤数据、统一处理错误码等 return response.data; }, error => { // 响应错误时,可以在这里进行一些处理,比如提示错误信息等 console.log(error); return Promise.reject(error); } ); // 封装一个 GET 请求 export function get(url, params) { return service({ url, method: 'get', params, }); } // 封装一个 POST 请求 export function post(url, data) { return service({ url, method: 'post', data, }); } ``` 在上述代码中,我们通过封装 `get` 和 `post` 方法来区分 GET 和 POST 请求。在这两个方法中,我们都是通过 `service()` 方法来发送请求,只是在配置中指定了不同的请求方法(method)、请求参数(params 或 data)。最后,我们将这两个方法导出,供其他地方使用。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值