一般有三种方法:

方法一: 通过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. php添加openssl扩展

    很多时候都会用到openssl组件,下面就介绍一下linux下php安装openssl扩展: 安 装openssl组件,一般php安装目录中都有许多扩展组件的安装包,当然也包括openssl,例如我的 ...

  2. 第二阶段scrum-3

    1.整个团队的任务量: 2.任务看板: 会议照片: 产品状态: 前端制作完成,数据库正在配置

  3. 201903-1 小中大 Java

    思路: 中位数就是排序后中间的那个数.如果有偶数个数,就是中间两个数的平均值. 注意,这个平均值可能是整数,可能是小数,如果都是一样的处理,如果输出整数是3.0,而不是3,就有问题.所以需要分开处理. ...

  4. python可移植支持代码;用format.节省打印输出参数代码;math模块;

    1.多平台移植代码: #!/usr/bin/env python3 这一行比较特殊,称为 shebang 行,在 Python 脚本中,你应该一直将它作为第一行. 请注意行中的第一个字符是井号(#). ...

  5. Tensorflow学习教程------简单练一波,线性模型

    #coding:utf-8 import tensorflow as tf import numpy as np #使用numpy 生成100个随机点 x_data = np.random.rand( ...

  6. centos6-7 yum安装php的方法

    1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 yum remove php.x86_64 php-cli.x86_64 ph ...

  7. 18 11 05 继续补齐对python中的class不熟悉的地方 和 pygame 精灵

    ---恢复内容开始--- class game : #历史最高分----- 是定义类的属性 top_score =0 def __init__(self, player_name) : #是定义的实例 ...

  8. DP模板

    怕不是最后一篇(雾),过滤最基础的背包DP.状压DP.递推等 树上换根DP:https://www.luogu.org/problemnew/show/P4284 #include<bits/s ...

  9. win10编译tensorflow C++接口

    ​原文地址:https://www.bearoom.xyz/2018/08/28/win10-build-tf-cc/ 首先,我觉得这是一个比较DT的活,因为,tensorflow支持最好的编程语言应 ...

  10. AES学习小结

    AES是基于数据块的加密方式,即每次处理的数据是一块(16字节),当数据不是16字节的倍数时填充,这就是所谓的分组密码(区别于基于比特位的流密码),16字节是分组长度. AES支持五种模式:CBC,C ...