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 => {});
}




目录
相关文章
|
2月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
85 1
|
缓存 JavaScript 搜索推荐
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
1336 4
|
资源调度 JavaScript
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
|
JavaScript 前端开发
【Vue面试题二十七】、你了解axios的原理吗?有看过它的源码吗?
文章讨论了Vue项目目录结构的设计原则和实践,强调了项目结构清晰的重要性,提出了包括语义一致性、单一入口/出口、就近原则、公共文件的绝对路径引用等原则,并展示了单页面和多页面Vue项目的目录结构示例。
|
JavaScript 前端开发 开发者
vue中使用axios请求post接口,请求会发送两次
vue中使用axios请求post接口,请求会发送两次
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
309 4