axios + vue导出excel文件
(使用到了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文件的更多相关文章
- 使用vue导出excel文件
今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,https://www.cnblogs.com/yeqrblog/p/9758981.html,但是 ...
- vue导出Excel文件
1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- 纯前端实现数据导出excel文件
一 安装依赖 npm install -S file-saver xlsx npm install -D script-loader 二 新建文件夹 在网上百度引入即可 三 在main.js中引入 ...
- ExtJS Grid导出excel文件
ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...
- PHP从数据库导出EXCEL文件
参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...
- jxl导出Excel文件
一.java项目实现读取Excel文件和导出Excel文件 实现读取和导出Excel文件的代码: package servlet; import java.io.FileInputStream; im ...
随机推荐
- 常用dos命令(4)
系统管理at 安排在特定日期和时间运行命令和程序shutdown立即或定时关机或重启taskkill结束进程(WinXPHome版中无该命令)tasklist显示进程列表(Windows XP Hom ...
- 使用面向对象思想封装js(附实例)
平时在写js时应该用面向对象思想将每一组功能封装成一个模块,可实现模块间的高内聚低耦合.重用.结构清晰........... 如果页面中逻辑复杂.功能多,不使用模块封装是不可想象的,维护起来非常复杂. ...
- 【java异常】It's likely that neither a Result Type nor a Result Map was specified
错误原因:mybatis配置文件没有返回类型参数 resultType 解决办法:resultType= 添加
- opencv4.0.0+cmake编译(含contrib)
https://blog.csdn.net/bobo184/article/details/88749651 前言笔者环境:win10+vs2015+cmake3.8.2 介绍下4.0.0的新特性,沿 ...
- monkey--介绍
前戏 monkey程序是android系统自带的,其启动脚本是位于android系统的/system/bin目录的monkey文件,其jar包是位于android系统的/system/framewor ...
- django -- ORM查询
前戏 在我们之前操作ORM中,你也许是启动Django项目,通过地址访问固定的函数,或者在pycharm里的python console里执行,第一种比较麻烦,而且每次都要启动项目,写路由,第二种虽然 ...
- 网络协议 10 - Socket 编程(上)
前面一直在说各种协议,偏理论方面的知识,这次咱们就来认识下基于 TCP 和 UDP 协议这些理论知识的 Socket 编程. 说 TCP 和 UDP 的时候,我们是分成客户端和服务端来认识的, ...
- Set学习笔记
今天又去看了一下STL里的set,来这里水一下博客 What is set? set的本质是一种功能受限的平衡树,不支持重复数字,也就是说如果插入一大堆数字12,输出它的长度还是1 如何定义 定义 s ...
- 绘制matplotlib 饼状图
参考:https://blog.csdn.net/ScarlettYellow/article/details/80458797 (2)2016年就业人员在三次产业中分布的饼状图. def swap( ...
- Biorhythms(信息学奥赛一本通 1639)
题目描述: 人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天,人会在相应的方面表现出色.例如,智力周期的高峰,人会思维敏 ...