了解的方式有两种:

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. unix下网络编程之I/O复用(五)

    前言 本章节是用基本的Linux/Unix基本函数加上select调用编写一个完整的服务器和客户端例子,可在Linux(ubuntu)和Unix(freebsd)上运行,客户端和服务端的功能如下: 客 ...

  2. popd命令

    popd命令用于删除目录栈中的记录:如果popd命令不加任何参数,则会先删除目录栈最上面的记录,然后切换到删除过后的目录栈中的最上面的目录. 语法 pushd(选项)(参数) 选项 +N:将第N个目录 ...

  3. Mockito为什么不能mock静态方法

    因为Mockito使用继承的方式实现mock的,用CGLIB生成mock对象代替真实的对象进行执行,为了mock实例的方法,你可以在subclass中覆盖它,而static方法是不能被子类覆盖的,所以 ...

  4. 二叉搜索树的结构(30 分) PTA 模拟+字符串处理 二叉搜索树的节点插入和非递归遍历

    二叉搜索树的结构(30 分) PTA 模拟+字符串处理 二叉搜索树的节点插入和非递归遍历   二叉搜索树的结构(30 分) 二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则 ...

  5. Java-API:java.util.list

    ylbtech-Java-API:java.util.list 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 1. https://docs.oracle.co ...

  6. ES6相关实用特性

    本文总结ECMAScript6相关实用特性 目录 let和const 箭头函数 class 对象字段 模板字符串 解构赋值 函数参数扩展 迭代器for...of 模块加载 map和weakmap se ...

  7. redis学习五 集群配置

    redis集群配置 0,整体概述      整体来说就是:      1,安装redis      2,配置多个redis实例      3,安装 ruby和rubygems      4,启动red ...

  8. Solaris ssh配置主机间信任关系

    假设需要配置从主机com00biiitf001登录主机ols00biiitf001时不需要密码,则采用以下步骤配置: com00biiitf001上产生公用/私有密钥对 $ ssh-keygen -t ...

  9. Velocity根据模版生成静态html

    新公司的一个CMS项目要用到,这里记录下 一.项目文件图 二.springmvc-servlet.xml 添加 <!-- 定义环境变量文件 --> <bean id="pr ...

  10. MSSQL 当前数据库中已存在用户或角色,SQLServer2008,错误15023,

    原因: sql server中“登录”与“用户”的区别,“登录”用于用户身份验证,而数据库“用户”帐户用于数据库访问和权限验证.登录通过安全识别符 (SID) 与用户关联.将数据库恢复到其他服务器时, ...