vue+element实现一个excel表格下载的功能
时间:2022-07-24
本文章向大家介绍vue+element实现一个excel表格下载的功能,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近在使用vue-element-admin这个后台管理框架开源模板在做一个管理后台,使用起来其实还挺方便的,大部分的组件源码里面都已经写好了,用的时候只需要把源码拿出来修改修改,也就成了。
这里记录一下开发过程中遇到的一些功能。
资料相关
vue-element-admin
推荐指数:star:55k Github 地址:https://github.com/PanJiaChen/vue-element-admin Demo体验:https://panjiachen.github.io/vue-element-admin/#/dashboard
一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。
今天记录一个表格下载的功能
在demo给到的源码里面,可以看到也是有表格下载的功能的,在这个基础上进行一些修改,大概是这个样子,点击下载按钮,将页面上显示的表格下载出来即可。即调用后端给到的接口,直接从后端服务器上下载表格。后端会返回一个二进制文件给到我这边。
参考代码: index.vue
<template>
<div class="app-container">
<el-button type="primary" icon="el-icon-download" @click="handleDownload">
导出基础表格
</el-button>
</div>
</template>
<script>
import { exportBaseInfoVIP} from '@/api/exportExcel'
export default {
data() {
return {
filename: '',
bookType: 'xlsx'
};
},
computed: {
},
methods: {
downloadExcel(res, fileName = '未命名.xls') {
debugger;
const a = document.createElement('a')
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
const url = URL.createObjectURL(blob)
a.setAttribute('href', url)
a.setAttribute('download', fileName)
a.click()
},
async handleDownload() {
const res = await exportBaseInfoVIP()
this.downloadExcel(res, '会员基础信息.xls')
},
}
};
</script>
api
import request from '@/utils/request'
//基础信息
export const exportBaseInfoVIP = () => {
return request({
url: '/statistics/childrenUser/export',
responseType:"blob",
method: 'get'
})
}
request.js
if (response.headers['content-type'] === "application/x-msdownload") {
let disposition = decodeURI(response.headers['content-disposition']);
let fileName = disposition.split('=')[1];
const a = document.createElement('a')
const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
const url = URL.createObjectURL(blob)
a.setAttribute('href', url)
a.setAttribute('download', fileName)
a.click()
return
}
效果如下: 点击按钮,即可下载excel表格
注意:本地可能会出现下载文件名称为undefined的问题,部署在服务器上,即可获得excel文件名称。
- hdu--(1247)Hat’s Words(trie树)
- HDU----(4519)郑厂长系列故事——体检
- 张戈博客成功启用移动端主题:Mobile Pack
- Oracle数据库性能障碍分析利器:SYSTEMSTATE DUMP介绍
- hdu ---(4517)小小明系列故事——游戏的烦恼(Dp)
- HTTP加速器varnish安装小记(1)
- 手把手教你估算深度神经网络的最优学习率(附代码&教程)
- 批处理判断第一个硬盘的最后一个分区并进入
- MVCC原理探究及MySQL源码实现分析
- 关于热点数据导出与加载的影响,多的是你不知道的事
- 【Python】30行代码教你将微信变成智能回复机器人
- 【python爬虫】知乎互联网话题问答内容可视化分析
- “mysqlbinlog”工具做binlog server靠谱吗?
- 看各路神仙如何大战MySQL insecure warning报警有感
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 不要再对类别变量进行独热编码了
- 面试Java基础问题汇总
- K8s集群上使用Helm部署2.4.6版本Rancher集群
- 一个工作三年的同事,居然还搞不清深拷贝、浅拷贝...
- 太有意思了,教你实现实现王者荣耀团战!
- 动画:什么是基数排序?
- 一个有意思的分钱模拟问题
- 如何快速的开发一个完整的直播购物源码,基础篇
- 「拥抱开源」Nacos 实战篇
- 仅2M!免费软件又一次干掉了付费版
- python爬虫学习 爬取幽默笑话网站
- 如何用Python快速优雅的批量修改Word文档样式?
- 为什么MySQL不推荐使用uuid或者雪花id作为主键?
- 用Python打造一款文件搜索工具,所有功能自己定义!
- 用Python绘制诱人的桑基图,一眼看透熬夜和狗粮的秘密