vue 里怎么用 axios 实现 post 请求下载文件

简介: vue 里怎么用 axios 实现 post 请求下载文件

需求


最近有个需求就是要批量下载 Excel,然后接口参数需要列表的表头信息,参数数据有点大,接口需要 post 方式处理


在实现这个功能之前,我们先了解一下 blob 这个东东




Blob


Blob 是对大数据的不透明引用或者句柄。


名字来源于 SQL 数据库,表示二进制大对象(Binary Large Object)。


在 JavaScript 中 Blob 通常表示二进制数据,也可以表示一个小型文本文件的内容。


Blob 有大小 size (单位:字节),MIME类型


20210602180546180.png

Web 浏览器可以将 Blob 存储到内存中或者磁盘上。


Blob


20210602192637145.png


实现

import axios from 'axios';
import qs from 'qs';
export function exportListData(url, params){
  axios({
    method: 'POST',
    url: url,
    data: qs.stringify(params),
    headers: {
      'access-token': getCookie('access-token')
    },
    responseType: 'blob'
  }).then(res => {
    const link = document.createElement('a');  // 创建元素
    console.log("获取的数据============》",res);
    let blob = new Blob([res], { type: 'application/x-download' });
    link.style.display = 'none';
    link.href = URL.createObjectURL(blob);   // 创建下载的链接
    link.setAttribute('download', '测试数据.xls');  // 给下载后的文件命名
    document.body.appendChild(link);
    link.click();  // 点击下载
    document.body.removeChild(link);  //  下载完成移除元素
    window.URL.revokeObjectURL(link.href);  // 释放掉blob对象
  }).catch(err => {});
}




目录
相关文章
|
缓存 JavaScript 搜索推荐
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
1074 1
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
293 2
|
Python
axios的get请求传入数组参数
【10月更文挑战第11天】 当使用 `axios` 发送包含数组参数的 GET 请求时,默认的序列化方式可能与后端(如 Django)不兼容,导致无法正确获取数组参数。解决方案是通过 `paramsSerializer` 指定自定义序列化函数,或使用 `qs` 库来格式化数组参数,确保前后端一致。示例代码展示了如何使用 `qs` 库设置 `arrayFormat` 为 `"repeat"`,以符合 Django 的解析要求。
759 2
|
JSON JavaScript 前端开发
axios的post请求,数据为什么要用qs处理?什么时候不用?
axios的post请求,数据为什么要用qs处理?什么时候不用?
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
250 0
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
1590 0
|
缓存 JavaScript 前端开发
Vue(五)计算属性、过滤器、axios、vue 生命周期
Vue(五)计算属性、过滤器、axios、vue 生命周期
421 0
Vue(五)计算属性、过滤器、axios、vue 生命周期
|
8月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
731 2
|
7月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
622 137