(使用到了elementUI框架)

<template>
<el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
</template>
<script>
import API from '../api/api_dispatch'
export default {
data() {
return {
myCompanyId: ''
}
},
created() {
let userInfo = JSON.parse(window.sessionStorage.getItem('access-user'));
this.myCompanyId = userInfo.companyId;
},
methods: {
exportExcel() {
// 按需要可加上无数据不导出的判断(略)
if (this.myCompanyId !== '') {
API.exportExcel({
companyId: this.myCompanyId
}).then(res => {
var blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'})
var downloadElement = document.createElement('a');
var href = window.URL.createObjectURL(blob); //创建下载的链接
downloadElement.href = href;
downloadElement.download = '导出文件.xls'; //下载后文件名
document.body.appendChild(downloadElement);
downloadElement.click(); //点击下载
document.body.removeChild(downloadElement); //下载完成移除元素
window.URL.revokeObjectURL(href); //释放掉blob对象
});
} else {
this.$message.error('操作异常');
}
}
}
}
</script>

api/api_dispatch.js:

import * as API from './'

export default {
// 导出报表
exportExcel: params => {
return API.EXPORT('outOfDate/excel/export', params);
}
}

api/index.js:(省略了其他的GET、POST等方法)

import Env from './env'; // 声明接口地址文件
import axios from 'axios' //基地址
let base = Env.baseURL;
let instance = axios.create({
responseType: 'blob', //返回数据的格式,可选值为arraybuffer,blob,document,json,text,stream,默认值为json
})
// instance 添加一个请求拦截器
instance.interceptors.request.use(function (config) {
let user = JSON.parse(window.sessionStorage.getItem('access-user'));
config.headers.common['token'] = user.token
return config;
}, function (error) {
// Do something with request error
console.info("error: ");
console.info(error);
return Promise.reject(error);
}) // 导出
export const EXPORT = (url, params) => {
return instance({
method: 'get',
url: `${base}` + url,
params: params
}).then(res => {
return Promise.resolve(res.data)
})
}

axios + vue导出excel文件的更多相关文章

  1. 使用vue导出excel文件

    今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...

  2. vue导出Excel文件

    1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...

  3. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  4. vue+element 表格导出Excel文件

    https://www.cnblogs.com/bobodeboke/p/8867481.html  非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...

  5. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  6. 纯前端实现数据导出excel文件

    一  安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...

  7. ExtJS Grid导出excel文件

    ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...

  8. PHP从数据库导出EXCEL文件

    参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...

  9. jxl导出Excel文件

    一.java项目实现读取Excel文件和导出Excel文件 实现读取和导出Excel文件的代码: package servlet; import java.io.FileInputStream; im ...

随机推荐

  1. Kibana 学习资料

    Kibana 学习资料 网址 Kibana 官方文档 https://s0www0elastic0co.icopy.site/guide/en/kibana/current/introduction. ...

  2. git常用命令(测试必备)

    什么是git 百度百科:Git(读音为/gɪt/)是一个开源的分布式版本控制系统,可以有效.高速地处理从很小到非常大的项目版本管理. git相对svn,有很多优势,这里就不再赘述,大家网上搜索吧. g ...

  3. python--协程知识初识

    线程和进程的操作是由程序触发系统接口,最后的执行者是系统:协程的操作则是程序员. 协程存在的意义:对于多线程应用,CPU通过切片的方式来切换线程间的执行,线程切换时需要耗时(保存状态,下次继续).协程 ...

  4. 【mybatis】清空数据库表数据

    <update id="truncateTable"> truncate table ${tableName} </update> <update i ...

  5. HTML JAVASCRIPT CSS 大小写敏感问题

    html: 大小写不敏感 css: 大小写不敏感 javascript: 大小写敏感 但是 但是 但是 这三者是相互联系的, 所以合在一起使用的时候就产生了变化 ----  TagName, Clas ...

  6. [无效]网络流之Dinic算法

    // 此博文为迁移而来,写于2015年2月6日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102vrg4.html UPDA ...

  7. ZROI 暑期高端峰会 A班 Day5 杂题选讲

    CF469E \(n\) 个需要表示的数,请使用最少的 \(2^k\) 或 \(-2^k\) 表示出所有需要表示的数.输出方案. \(n\le 10^5,|a_i|\le 10^5\). 首先每个数肯 ...

  8. ES6基础-ES6 class

    作者 | Jeskson 来源 | 达达前端小酒馆 ES - Class 类和面向对象: 面向对象,即万物皆对象,面向对象是我们做开发一种的方式,开发思维,面向对象的思维中万物皆对象,以人作为例子,它 ...

  9. Android Studio 之 AndroidViewModel

    AndroidViewModel是ViewModel的一个子类,可以直接调用getApplication(),由此可以访问应用的全局资源. 在 MyViewModel 这个类中,此类直接继承自 And ...

  10. 【Gamma】“北航社团帮”展示博客

    目录 团队介绍 项目愿景 整个项目的预期典型用户 功能展示 原预期用户数量 项目使用情况数据分析 用户量变化 学生认证人数 社长认证人数 入社申请数 活动发布 新闻发布 网页端使用情况 小程序打开次数 ...