纯前端实现导出excel
项目背景:
vue2
插件:
xlsx;xlsx-style;file-saver
说明:
单独使用 xlsx插件,也可以将网页上的table导出成excel,但是导出的excel,没有样式
结合xlsx-style;file-saver,可以实现带样式的excel文件
具体实现代码:
import * as XLSX from 'xlsx'
import * as XLSXStyle from 'xlsx-style'import XLSX_SAVE from 'file-saver'export function exportToExcel(columns,dataSource,filename) {const headers = columns.filter(col => col.key !== 'operation') // 过滤掉 operation 列.map(col => col.title)const dataIndexes = columns.filter(col => col.key !== 'operation') // 过滤掉 operation 列.map(col => col.dataIndex)// 重构数据,使其匹配表头const data = dataSource.map((row,index) => {let newRow = {}dataIndexes.forEach((dataIndex, index) => {newRow[headers[index]] = row[dataIndex]})return newRow})// 将表头和数据合并data.unshift(headers.reduce((acc, cur) => ((acc[cur] = cur), acc), {}))// 将数据转换为工作表const worksheet = XLSX.utils.json_to_sheet(data, { skipHeader: true })// 设置整个表格的边框const range = XLSX.utils.decode_range(worksheet['!ref'])for (let R = range.s.r; R <= range.e.r; R++) {for (let C = range.s.c; C <= range.e.c; C++) {const cellAddress = XLSX.utils.encode_cell({ r: R, c: C })if (!worksheet[cellAddress]) {worksheet[cellAddress] = { t: 's', v: '' } // 新建空单元格对象}if (!worksheet[cellAddress].s) {worksheet[cellAddress].s = {} // 新建样式对象}worksheet[cellAddress].s.border = {top: { style: 'medium', color: { rgb: '000000' } },bottom: { style: 'medium', color: { rgb: '000000' } },left: { style: 'medium', color: { rgb: '000000' } },right: { style: 'medium', color: { rgb: '000000' } },}}}for(let i=0;i<columns.length;i++){const list = dataSource.map(item=>{const val = item[columns[i].dataIndex];if(val){if(columns[i].dataIndex == 'indexnum'){return 5;}else if(val.toString().charCodeAt(0) > 255){return val.toString().length * 2;}else{return val.toString().length;}}else{return 1;}})const maxLength = Math.max(list);const width = maxLength * 1.1;if(!worksheet["!cols"]) worksheet["!cols"] = [];if(!worksheet["!cols"][i]) worksheet["!cols"][i] = {wch:8};worksheet["!cols"][i].wch = width;}// 创建一个新的工作簿并将工作表添加到工作簿中const workbook = XLSX.utils.book_new()XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')// 导出工作簿为 Excel 文件// console.log('xlsx-style', XLSXStyle)let wbout = XLSXStyle.write(workbook, {type: 'binary',bookType: 'xlsx',});XLSX_SAVE.saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream',}),`${filename}.xlsx`)
}
使用时调用:
exportToExcel(columns,dataSource,'demo列表')
避坑:
安装xlsx-style后,在使用时,大概率会报错:
Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx
解决方式:
在根目录下的vue.config.js(没有的话自己创建一个)
加入下面的代码
module.exports = {configureWebpack: {externals: {'./cptable': 'var cptable'}}
}
然后重启项目
相关文章:
纯前端实现导出excel
项目背景: vue2 插件: xlsx;xlsx-style;file-saver 说明: 单独使用 xlsx插件,也可以将网页上的table导出成excel,但是导出的excel,没有样式 结合xlsx-style;file-saver&a…...
QT windows 5.12.0 安装包
这个是在线包,需要有账号的。 没有也没事,安装界面可以现场注册 百度网盘链接: 链接:https://pan.baidu.com/s/1QvXDert4b94GbUfD2f2G4g?pwd8888 提取码:8888...
改进YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制 | 附详细结构图
改进 YOLOv7 | 在 ELAN 模块中添加【Triplet】【SpatialGroupEnhance】【NAM】【S2】注意力机制:中文详解 1. 简介 YOLOv7 是目前主流的目标检测算法之一,具有速度快、精度高的特点。但 YOLOv7 的原始模型结构中缺乏注意力机制,导致模型对全…...
windows系统停止更新办法
windows系统停止更新 双击启动下载的文件 然后再回到系统-更新这里,选择日期就行。...
数据标注概念
数据标注的步骤 数据清洗:处理数据中的噪声、缺失值和异常值,确保数据的质量和完整性。 数据转换:将数据从原始格式转换为适合机器学习模型处理的格式。 数据标注:根据应用需求,为数据添加标签或注释,标识…...
网络安全复习笔记
概述 要素 CIA:可用性;完整性;保密性。 可控性;不可否认性;可审查性。 攻击 被动:窃听 - 保密性;监听 - 保密性主动:假冒 - 完整性;重放 - 完整性;改写 -…...
Laravel - excel 导入数据
在Laravel中,可以使用maatwebsite/excel这个库来处理Excel文件的导入。 1.用命令行窗口打开项目根目录,使用 Composer 安装 maatwebsite/excel composer require maatwebsite/excel --ignore-platform-reqs 在你的config/app.php文件中注册服务提供者&…...
移动语义和完美转发
C11 引入了许多新特性,使得编写高效且现代的 C 代码变得更加容易。其中,移动语义(Move Semantics)和完美转发(Perfect Forwarding)是两个重要的特性,极大地提升了 C 的性能和灵活性。 移动语义…...
【IDEA】Spring项目build失败
通常因为环境不匹配需要在file->projectstructure里面调整一下。...
【无标题】安卓app 流量
该工具可以用于安卓app 流量,内存,cpu,fps等专项内容测试,并且有整机内存,cpu对比,还可监控手机网速,app流量,数据导出等功能,重点还是免费,毕竟PerfDog收费了…...
国产化ETL产品必备的特性(非开源包装)
ETL负责将分布的、异构数据源中的数据如关系数据、平面数据文件等抽取到临时中间层后进行抽取、清洗(净化)、转换、装载、标准、集成(汇总)...... 最后加载到数据仓库或数据集市中,成为联机分析处理、数据挖掘的基础。…...
flink 操作mongodb的例子
Apache Flink 是一个流处理和批处理的开源框架,它通常用于处理大量数据流。然而,Flink 本身并不直接提供对 MongoDB 的原生支持,因为 MongoDB 是一个 NoSQL 数据库,而 Flink 主要与关系型数据库(如 JDBC 连接器&#x…...
【笔记】打卡01 | 初学入门
初学入门:01-02 01 基本介绍02 快速入门库处理数据集网络构建模型训练保存模型加载模型打卡-时间 01 基本介绍 MindSpore Data(数据处理层) ModelZoo(模型库) MindSpore Science(科学计算),包含…...
Rocky9使用cockpitweb登陆时root用户无法登陆
Rocky9使用cockpitweb登陆时root用户无法登陆 [rootlvs ~]# vim /etc/cockpit/disallowed-users [rootlvs ~]# systemctl restart cockpit 取消disallowed-users中的root,即可访问 ip:9090 登陆。...
微信小程序修改标题
要修改微信小程序页面的标题和调整字体大小,你需要对 app.json 和页面对应的 json 文件进行配置。 修改页面标题 打开 app.json 文件,找到 pages 字段,确认需要修改的页面路径。打开对应页面的 .json 文件(例如,pages/…...
Linux MySQL服务设置开机自启动
文章目录 前言简介一、准备工作二、操作步骤2.1 启动MySQL服务2.2 拷贝配置2.3 赋值权限2.4 添加为系统服务2.5 验证 总结 前言 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i、 提示:以下是本篇文章正文内容,下面案例…...
MacOS设备远程登录配置结合内网穿透实现异地ssh远程连接
文章目录 前言1. MacOS打开远程登录2. 局域网内测试ssh远程3. 公网ssh远程连接MacOS3.1 MacOS安装配置cpolar3.2 获取ssh隧道公网地址3.3 测试公网ssh远程连接MacOS 4. 配置公网固定TCP地址4.1 保留一个固定TCP端口地址4.2 配置固定TCP端口地址 5. 使用固定TCP端口地址ssh远程 …...
国有企业如何提高人效比?
随着市场竞争的日益激烈,国有企业面临着越来越大的经营压力。为了提高经济效益和核心竞争力,国有企业越来越重视提高人效比。人效比,即企业总收益与员工总人数的比值,反映了企业每名员工所创造的平均收益。提高人效比意味着在相同…...
Leetcode - 周赛401
目录 一,3178. 找出 K 秒后拿着球的孩子 二,3179. K 秒后第 N 个元素的值 三,3180. 执行操作可获得的最大总奖励 I 四,3181. 执行操作可获得的最大总奖励 II 一,3178. 找出 K 秒后拿着球的孩子 本题可以直接模拟&a…...
Java | Leetcode Java题解之第171题Excel表列序号
题目: 题解: class Solution {public int titleToNumber(String columnTitle) {int number 0;int multiple 1;for (int i columnTitle.length() - 1; i > 0; i--) {int k columnTitle.charAt(i) - A 1;number k * multiple;multiple * 26;}ret…...
工业物联网长距离蓝牙环境监测方案解析
1. 项目概述在工业物联网和远程环境监测领域,如何实现低功耗、长距离的数据传输一直是个技术难点。传统蓝牙技术受限于通信距离(通常10米以内),而Wi-Fi方案又面临功耗过高的问题。最近我在一个工厂环境监测项目中,成功…...
从服务器到手机:手把手教你修改游戏客户端IP,让私服在手机上跑起来
移动游戏私服客户端IP修改实战指南 当你在服务器上成功部署了游戏私服后,最令人沮丧的莫过于发现手机上的官方客户端无法连接到你的私人服务器。这个看似简单的"最后一公里"问题,往往成为许多私服搭建者的拦路虎。本文将彻底解决这个痛点&…...
跨越平台壁垒:在STM32与MSP430上构建Arduino式开发体验
1. 为什么要在STM32和MSP430上实现Arduino开发体验? 我第一次接触嵌入式开发就是在Arduino平台上,那种插上USB就能烧录、几行代码让LED闪烁的爽快感,让我这个非科班出身的小白瞬间爱上了硬件编程。但后来参加电子设计竞赛时,队友递…...
深入STM32F429 LTDC双图层与DMA2D:打造流畅UI界面的性能优化指南
STM32F429 LTDC与DMA2D深度优化:构建60FPS工业级UI的实战指南 在工业HMI和医疗设备等对显示性能要求严苛的场景中,流畅的UI动画和实时数据可视化往往成为系统瓶颈。STM32F429的LTDC控制器配合DMA2D加速器,通过合理的架构设计可实现媲美专业GP…...
后端开发必看:设计高并发系统时,如何估算你的RTT和时延带宽积?
高并发系统设计实战:从RTT到时延带宽积的性能优化指南 在分布式系统的世界里,网络性能指标往往成为制约整体吞吐量的隐形瓶颈。我曾亲眼见证过一个日活百万的社交平台,因为微服务间调用的RTT估算偏差,导致高峰期请求堆积如山的惨状…...
Honey Select 2一站式智能优化方案:HS2-HF Patch高效整合200+插件
Honey Select 2一站式智能优化方案:HS2-HF Patch高效整合200插件 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 还在为《Honey Select 2》的翻译不…...
手把手教你用STM32和电位器,临时搭建一个TTL转485调试器(附电路图)
应急调试利器:用STM32和电位器快速搭建TTL转485监听器 在嵌入式开发现场调试时,最让人头疼的莫过于设备串口输出异常却找不到合适的调试工具。上周在客户工厂就遇到了这样的窘境——需要监控设备TTL串口数据,但手边只有RS485转换器和几根杜邦…...
S32K144开发板调试实战:除了点灯,如何用S32DS的调试窗口快速排查变量异常问题?
S32K144开发板调试实战:变量异常排查与高效调试技巧 调试嵌入式系统时,最令人头疼的莫过于程序看似正常运行,但某些变量值却莫名其妙地偏离预期。作为一名长期使用S32 Design Studio(S32DS)进行S32K144开发的工程师&a…...
手把手教你排查和修复Gradle Daemon启动失败的NoClassDefFoundError
深度解析Gradle Daemon启动失败的NoClassDefFoundError排查方法论 当你正专注于开发进度,突然在终端看到一行刺眼的红色错误提示:"Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7",Gradle构建进程戛然而止。这…...
别再死记公式了!用Multisim仿真带你玩转反相/同相比例运算电路
用Multisim仿真解锁比例运算电路的实战奥秘 在电子工程的学习中,运算放大器电路一直是让初学者又爱又恨的内容。传统的学习方法往往从公式推导开始,要求学生死记硬背各种电路配置下的增益公式。但今天,我们要打破这种枯燥的学习方式——通过…...
