纯前端实现表格中的数据导出功能-使用xlsx和file-saver

通过npm导入XLSX和file-saver包 通过import导入

import XLSX from 'xlsx'
import FileSaver from 'file-saver'
//导出excel--(导出描述和显示值列)
exportEvent() {const downloadData = []this.tableData.forEach(item => {downloadData.push({'描述': item.description,'显示值': item.yValue,'导出时间':this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')})})this.downloadExcel(downloadData)
},
//下载表格数据
downloadExcel(downloadData) {const worksheet = XLSX.utils.json_to_sheet(downloadData)
//创建工作簿并且添加工作表const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')//设置列宽const columnWidths = [{ wch: 20 }, // 第一列宽度为20个字符宽度{ wch: 10 }, // 第二列宽度为10个字符宽度{ wch: 25 }  // 第三列宽度为25个字符宽度// 根据需要添加更多列宽配置
]
// 将列宽应用到工作表中
if (worksheet['!cols'] == null) worksheet['!cols'] = []
worksheet['!cols'] = columnWidths

//将工作簿转未Blob对象const excelBuffer = XLSX.write(workbook, {bookType: 'xlsx',type: 'array'})const blob = new Blob([excelBuffer], { type: 'application/vnd.ms-excel' })FileSaver.saveAs(blob, '表名') // 下载文件 文件名
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/5650.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

62,【2】 BUUCTF WEB [强网杯 2019]Upload1

进入靶场 此处考点不是SQL,就正常注册并登录进去 先随便传一个 进行目录扫描,我先用爆破代替 先随便后面写个文件名 为了提供payload位置 www.tar.gz真的存在 返回浏览器修改url就自动下载了 看到tp5,应该是ThinkPHP5框架 参考此博客的思路方法c[强网杯…

SpringCloud微服务Gateway网关简单集成Sentinel

Sentinel是阿里巴巴开源的一款面向分布式服务架构的轻量级流量控制、熔断降级组件。Sentinel以流量为切入点,从流量控制、熔断降级、系统负载保护等多个维度来帮助保护服务的稳定性。 官方文档:https://sentinelguard.io/zh-cn/docs/introduction.html …

高效安全文件传输新选择!群晖NAS如何实现无公网IP下的SFTP远程连接

文章目录 前言1. 开启群晖SFTP连接2. 群晖安装Cpolar工具3. 创建SFTP公网地址4. 群晖SFTP远程连接5. 固定SFTP公网地址6. SFTP固定地址连接 前言 随着远程办公和数据共享成为新常态,如何高效且安全地管理和传输文件成为了许多人的痛点。如果你正在寻找一个解决方案…

U3D的.Net学习

Mono:这是 Unity 最初采用的方式,它将 C# 代码编译为中间语言 (IL),然后在目标平台上使用虚拟机 (VM) 将其转换为本地机器码执行。 IL2CPP:这是一种较新的方法,它会将 C# 代码先编译为 C 代码,再由 C 编译器…

2024年博客之星主题创作|2024年度感想与新技术Redis学习

Redis工具深入了解 1.引言与感想2.Redis工具了解2.分布式系统了解2.1单机架构2.2分布式是什么2.3应用服务和数据库服务分离2.4引入更多的应用服务器2.5理解负载均衡器2.6数据库读写分离2.7引入缓存2.8数据库分库分表2.9引入微服务2.10分布式系统小结 1.引言与感想 2024学习了很…

IDEA中Maven使用的踩坑与最佳实践

文章目录 IDEA中Maven使用的踩坑与最佳实践一、环境配置类问题1. Maven环境配置2. IDEA中Maven配置建议 二、常见问题与解决方案1. 依赖下载失败2. 依赖冲突解决3. 编译问题修复 三、效率提升技巧1. IDEA Maven Helper插件使用2. 常用Maven命令配置3. 多模块项目配置4. 资源文件…

qml Timer详解

1、概述 Timer是QML中用于创建定时器的元素。它允许你设置一个延迟时间,在延迟时间结束后触发一个信号或执行一段代码。Timer非常适用于需要在特定时间间隔后执行操作的场景,如动画延迟、定时任务等。 2、重要属性 interval: 定时器触发的时间间隔&…

为什么redis会开小差?Redis 频繁异常的深度剖析与解决方案

文章目录 导读为什么redis会开小差?1.连接数过多2.bigkey3.慢命令操作4.内存策略不合理5.外部数据双写一致性6.保护机制未开启7. 数据集中过期8. CPU饱和9. 持久化阻塞10. 网络问题结论 导读 提起分布式缓存,想必大多数同学脑海中都会浮出redis这个名字…

国产编辑器EverEdit - 快捷目录

1 面板-快捷目录 1.1 应用场景 快捷目录提供了一个用户常用文件或文件夹的收集器,方便用户快速找到并打开需要频繁编辑的文件。 1.2 使用方法 1.2.1 打开快捷目录面板 步骤1:选择菜单“查看 -> 停靠窗格 -> 快捷目录”,即可打开快捷…

正则表达式的艺术:轻松驾驭 Python 的 re 库

目录 一、正则表达式的基本概念 二、Python 的 re 库简介 三、正则表达式的元字符 四、正则表达式的贪婪与非贪婪模式 五、实战案例 六、总结 正则表达式(Regular Expression)是文本处理中不可或缺的工具,它强大而灵活,能够…

炸场硅谷,大模型“蒸汽机”迎来“瓦特时刻”

作者 | 曾响铃 文 | 响铃说 中国大模型又在包括硅谷在内的全球AI圈炸场了。 两天前,幻方量化旗下AI公司深度求索(DeepSeek),以及月之暗面相隔20分钟相继发布了自家最新版推理模型,分别是DeepSeek-R1以及Kimi 全新多…

备赛蓝桥杯之第十五届职业院校组省赛第二题:分享点滴

提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议 由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题&#xff0…

MyBatis最佳实践:提升数据库交互效率的秘密武器

第一章:框架的概述: MyBatis 框架的概述: MyBatis 是一个优秀的基于 Java 的持久框架,内部对 JDBC 做了封装,使开发者只需要关注 SQL 语句,而不关注 JDBC 的代码,使开发变得更加的简单MyBatis 通…

1. 基于图像的三维重建

1. 基于图像的三维重建 核心概念三维重建中深度图、点云的区别?深度图点云总结 深度图到点云还需要什么步骤?1. **获取相机内参**2. **生成相应的像素坐标**3. **计算三维坐标**4. **构建点云**5. **处理颜色信息(可选)**6. **去除…

将UI界面交给第三方库

当你了解了 Vue 项目构建和开发的基本知识后,我认为接下来你一定想亲自在构建出的项目中填充自己的业务和功能逻辑,因为目前其还是空白的。 但是这里我不会教你如何实现一个具体的业务和功能模块,因为每个人想要实现的东西都可能不尽相同。如…

深圳大学-计算机系统(3)-实验三取指和指令译码设计

实验目标 设计完成一个连续取指令并进行指令译码的电路,从而掌握设计简单数据通路的基本方法。 实验内容 本实验分成三周(三次)完成:1)首先完成一个译码器(30分);2)接…

[Dialog屏幕开发] 屏幕绘制(文本/输入框/按钮控件)

阅读该篇文章之前,可先阅读下述资料 [Dialog屏幕开发] 设置GUI Status 菜单/GUI Title 标题https://blog.csdn.net/Hudas/article/details/145288453?spm1001.2014.3001.5501 上篇文章我们的屏幕已实现了如下功能 我们已经设置了GUI Status菜单以及GUI Title标题…

如何通过海外社交媒体平台提升品牌曝光度?

跨境电商和全球营销策略的核心之一是通过海外社交媒体平台提升品牌曝光度。为了实现这一目标,企业需要选定适合的社交平台并制定精准的营销策略。结合OKBrow指纹指纹浏览器的强大功能,您能够高效管理多个社交账户,避免平台识别账户之间的关联…

可替代CentOS 7的Linux操作系统选型

可替代CentOS 7的其他Linux操作系统选型 一、背景介绍二、主流操作系统调研2.1 企业级产品:Red Hat Enterprise Linux/CentOS Stream2.1.1 Red Hat Enterprise Linux2.1.2 CentOS Stream2.2 其他发行版:Debian/Ubuntu2.3 开源产品:AlmaLinux / RockyLinux2.3.1 AlmaLinux2.3…

每日一题洛谷P1423 小玉在游泳c++

#include<iostream> using namespace std; int main() {double s;cin >> s;int n 0;double sum 0;double k 2;while (sum < s) {sum k;n;k * 0.98;}cout << n << endl;return 0; }