了解的方式有两种:

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. Erlang pool management -- RabbitMQ worker_pool 2

    上一篇已经分析了rpool 的三个module , 以及简单的物理关系. 这次主要分析用户进程和 worker_pool 进程还有worker_pool_worker 进程之间的调用关系. 在开始之前 ...

  2. 蓝桥杯 算法训练 ALGO-117 友好数

    算法训练 友好数   时间限制:1.0s   内存限制:256.0MB 问题描述 有两个整数,如果每个整数的约数和(除了它本身以外)等于对方,我们就称这对数是友好的.例如: 9的约数和有:1+3=4 ...

  3. openwrt 按下回车才能显示图标信息

    如题所示,openwrt启动后,手动才能按下系统图标和信息. 如何却掉这个手动选项呢? 修改文件/SISP-L26.7.8-OpenWrt/build_dir/target-arm_uClibc-0. ...

  4. 机器学习:集成学习(集成学习思想、scikit-learn 中的集成分类器)

    一.集成学习的思想 集成学习的思路:一个问题(如分类问题),让多种算法参与预测(如下图中的算法都可以解决分类问题),在多个预测结果中,选择出现最多的预测类别做为该样本的最终预测类别: 生活中的集成思维 ...

  5. java中实现多线程的方法有几种以及如何实现多线程

    多线程是java语言区别于其它语言的一大特点.其它语言向C++的话如果要实现多线程的话,必须调用操作系统的多线程机制(我不确定自己记得对不对 了感兴趣的自己上网查查看). 在java5以前实现多线程有 ...

  6. Spring学习九 Servlet相关

    servlet作用: 它驻留在 Web 服务器上,处理新来的请求和输出的响应.它与表示无关,实际上也不它应该与表示有关. 作为一名专业编程人员,您碰到的大多数 Java servlet 都是为响应 W ...

  7. Mysql Hive 通用的行列转换

    就是简单的一个字符串拼接,意义和所用场景自己体会下 insert into table agent_library1 select concat_ws(':',collect_set(name)) a ...

  8. java中的自动转型的学习理解

    java当中的继承是和c++中的继承类似,只是java中的继承时的父类只能有一位. 我们今天在这里讲的是关于java中的自动转型的理解:顾名思义,自动转型值得就是使用时自动的将自身的类型进行转化. 自 ...

  9. 【转】TinyMCE(富文本编辑器)

    效果预览:http://www.tinymce.com/tryit/full.php [转]TinyMCE(富文本编辑器)在Asp.Net中的使用方法 转自:http://www.cnblogs.co ...

  10. sqlplus--spool基础运用

    set heading offset feedback offset echo offset newp noneset termout offspool /home/orarun/scripts/da ...