vue3中将表格导出成excel文件

2023-11-01

yarn add xlsx

yarn add file-saver

通过调用exportData方法 

// excel 文件 传递数据和文件名
function exportToExcel(tableData, filename) {
  // 1.JSON 数据的数组转化为excel工作表
  const worksheet = XLSX.utils.json_to_sheet(tableData);
  // 2.创建一个excel工作簿
  const workbook = XLSX.utils.book_new();
  // 3.将创建好的工作表添加到 workbook 工作簿中 命名为Sheet1
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  // 4.将 工作簿格式 转化为 excel 格式
  const excelBuffer = XLSX.write(workbook, { bookType: "xlsx", type: "array" });
  // 5.创建 blob 对象
  const dataBlob = new Blob([excelBuffer], {
    type: "application/octet-stream",
  });
  // 6.利用file-saver库中的saveAs方法下载到电脑上
  saveAs(dataBlob, filename + ".xlsx");
}

// 点击导出excel文件
const exportData = () => {
  const filename = "题库"; // 根据需要修改文件名
  exportToExcel(list.tableData, filename);
};

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3中将表格导出成excel文件 的相关文章

随机推荐

  • imaplib.abort: socket error:EOF 解决方法

    解决方法 设置重复登录 def login self serv None while True try serv imaplib IMAP4 SSL self imap server 993 r d serv login self user
  • ubuntu18安装caffe(CPU)

    1 前言 历时不知多少天 终于在自己电脑上配置好了caffe环境 2 所需环境 1 ubuntu18 04 2 python3 6 默认是只有3 6 3 安装 3 1切换清华源 cp etc apt sources list etc apt
  • chrome浏览器F12调式,修改替换js文件

    在F12模式下 有时可以直接修改js源码 Ctrl S 保存就可以了 但是有时这种方法会不起作用 这里介绍本地替换js的方式 案例 比如csdn想复制别人的一段文字并保留样式 但是字符长度大于140就不起作用了 1 通过右键定位需要修改的j
  • ELK-日志服务【redis-配置使用】

    目录 环境 1 redis配置 2 filebeat配置 3 对接logstash配置 4 验证 5 安全配置 第一种 kibana nginx访问控制 6 第二种 在ES 主节点 配置TLS 7 kibana配置密码 8 logstash
  • 晨光文具去年赚5亿,连2000元都拿来理财

    只要走出学校大门 在不多于500米半径范围内 你都能轻松找到晨光文具的门店 大到一线城市 小到三四线县城 经过20年苦心经营 晨光文具已经做到了这种格局 在这种格局背后 是晨光系7 2万家零售终端的缜密布局 20年来 在国内书写工具以及学生
  • 07:和为给定数

    总时间限制 1000ms 内存限制 65536kB 描述 给出若干个整数 询问其中是否有一对数的和等于给定的数 输入 共三行 第一行是整数n 0 lt n lt 100 000 表示有n个整数 第二行是n个整数 整数的范围是在0到10 8之
  • Linux Suse firewall 查看,关闭,启动

    查看 linux chkconfig list grep i fire 关闭 linux SuSEfirewall2 stop 启动 linux SuSEfirewall2 stop
  • 最小生成树以及Kruskal算法,Prime算法

    一 最小生成树 连通图 在无向图中 若从顶点v1到顶点v2有路径 则称顶点v1与顶点v2是连通的 如果图中任 意一对顶点都是连通的 则称此图为连通图 强连通图 在有向图中 若在每一对顶点vi和vj之间都存在一条从vi到vj的路径 也存在一条
  • 信号处理中简单实用的方法——提取信号中的包络

    一 用希尔伯特变换计算信号的包络 在求某一信号包络时用得最多的是希尔伯特变换 但并不是希尔伯特变换适用于所有信号求包络的情况 这是因为对于包络没有一个很严格的定义 在求包络时不同的情况会有不同的要求 下面将介绍用希尔伯特变换求取信号的包络
  • JVM一个类的加载过程

    七大步骤 具体过程 加载 classpath jar包 网络 某个磁盘位置下的类的class二进制字节流读进来 在内存中生成一个代表这个类的 java lang Class 对象放入元空间 此阶段我们的程序员可以干预 我们可以自定义类加载器
  • java web考试题及答案_2016JAVA-WEB期末复习题库附答案.doc

    1 当访问一个Servlet时 以下Servlet中的哪个方法先被执行 D A destroy B doGet C service D init0 2 假设在myServlet应用中有一个MyServlet类 在web xml文件中对其进行
  • 【leetcode】求两个链表的交点

    求两个链表的交点 c 借助set Definition for singly linked list struct ListNode int val ListNode next ListNode int x val x next NULL
  • 静态时序分析-Multicycle约束

    有时 前端在一些关键路径上的设计 可能会出现两个时钟周期驱动和采样一拍数据 来放松关键路径上的时序 这样的设计在STA约束过程中 如果不放松 会导致Timing违例过大 无法收敛 此时的Timing由前端逻辑实现保证 STA约束即可释放 以
  • 关于VScode引用头文件时一直报错的解决方法

    一 首先看下配置文件 常见的错误原因可能是因为 c cpp properties json 这个文件并没有配置好 可以参考下列的文件 在这里插入代 configurations name Win32 includePath workspac
  • iOS开发之数据存取(三)——FMDB

    FMDB 基本使用 相比于SQLite3来说Core Data存在着诸多优势 它面向对象 开发人员不必过多的关心更多数据库操作知识 同时它基于ObjC操作 书写更加优雅等 但是它本身也存在着一定的限制 例如如果考虑到跨平台 则只能选择SQL
  • AT24C02芯片介绍

    AT24C02管脚介绍 AT24C02低功耗CMOS串行EEPROM 它是内含256 8位存储空间 具有工作电压宽 2 5 5 5V 擦写次数多 大于10000次 写入速度快 小于10ms 等特点 AT24C02的1 2 3脚是三条地址线
  • 如何使用idea来查找所有未使用的代码?

    一 目的 通过idea快速找到项目中没有被使用的代码 二 操作步骤 2 1 Code gt Analyze Code gt Run Inspection by Name 2 2 输入Unused declaration gt 查询没有被使用
  • HTTP Status 500 - Request processing failed; nested exception is java.lang.NullPointerException type

    个人错误记录 本人目前水平不够 所以不喜勿喷 谢谢 我的错误原因 在SSM中 使用set注入的方式注入对象导致 源码 lt Controller RequestMapping role public class RoleController
  • write和fwrite

    如果只是普通地以O RDWR的flag去open一个文件朝里write 不考虑创建 扩增 那默认内核会把文件的这个页面读进来缓存在内核里的 也即所谓的page cache 随后再发起新的write syscall写相同的页面时 只要写在pa
  • vue3中将表格导出成excel文件

    yarn add xlsx yarn add file saver 通过调用exportData方法 excel 文件 传递数据和文件名 function exportToExcel tableData filename 1 JSON 数据