Vue3 将el-table中的数据导出为excel并下载

news/2024/7/21 6:06:06 标签: excel, vue.js, 前端

第一步安装:

npm install xlsx file-saver

第二步导入:

import * as XLSX from 'xlsx'
import saveAs from 'file-saver'

第三步写函数:


function exportExcel(){
  const workbook = XLSX.utils.book_new()
  const worksheet = XLSX.utils.json_to_sheet(tableData)
  XLSX.utils.book_append_sheet(workbook,worksheet,'Sheet1')
  const excelData = XLSX.write(workbook,{bookType:'xlsx',type:'array'})
  const blob = new Blob([excelData],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
  saveAs(blob,'table_data.xlsx')
}

其中tableData就是el-table中的数据源


http://www.niftyadmin.cn/n/5267507.html

相关文章

jvisualvm手动安装VisualGC插件

前言 笔者近期排查问题需要查看GC的情况,于是用到了jvisualvm这个工具,查阅网上资料发现它有一个名为VisualGC的插件非常好用,于是笔者以此文记录一下VisualGC插件的安装步骤。 安装步骤 下载插件 首先我们要到官网 https://visualvm.gi…

【C++11特性篇】盘点C++11中三种简化声明的方式【auto】【decltype】【nullptr】(3)

前言 大家好吖,欢迎来到 YY 滴C系列 ,热烈欢迎! 本章主要内容面向接触过C的老铁 主要内容含: 欢迎订阅 YY滴C专栏!更多干货持续更新!以下是传送门! 目录 一.auto&范围for二.decltyp…

RT-DETR优化:轻量化卷积设计 | DualConv双卷积魔改RT-DETR结构

🚀🚀🚀本文改进: DualConv双卷积魔改v8结构,达到轻量化的同时并能够实现小幅涨点 🚀🚀🚀RT-DETR改进创新专栏:http://t.csdnimg.cn/vuQTz 学姐带你学习YOLOv8,从入门到创新,轻轻松松搞定科研; RT-DETR模型创新优化,涨点技巧分享,科研小助手; 1.DualC…

day03-报表技术POIEasyPOI

1、了解百万数据的导入 1.1 需求分析 使用POI基于事件模式解析案例提供的Excel文件 1.2 思路分析 **用户模式:**加载并读取Excel时,是通过一次性的将所有数据加载到内存中再去解析每个单元格内容。当Excel数据量较大时,由于不同的运行环境…

1843_emacs中两个插件use-package以及org-bullets的使用

Grey 1843_emacs中两个插件use-package以及org-bullets的使用 全部学习汇总: GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 我个人的emacs的配置以及两个插件的使用由来 我自己现在也开始维护一个我自己的emacs配置&…

数据结构复习知识点

数据结构 1.数据结构三要素是什么?逻辑结构包括什么?存储结构包括什么? 逻辑结构、存储结构、数据运算 逻辑结构包括线性结构和非线性结构 线性结构包括线性表、栈、队列,非线性结构包括树、图集合 存储结构包括顺序存储、链式存储…

注意力机制,Transformer相关详解

本文遵循《动手学深度学习pytorch版》的内容组织,从注意力机制开始讲到Transfomer,偏重关键知识理解并附带图解和公式,未加说明时,插图均来自于该书,文本内容较长(9414字),建议收藏慢…

算法:二叉树的遍历

一、31种遍历方法 (1)先序法(又称先根法) 先序遍历:根,左子树,右子树 遍历的结果:A,B,C 遍历的足迹:沿途经过各结点的“左部” (2)中序法(又称中根法&#…