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. 2024 CSP 游记

    \(\text{CSP-J}\) 游记 \(\text{Day -INF}\) 初赛免了,没有游记. \(\text{Day 0}\) 有点慌,于是打开了游戏跟 \(\text{zjx,sym}\) ...

  2. KVM的基本使用

    1. 虚拟化介绍 虚拟化是云计算的基础.简单的说,虚拟化使得在一台物理的服务器上可以跑多台虚拟机,虚拟机共享物理机的 CPU.内存.IO 硬件资源,但逻辑上虚拟机之间是相互隔离的. 物理机我们一般称为 ...

  3. 『玩转Streamlit』--数据展示组件

    数据展示组件在Streamlit各类组件中占据了至关重要的地位, 它的核心功能是以直观.易于理解的方式展示数据. 本次介绍的数据展示组件st.dataframe和st.table,能够将复杂的数据集以 ...

  4. delphi Image32 SVG图形查看器

    DELPHI 中没有SVG显示组件,需要用到第三方组件,高版本可以使用skia(但必须带上skia.dll). 最新版Image32修改了很多,SVGIconImageList 也因此换成了Image ...

  5. ThreeJs-02Threejs开发入门与调试

    这两天没有上传笔记,在解决图床的问题,主打一个白嫖,所以要费点心思,先是用了gitee的图床好不容易配好后发现居然加了防盗链,后面又转了github的咱目前来说github也是最稳定且免费的,现在搞好 ...

  6. Java虚拟机类加载机制浅谈

    Java语言是一种编译后再经过解释器执行的过程, 解释器主要就是如何处理解释Class文件的二进制字节流.JVM主要包含三大核心部分:运行时数据区,类加载器和执行引擎. 虚拟机将描述类的数据从Clas ...

  7. 探究内存泄露—Part1—编写泄露代码

    本文由 ImportNew - 黄索远 翻译自 captaindebug.如需转载本文,请先参见文章末尾处的转载要求. ImportNew注:如果你也对Java技术翻译分享感兴趣,欢迎加入我们的 Ja ...

  8. 华为云云日志服务 HarmonyOS NEXT采集最佳实践

    鸿蒙背景介绍 华为鸿蒙HarmonyOS系统是面向万物互联的全场景分布式操作系统,支持手机.平板.智能穿戴.智慧屏等多种终端设备运行,提供应用开发.设备开发的一站式服务的平台.2024 年 1 月 1 ...

  9. manim边学边做--突出显示

    本篇介绍Manim中用于突出显示某些内容的动画类,主要包括: ApplyWave:让图形或文字产生连续波浪式变形的动画类,用于展示波动效果,参数可调节 Circumscribe:用于在几何场景中展示图 ...

  10. Flutter问题 Flutter MissingPluginException(No implementation found for method xxx on channel xxx)

    问题如题 有时候项目跑着跑着突然控制台就报了这个错,用hot restart也没有用,问题的本质是plugin没有找到,这时候有两种方法 flutter clean,会将依赖清除,这时候再重新pub ...