了解的方式有两种:

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的更多相关文章

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

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

  2. vue 利用axios请求接口下载excel

    一般有三种方法: 方法一: 通过a标签下载 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/download.jpg" ...

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

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

  4. vue 文件下载(需调用接口)

    methods:{ //下载文件 filerightDown(index,fileName) {//index 接口参数 fileName文件名字 var _this = this; var file ...

  5. vue使用axios访问后台接口

    链接1:https://segmentfault.com/a/1190000012635783#item-2    // axios 使用post方式传递参数,后端接受不到,怎么解决 链接2:http ...

  6. 前端axios下载excel(二进制)

    需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...

  7. 前端axios下载excel,并解决axios返回header无法获取所有数据的问题

    需求:通过后端接口下载excel文件,后端没有文件地址,返回二进制流文件 实现:axios(ajax类似) 主要代码: axios:设置返回数据格式为blob或者arraybuffer 如: var ...

  8. vue搭配axios踩坑

    客户端项目中有一个小需求“我的卡券”,有单独入口,所以综合考虑之后,采用了vue来实现,因为是初次使用,导致了选型不当,先用了SUI-Mobile来搭建页面,当决定使用vue的时候,页面也搭建完毕了, ...

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

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

随机推荐

  1. 蓝桥杯 算法训练 ALGO-152 8-2求完数

     算法训练 8-2求完数   时间限制:50.0s   内存限制:256.0MB 问题描述 如果一个自然数的所有小于自身的因子之和等于该数,则称为完数.设计算法,打印1-9999之间的所有完数. 样例 ...

  2. 【转】 Pro Android学习笔记(八四):了解Package(3):包间数据共享

    目录(?)[-] 共享User ID的设置 共享资源例子 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处:http://blog.csdn.net/flowing ...

  3. 【OpenCV】基于图像处理和模式识别的火灾检测方法

    学期末一直忙考试,大作业,很久没来CSDN耕耘了... 虽然考试都结束了,手头还是累积了不少活儿要补,不多写了,晒个小项目,之前一直做的,后来当做模式识别课程的大作业交了. 大体框架如下: 还是之前的 ...

  4. Delphi 转圈 原型进度条 AniIndicator 及线程配合使用

    Delphi FMX 转圈 原型进度条 progress AniIndicator TAniIndicator TFloatAnimation VCL下也有转圈菊花进度条 TActivityIndic ...

  5. mssql error 26

    右击数据库选择“方面”,将“RemoteAccessEnabled”属性设为“True”,点“确定”

  6. CSS布局奇淫巧计之-强大的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  7. IDEA创建Maven项目一直显示正在加载的问题

    在用idea创建maven项目的时候 有时候会出现下面这种情况 出现原因 IDEA根据maven archetype的本质,其实是执行mvn archetype:generate命令,该命令执行时,需 ...

  8. 第4章 ZK基本特性与基于Linux的ZK客户端命令行学习 4-1 zookeeper常用命令行操作

    ls path [watch] watch是一个监督者.quota是zookeeper的子目录.目录就是节点的意思,对于zookeeper来说它是以一个节点来说的,所以说/就是根节点,zookeepe ...

  9. Ros指令集

    rospack = ros+pack(age) : provides information related to ROS packages rosstack = ros+stack : provid ...

  10. Python02 标准输入输出、数据类型、变量、随记数的生成、turtle模块详解

    1 标准输出 python3利用 print() 来实现标准输出 def print(self, *args, sep=' ', end='\n', file=None): # known speci ...