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. Java高并发,ThreadPoolExecutor线程池技术

    Java当中的线程池是通过Executor这个框架接口来实现的,该框架当中用到了Executor,Executors工具类,ExecutorService,ThreadPoolExecutor Exe ...

  2. curl命令详解【转载】

    本文转载自curl 的用法指南-阮一峰 简介 curl 是常用的命令行工具,用来请求 Web 服务器.它的名字就是客户端(client)的 URL 工具的意思. 它的功能非常强大,命令行参数多达几十种 ...

  3. Nuxt.js 应用中的 imports:sources 事件钩子详解

    title: Nuxt.js 应用中的 imports:sources 事件钩子详解 date: 2024/10/27 updated: 2024/10/27 author: cmdragon exc ...

  4. ESP8266+ MQTT+SG90(舵机) platformio

    ESP8266 + MQTT + SG90(舵机) platformio 连线 ESP8266 MG90S(舵机) GND 棕色 VCC 红色 模拟引脚 橙色 源代码 https://gitee.co ...

  5. Hadoop未授权访问

    Hadoop未授权访问 是什么? Hadoop 是一种用来处理和存储大量数据的软件工具,可以用来日志分析,推荐系统,数据备份   核心组件: 存储大数据:HDFS 文件系统 处理大数据:MapRedu ...

  6. manim边学边做--立方体和棱柱体

    本篇介绍Manim中创建三维立体的两个常用对象:Cube和Prism. Cube在制作动画时,可以用于展示立体几何中的立方体概念,或者通过旋转.缩放等动画效果来帮助理解三维空间中的几何变换. Pris ...

  7. Windows 自动色彩管理(ACM)

    在一些笔记本上Win11可以看到设置里有"自动管理应用的颜色"选项,有些笔记上没有.这里讲下"自动管理应用的颜色"的显示规则 看华为MetaBook E设置界面 ...

  8. HarmonyOS Next 入门实战 - 导航框架:页面路由、组件导航(Navigation)

    页面路由 官方不推荐使用页面路由,这里仅做简单介绍. 页面路由用于标识 @Entry 注解的页面间的跳转. 包引入 import { router } from'@kit.ArkUI'; 页面跳转 r ...

  9. Qt 指定 so库 运行时路径

    在Qt的pro文件最后添加运行时so库路径: QMAKE_RPATHDIR += /home/pi/qt5 注意,必须是绝对路径,相对路径无效(因为在pro文件中,相对路径是相对于项目路径)

  10. LocalLLaMA 客户端试验

    LM Studio. 可以直接下 hg 模型(实际使用需要自己修改成中国镜像). 有 local server, 符合 openai api 规范. 遗憾的是不支持选择显卡导致无法使用. Farada ...