记录vue和element-ui导出表格到excell
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的更多相关文章
- element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- vue.js+element ui Table+spring boot增删改查
小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...
- element UI实现表格中添加开关控制按钮
我使用的是element ui V1.4.3 如下图是我要实现的效果: <template> <div> <el-button type="text" ...
- Vue框架Element UI教程-axios请求数据
Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...
- vue与element ui的el-checkbox的坑
一,场景 通过使用checkbox,实现如图的场景, 点击某个tag,实现选中和非选中状态. 二, 官网的例子 通过切换checked值为true或者false来实现,一个checkbox的状态切换 ...
- element UI 调整表格行高
使用element UI的table默认属性,绘制表格如下: 该表格的行高太大了,于是想调小一些. 查看官网的文档,table有几个属性, row-style:行的 style 的回调方法,也可以使用 ...
- vue开源Element UI表单设计及代码生成器
在日常的开发工作中,表单开发是较为繁琐且重复的.本文介绍一个我自己写的,提高开发效率的小工具. 1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代 ...
随机推荐
- python项目实战——一元线性回归预测模型
文章目录 1.一元线性回归简介 2.环境准备 3.数据准备 4.可视化数据 5.构建线性回归模型 在数据科学领域,预测分析是一项核心技能.一元线性回归作为预测分析的基石,能够帮助我们理解一个自变量如何 ...
- QT生成固定长度的随机字符串
最近项目中有一个需要使用QT生成固定长度随机字符串的需求,需求也很简单,就是生成一个n位的仅包含0-9以及大写字母的字符串,因为这也是第一次使用QT自身的随机数,这里就做一下简单记录. 废话不多说,直 ...
- Flink RetractStream示例及UDF函数实现
介绍 今天在Flink 1.7.2版本上跑一个Flink SQL 示例 RetractPvUvSQL,报 Exception in thread "main" org.apache ...
- 为什么在http协议中使用base64编码方式传输二进制文件
相关: 图解 Base64 实现原理并使用 js 实现一个简单的 Base64 编码器 常用加密方法之Base64编解码及代码实现 一直都知道在http协议中使用base64的方式传递二进制文件,虽然 ...
- 鸿蒙NEXT开发案例:光强仪
[引言] 本文将介绍如何使用鸿蒙NEXT框架开发一个简单的光强仪应用,该应用能够实时监测环境光强度,并给出相应的场景描述和活动建议. [环境准备] 电脑系统:windows 10 开发工具:DevEc ...
- docker部署java项目
1.首先你需要提前准备好jar包或者war包,并想办法放入Linux环境(或虚拟机)中: 2.java项目的部署需要用到Tomcat或者Jetty,docker可以直接拉取他俩的镜像,这里以Tomca ...
- 基于CPLD/FPGA的呼吸灯效果实现(附全部verilog源码)
一.功能介绍 此设计可以让你的FPGA板子上那颗LED具有呼吸效果,像智能手机上的呼吸灯一样.以下源码已上板验证通过,大家可直接使用. 二.呼吸灯Verilog源码 ps1. 带★号处可根据需要进行修 ...
- Java 动态设置 JVM 参数的方法
Java虚拟机(JVM)在运行Java应用时,其性能调优和资源管理至关重要.虽然许多JVM参数在启动时通过命令行设置,但在应用运行期间动态调整某些参数也是可行的.通过动态设置JVM参数,开发者可以更有 ...
- ES6 面试题
新增了哪些属性? 新增块级作用域:let.const 新增数据类型:Symbol 表示独一无二的值 新增数据结构: Set,类似数组,所有数据是唯一的: Map,键值对的结合,传统的 Object 只 ...
- manim边学边做--突出显示
本篇介绍Manim中用于突出显示某些内容的动画类,主要包括: ApplyWave:让图形或文字产生连续波浪式变形的动画类,用于展示波动效果,参数可调节 Circumscribe:用于在几何场景中展示图 ...