1.安装插件

npm install 'file-saver'
npm install 'xlsx'

2.引入插件

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3.定义方法

exportForms(){
let xlsxParam = {raw:true};
let wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);
//outtable是表格对应的id
let wbout = XLSX.write(wb,{
bookType:"xlsx",
bookSST:true,
type:"array"
})
try{
FileSaver.saveAs(
new Blob([wbout],{type:"application/octet-stream;charset=utf-8"}),
"数据详情.xlsx" //导出的文件名称
)
}catch (e) {
if(typeof console !== "undefined"){
console.log(e,wbout)
}
}
return wbout;
}

提示!!

如果进行了分页只能导出第一页的数据

如果要导出所有的数据,需要单独写一个表,然后display:none导出这个所有数据的表就可以,亲测有效

记录vue和element-ui导出表格到excell的更多相关文章

  1. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

  2. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  3. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  4. 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。

    因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...

  5. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  6. element UI实现表格中添加开关控制按钮

    我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...

  7. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

  8. vue与element ui的el-checkbox的坑

    一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...

  9. element UI 调整表格行高

    使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...

  10. vue开源Element UI表单设计及代码生成器

    在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...

随机推荐

  1. linux下时间时区详解

    首先我们要明白,"时间"和"时区"是两个东西. 时间是指从某个时间点开始到另一个时间点经过的"长度",是"纵向"距离,一 ...

  2. 技术前沿:AI大模型在自动化测试中的应用实例

    哈喽,大家好,我是六哥!今天咱们来聊一聊如何用AI大模型(比如GPT-3.5)来做自动化测试,别看这东西听起来高大上,但也没那么神,跟着我咱们一步一步来,保证你也能轻松搞定,学会了保准让你在工作中老省 ...

  3. Java灵魂拷问13个为什么,你都会哪些?

    大家好,我是 V 哥.今天看了阿里云开发者社区关于 Java 的灵魂拷问,一线大厂在用 Java 时,都会考虑哪些问题呢,对于工作多年,又没有大厂经历的小伙伴不妨看看,V 哥总结的这13个为什么,你都 ...

  4. 鸿蒙NEXT开发案例:光强仪

    [引言] 本文将介绍如何使用鸿蒙NEXT框架开发一个简单的光强仪应用,该应用能够实时监测环境光强度,并给出相应的场景描述和活动建议. [环境准备] 电脑系统:windows 10 开发工具:DevEc ...

  5. Windows高级调试

    文档摘要: 本书<Windows高级调试>主要讲解Windows高级调试技术和工具,包括调试器简介.调试器揭密.符号文件与源文件的管理.栈内存破坏.堆内存破坏.安全.进程间通信.资源泄漏. ...

  6. [昌哥IT课堂]|ubuntu18.04手动安装mysql8.0.33 deb包

    前期准备 1.更新aliyun的软件包安装源: 手动更改 用你熟悉的编辑器打开: /etc/apt/sources.list 把源来链接删除或注释: 加入以下命令: ubuntu 18.04 LTS ...

  7. ClickHouse之物化MySQL

    Creates ClickHouse database with all the tables existing in MySQL, and all the data in those tables. ...

  8. PTA 那就别担心了

    PTA 那就别担心了 给定一个有向无环图,给出起点\(st\)和终点\(ed\),问从起点出发的所有路径是否都能到达终点,并且让你求出从起点到终点的不同路径数量 \(DFS\)记忆化搜索 对于第一个问 ...

  9. 使用maven 找到依赖的JAR包

    1.业务场景 有些时候,我需要知道某个jar包依赖了哪些包,这个时候可以通过maven 依赖插件将依赖的包copy出来. 2.具体做法 我们可以创建一个空的项目,增加 pom.xml 文件,增加我们需 ...

  10. 将.nuget文件夹从C盘移到其它盘,再也不用担心的C盘爆红了

    将.nuget文件夹从C盘移到其它盘,再也不用担心的C盘爆红了 命令 查看缓存文件夹的具体路径 dotnet nuget locals all --list 第一步 在文件资源管理器输入%AppDat ...