一般有三种方法:

方法一: 通过a标签下载

// href为文件的存储路径或者地址,download为问文件名
<a href="/images/download.jpg" download="downloadFileName" />

优点:简单方便。
缺点:这种下载方式只支持Firefox和Chrome不支持IE和Safari,兼容性不够好。

方法二:通过window.location

window.location = 'http://127.0.0.1:8080/api/download?name=xxx&type=xxx'

优点:简单方便。
缺点:只能进行get请求,当有token校验的时候不方便。

方法三:通过请求后台接口

// download.js
import axios from 'axios' export function download(type, name) {
axios({
method: 'post',
url: 'http://127.0.0.1:8080/api/download',
// headers里面设置token
headers: {
loginCode: 'xxx',
authorization: 'xxx'
},
data: {
name: name,
type: type
},
// 二进制流文件,一定要设置成blob,默认是json
responseType: 'blob'
}).then(res => {
const link = document.createElement('a')
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.setAttribute('download', `${name}.xlsx`)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}

  

vue 利用axios请求接口下载excel的更多相关文章

  1. vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

    在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...

  2. vue中Axios请求豆瓣API数据并展示到Swipe中

    vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...

  3. vue 解决axios请求出现前端跨域问题

    vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...

  4. vue 中使用 axios 请求接口,请求会发送两次问题

    在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...

  5. VUE 使用axios请求第三方接口数据跨域问题解决

    VUE是基于node.js,所以解决跨域问题,设置一下反向代理即可. 我这里要调用的第三方接口地址为 http://v.juhe.cn/toutiao/index?type=top&key=1 ...

  6. 前端调用后端接口下载excel文件的几种方式

    今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...

  7. 解决在vue中axios请求超时的问题

    查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...

  8. vue中axios调用接口和用node.js跨域

    <script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...

  9. vue使用axios调用接口

    vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...

随机推荐

  1. 《打造扛得住的MySQL数据库架构》第7章 SQL查询优化

    SQL查询优化 7-1 获取有性能问题SQL的三种方法 如何设计最优的数据库表结构 如何建立最好的索引 如何拓展数据库的查询 查询优化,索引优化,库表结构优化 如何获取有性能问题的SQL 1.通过测试 ...

  2. NRF24L01多对一、多通道通讯关键代码

    要想24L01多通道通讯成功,务必先单通道调试成功,并且懂得这块芯片通讯的一些基本知识.   一.基本的通讯条件 1.接收端的接收地址(RX_ADDR_Px)等于发射端的发射送地址(TX_ADDR) ...

  3. PHP集成环境wamp和navicat for mysql 的安装

    1. PHP集成环境WAMP的安装: 下载wamp: 链接:https://pan.baidu.com/s/1zvoPEbLdG7y04WWHNM6UcA  密码:mxd3 安装过程如下图: 安装完成 ...

  4. leetcode--200--python(深度广度优先遍历实现代码)

    点滴积累,厚积薄发,做好每一天,向时间要效率,向生命要质量. 一.深度优先搜索和广度优先搜索DFS(Depth-First-Search),是盲目搜索算法的一种.常常用在树的遍历及图的处理上.假设当前 ...

  5. 7)给tab下面添加一个子非模态对话框

    1)还是沿袭(6)那个代码 2)下面是步骤: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·~~~~~~~~~~~~~~~~~~~~~~~~~~~ 然后,修改这个对 ...

  6. 吴裕雄--天生自然MySQL学习笔记:MySQL 连接

    使用mysql二进制方式连接 您可以使用MySQL二进制方式进入到mysql命令提示符下来连接MySQL数据库. 实例 以下是从命令行中连接mysql服务器的简单实例: [root@host]# my ...

  7. SQL基础教程(第2版)第5章 复杂查询:5-1 视图和表

    本章将以此前学过的SELECT语句,以及嵌套在SELECT语句中的视图和子查询等技术为中心进行学习.由于视图和子查询可以像表一样进行使用,因此如果能恰当地使用这些技术,就可以写出更加灵活的 SQL 了 ...

  8. 出现UnboundLocalError: local variable 'a' referenced before assignment异常的情况与解决方法

    出现UnboundLocalError: local variable ‘a’ referenced before assignment异常的情况与解决方法字面意思:局部变量赋值前被引用原因:局部变量 ...

  9. 内存管理之堆heap

    1.什么是堆? 堆(heap)是一种内存管理方式.内存管理对操作系统来说是一件非常复杂的事情,因为首先内存容量很大, 其次就是内存需求在时间和大小块上没有规律(操作系统上运行着几十甚至几百个进程,这些 ...

  10. Dart异步编程-future

    Dart异步编程包含两部分:Future和Stream 该篇文章中介绍Future 异步编程:Futures Dart是一个单线程编程语言.如果任何代码阻塞线程执行都会导致程序卡死.异步编程防止出现阻 ...