vue 用axios实现调用接口下载excel
了解的方式有两种:
1. 用a标签,href设置为后端提供的excel接口
<a href="excel接口">导出</a>
简单方便,缺点就是当有token校验时,不适合
2. 用axios
把token放在请求的header里边
import axios from 'axios'
import { getToken } from 'js-cookie'; methods: {
exportExcel () {
let url = 'http...',
token = getToken();
axios.get(url, {
headers:{
"Admin_token":token
},
responseType: 'blob', //二进制流
}).then(function (res) {
if(!res) return
let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
let url = window.URL.createObjectURL(blob);
let aLink = document.createElement("a");
aLink.style.display = "none";
aLink.href = url;
aLink.setAttribute("download", "excel.xls");
document.body.appendChild(aLink);
aLink.click();
document.body.removeChild(aLink);
window.URL.revokeObjectURL(url);
}).catch(function (error) {
console.log(error)
});
}
}
注:如果上面的方法还是乱码,请尝试一下方法:
1.如果装了mockjs,把mockjs去掉
2.使用原生的js请求
参考:https://blog.csdn.net/xuesheng1610748/article/details/83865679
vue 用axios实现调用接口下载excel的更多相关文章
- 前端调用后端接口下载excel文件的几种方式
今天有一个导出相应数据为excel表的需求.后端的接口返回一个数据流,一开始我用axios(ajax类库)调用接口,返回成功状态200,但是!但是浏览器没有自动下载excel表,当时觉得可能是ajax ...
- vue 利用axios请求接口下载excel
一般有三种方法: 方法一: 通过a标签下载 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/download.jpg" ...
- VUE 使用axios请求第三方接口数据跨域问题解决
VUE是基于node.js,所以解决跨域问题,设置一下反向代理即可. 我这里要调用的第三方接口地址为 http://v.juhe.cn/toutiao/index?type=top&key=1 ...
- vue 文件下载(需调用接口)
methods:{ //下载文件 filerightDown(index,fileName) {//index 接口参数 fileName文件名字 var _this = this; var file ...
- vue使用axios访问后台接口
链接1:https://segmentfault.com/a/1190000012635783#item-2 // axios 使用post方式传递参数,后端接受不到,怎么解决 链接2:http ...
- 前端axios下载excel(二进制)
需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...
- 前端axios下载excel,并解决axios返回header无法获取所有数据的问题
需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...
- vue搭配axios踩坑
客户端项目中有一个小需求“我的卡券”,有单独入口,所以综合考虑之后,采用了vue来实现,因为是初次使用,导致了选型不当,先用了SUI-Mobile来搭建页面,当决定使用vue的时候,页面也搭建完毕了, ...
- vue中axios调用接口和用node.js跨域
<script>const API_PROXY = 'https://bird.ioliu.cn/v1/?url='import axios from 'axios'export defa ...
随机推荐
- unix下网络编程之I/O复用(三)
poll函数 在上文unix下网络编程之I/O复用(二)中已经介绍了select函数的相关使用,本文将介绍另一个常用的I/O复用函数poll.poll提供的功能与select类似,不过在处理流设备时, ...
- navicat链接远程数据库
1.之前使用的是常规的连接方式 学习源头: https://jingyan.baidu.com/article/0aa2237573c1e688cc0d6427.html 这里的ip地址是服务器的ip ...
- GWT中自定义你的"cell"
GWT内部提供了CellTable组件,它允许自由增加column以及cell,在设定column之后就是在其中填充cell了.但GWT所提供的CellTable样式确实不敢恭维,为了解决这一问题,在 ...
- 【OpenCV】基于图像处理和模式识别的火灾检测方法
学期末一直忙考试,大作业,很久没来CSDN耕耘了... 虽然考试都结束了,手头还是累积了不少活儿要补,不多写了,晒个小项目,之前一直做的,后来当做模式识别课程的大作业交了. 大体框架如下: 还是之前的 ...
- 使用Asset Pipeline管理rails生产环境静态资源实现步骤
1. 修改项目中指向静态资源文件的链接 a) 访问静态资源文件 <%= stylesheet_link_tag "application", media: &q ...
- Python类(五)-反射
反射即通过字符串映射或修改程序运行时的状态.属性.方法 有4个方法: hasattr(): hasattr(object,string):object为实例化的对象,string为字符串 判断对象ob ...
- 深入理解Java虚拟机—JVM内存结构
1.概述 jvm内存分为线程共享区和线程独占区,线程独占区主要包括虚拟机栈.本地方法栈.程序计数器:线程共享区包括堆和方法区 2.线程独占区 虚拟机栈 虚拟机栈描述的是java方法执行的动态内存模型, ...
- 问题:sqlserver有没有类似Oracle的LISTAGG;结果: 灵活运用 SQL SERVER FOR XML PATH
灵活运用 SQL SERVER FOR XML PATH FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前 ...
- Navicat for Oracle中如何使用外键
转自:https://blog.csdn.net/weixin_39183543/article/details/80555104 1. 外键名最后保存的时候自动生成: 2. 参考模式自动生成: 3. ...
- hadoop再次集群搭建(2)-配置免秘钥ssh登录
SSH对于大多程序员都不陌生,目前主流的云服务提供上也是通过SSH来提供链接的安全保障,比如AWS通过使用下载的私钥(private key)实现与EC2实例安全连接.GitHub通过上传的公钥(pu ...