一般有三种方法:

方法一: 通过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. jQuery网页定时弹出广告

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  2. 在线答题APP动工前的小总结

    7月26号,确定了我们这个暑假的学习任务——做一个答题软件.目的就是为了让我们在做项目中学习,在学习中提高做项目的能力.但是,由于基础知识都还没掌握牢固,所以从本周三确定项目以来,基本没有一点进展. ...

  3. Codeforces 442A Borya and Hanabi

    有五种花色 外加 五种点数 共25张牌,每次有n张牌,主人知道这n张牌中有哪些牌,并且哪种牌有几张,但是不知道具体是哪张牌,他可以问某种花色,然后知道了哪几张是该花色,也可以问点数,然后就知道了哪几张 ...

  4. idea以yarn-client 提交任务到yarn

    鉴于很多小白经常问我如何用idea提交任务到yarn,这样测试的时候不用频繁打包. 昨天,晚上健身回来录了一个小视频,说是小视频但是耗时也比较长,将近40min.可能是健身脱水太多,忘了补充盐分,无力 ...

  5. meta标签小结

    1.手机页面所需: <meta name="viewport" content="width=device-width,initial-scale=1.0,mini ...

  6. 题目(或游戏)流程控制器上传到GitHub

    题目控制系统 1 支持 题目按相同的个数分组 2 支持 pause resume 3 支持 每题限定时间 4 支持 支持对计时器进行回调 5 支持 在全流程开始,全流程结束,每组开始,每组结束,每题开 ...

  7. 个人安装GO1.13.6版本指南手册之搭建环境

    因好奇而走进go语言,让你不在只闻其声,不见其形. https://golang.org/doc/install:这里是go语言的官网文档.吃不透英文,终究会被限制在有限的区域,一词词的吃透. 安装包 ...

  8. UVA 12657/COJ 1329 HN第九届省赛 链表模拟

    因为最近学了Splay,刚看到这个题目总共四种操作,把某个数移到另一个数的左边 或者右边 交换两个数 翻转整个序列,马上想到用Splay,因为总点数和总操作数都为10^5,如果用Splay把操作优化到 ...

  9. .equal()和==的区别

    1.首先,equal和==最根本的区别在于equal是一个方法,而==是一个运算符. 2.一般来说,==运算符比较的是在内存中的物理地址,.equal()比较的是哈希算法值是否相等(即hashcode ...

  10. 题解 P1082 【同余方程】

    题目 这里给出非递归的 exgcd 做法 [基础] ( 只需要非递归的同学麻烦跳过 ) 由于欧几里德算法 ( 又名辗转相除法 ) 可以帮助我们求出最大公约数,并且提出对于 \(\forall a,b\ ...