vue 利用axios请求接口下载excel
一般有三种方法:
方法一: 通过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的更多相关文章
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue 解决axios请求出现前端跨域问题
vue 解决axios请求出现前端跨域问题 最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中 ...
- vue 中使用 axios 请求接口,请求会发送两次问题
在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...
- VUE 使用axios请求第三方接口数据跨域问题解决
VUE是基于node.js,所以解决跨域问题,设置一下反向代理即可. 我这里要调用的第三方接口地址为 http://v.juhe.cn/toutiao/index?type=top&key=1 ...
- 前端调用后端接口下载excel文件的几种方式
今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...
- 解决在vue中axios请求超时的问题
查看更多精彩内容请访问我的新博客:https://www.cssge.com/ 自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们 ...
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
- vue使用axios调用接口
vue本身不支持ajax接口的请求,所以在vue中经常使用axios这个接口请求工具,这个axios也是vue官方推荐的库.axios的官方github: https://github.com/mza ...
随机推荐
- 【分类问题中模型的性能度量(一)】错误率、精度、查准率、查全率、F1详细讲解
文章目录 1.错误率与精度 2.查准率.查全率与F1 2.1 查准率.查全率 2.2 P-R曲线(P.R到F1的思维过渡) 2.3 F1度量 2.4 扩展 性能度量是用来衡量模型泛化能力的评价标准,错 ...
- SPOJ FISHER + FPOLICE SPFA+背包
当初第一次做的是FPLICE这个题,当时就觉得要用图论去搜索,但是当时陷入死思维就是 dp[][]两个维度都是点,这样就违背了题目的本意,题目给定了一个时间T,在不超过时间T的情况下求最小的消耗,这不 ...
- 科学 multi port
issues/679 create new UUID cat /proc/sys/kernel/random/uuid example config : multi port , multi user ...
- 吴裕雄--天生自然 PHP开发学习:echo 和 print 语句
<?php echo "<h2>PHP 很有趣!</h2>"; echo "Hello world!<br>"; ec ...
- Day 7:TreeSet
补充上一日:HashCode方法默认返回的是内存地址,String类已经重写了对象的HashCode方法 方法细节:取出数组中的值或字符串的值按照规定计算返回一个值,如果两个字符串内容一致就会返回相同 ...
- POJ - 3665 iCow(模拟)
题意:有N首歌曲,播放的顺序按照一定的规则,输出前T首被播放的歌的编号.规则如下: 1.每首歌有一个初始的等级r,每次都会播放当前所有歌曲中r最大的那首歌(若r最大的有多首,则播放编号最小的那首歌). ...
- 运行xv6
我们使用Qemu在Ubuntu下运行 1. 安装Qemu sudo apt-get install qemu 执行 qemu-system-i386 ,如果弹出Qemu界面说明安装成功了 2. 编译x ...
- h5与安卓、ios交互
1.安卓交互 h5调用安卓方法 window.webview.xxx() 安卓调用h5方法, 方法需要在全局注册 window['showUnreadMsg'] = () => { this.$ ...
- APP-计算器
在网课上学习了计算器的制作方法,并自己做了小常识,看完一便后,感觉自己会了,思想也明白了,但是当关掉视频真正开始做的时候会发向许多的问题,自己在前的好多语法用的并不是很熟练,但是反复的查阅资料,观看教 ...
- gitlab命令详解
http://www.ruanyifeng.com/blog/2014/06/git_remote.html