vue3网页将表格内容导出到excel

news/2024/7/21 3:43:14 标签: excel, vue.js, javascript, 前端

1、安装 xlsx 库:

        

npm install xlsx

2、在你的组件中引入 xlsx 库:

        

import * as XLSX from 'xlsx';

3、添加导出按钮到你的模板:

<!-- 在模板中添加导出按钮 -->
<el-button type="primary" @click="exportToExcel">导出Excel</el-button>

4、exportToExcel函数

javascript">// 导出 Excel
const exportToExcel = () => {
  // 构建工作簿
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.json_to_sheet(tableData.value);

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  // 将工作簿转为 ArrayBuffer
  const arrayBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });

  // 创建 Blob
  const blob = new Blob([arrayBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

  // 创建下载链接
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'exported_data.xlsx';

  // 模拟点击下载链接
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};


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

相关文章

HIT 模式识别 手写汉字分类 Python实现

训练集数据 TrainSamples-400.csv&#xff0c;含 100 个不同汉字&#xff0c;每个汉字 400 个实例&#xff0c;每个实例均为 64*64 的二值图像&#xff1b; 训练集标注TrainSamples-400.csv&#xff0c;为 40000 个 0 到 99 间的整数&#xff0c;表示训练集中每个实例所属汉字类…

Linux进程——system函数、popen函数

system函数&#xff08;执行shell 命令&#xff09; 头文件 #include <stdlib.h> 函数定义 int system(const char * string); 函数说明 system()会调用fork()产生子进程&#xff0c;由子进程来调用/bin/sh-c string来执行参数string字符串所代表的命令&#xff0c;…

Zookeeper实战案例(1)

前置知识&#xff1a; Zookeeper学习笔记&#xff08;1&#xff09;—— 基础知识-CSDN博客 Zookeeper学习笔记&#xff08;2&#xff09;—— Zookeeper API简单操作-CSDN博客 Zookeeper 服务器动态上下线监听案例 需求分析 某分布式系统中&#xff0c;主节点可以有多台&am…

全链路监控--pinpoint

一、pinpoint架构原理 架构组成 Pinpoint Agent:和自己运行的应用关联起来的探针 Pinpoint Collector:收集各种性能数据 Pinpoint-Web: 将收集到的数据显成为 WEB网页显示 HBase Storage: 存储收集到的数据 工作原理 pinpoint的核心思想是在各个服务节点之间彼此调用时&a…

笔记55:长短期记忆网络 LSTM

本地笔记地址&#xff1a;D:\work_file\DeepLearning_Learning\03_个人笔记\3.循环神经网络\第9章&#xff1a;动手学深度学习~现代循环神经网络 a a a a a a a a a

域名的理解

域名的分类 见下图 这里引用的阿里云对域名的定义&#xff0c;个人理解是有两种叫法&#xff0c;一种是传统的叫法&#xff0c;也就是将sample.org.cn划分成了三级域名&#xff0c;还有一种叫法是基于用户注册的域名来说的&#xff0c;将用户注册的整体域名称作一级域名&…

QSystemTrayIcon::Trigger(案例)

QSystemTrayIcon::Trigger详解 QSystemTrayIcon::Trigger 是 Qt 框架中的一个枚举值&#xff0c;表示系统托盘图标被触发的原因。 在 Qt 中&#xff0c;QSystemTrayIcon 类用于管理和操作系统托盘图标。当用户与系统托盘图标进行交互时&#xff0c;会产生不同的触发原因&…

QLabel内容过长时,右侧显示省略号

解决 QString str "sssssssssssssssssssssssssssssssss";str ui->label->fontMetrics().elidedText(str, Qt::ElideRight, 20);ui->label->setText(str);QFontMetrics类 QFontMetrics类提供字体度量信息。 QFontMetrics函数可以计算给定字体下字符和字…