JS 导出 Excel 文件、SheetJS(xlsx)前端导出 Excel 一、JS 导出 Excel 文件!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8/metahttp-equivX-UA-CompatiblecontentIEedge/metanameviewportcontentwidthdevice-width, initial-scale1.0/titleJS 导出 Excel 文件/titlestyle*{margin:0;padding:0;box-sizing:border-box;}.app{margin:20px 0 0 20px;}table{border:0.5px solid black;}td, th{width:100px;height:30px;line-height:30px;text-align:center;border:0.5px solid black;}/style/headbodydivclassapptableiddatacellspacing0trth序号/thth姓名/thth年龄/th/trtrtd1/tdtd张三/tdtd25/td/trtrtd2/tdtd李四/tdtd30/td/tr/table!-- 必须是 a 标签如果是 button 标签没有 href 属性如果无法设置 href 属性就不能生成 Excel文件 --aidtoExcelhref导出 Excel 文件/a/divscriptvartoExceldocument.getElementById(toExcel);toExcel.onclickfunction(event){// 获得表格的 HTML 标签和文本数据varmyHtmlhtml head meta charsetUTF-8 /head body${document.getElementById(data).outerHTML}/body /html;// 创建一个 Blob 对象// 第一个参数是文件的数据// 第二个参数是文件类型属性对象varmyBlobnewBlob([myHtml],{type:application/vnd.ms-excel,});varmyTargetevent.target;// 利用 URL.createObjectURL 方法为元素 myTarget 生成 blobURLmyTarget.hrefURL.createObjectURL(myBlob);// 设置文件名myTarget.download人员表;};/script/body/html二、SheetJSxlsx前端导出 Excel安装依赖pnpmaddxlsx核心 API 调用链路import*asXLSXfromxlsx;// 1、准备数据数组对象constrows[{姓名:张三,年龄:28,部门:技术部},{姓名:李四,年龄:32,部门:产品部},];// 2、数组对象 → 工作表WorksheetconstworksheetXLSX.utils.json_to_sheet(rows);// 3、新建工作簿WorkbookconstworkbookXLSX.utils.book_new();// 4、将工作表追加到工作簿并指定工作表名称XLSX.utils.book_append_sheet(workbook,worksheet,员工信息);// 5、指定工作簿名称吗触发浏览器下载文件XLSX.writeFile(workbook,导出文件_${Date.now()}.xlsx);Excel 工作簿就是 Excel 文件本身

相关新闻

最新新闻

CI/CD的含义

CI/CD的含义

一、一句话解释 CI/CD 是一种软件开发实践,让代码从编写 → 测试 → 部署的全过程自动化,就像一条自动化流水线。 生活中的类比 想象你要开一家奶茶店: 传统方式:客人点单 → 你现煮珍珠 → 现泡茶 → 现做奶茶 → 递给客人&#…

2026/9/1 15:22:05
游戏活动配置事故复盘:从刑天秘宝事件看流程漏洞与改进

游戏活动配置事故复盘:从刑天秘宝事件看流程漏洞与改进

这次刑天秘宝事件,说起来不算什么惊天动地的技术故障,但恰恰因为它太“低级”,才更容易把项目组推到风口浪尖。一个活动配置错误,玩家在活动里拿到的结果和规则预期对不上,社区情绪直接炸锅;连平时脾气很好…

2026/9/1 15:22:05
ASP.NET开发web应用

ASP.NET开发web应用

在 .NET 框架中,ASPX 是一种用于 动态网页的文件扩展名,它代表“Active Server Page Extended”。ASPX 文件通常包含 HTML、CSS 和服务器端代码(如 C# 或 VB.NET),使开发者能够创建交互性强的 web 应用程序。通过这种方…

2026/9/1 15:22:05
PlugClaw实战:基于OpenClaw的AI代理硬件部署与Skill扩展指南

PlugClaw实战:基于OpenClaw的AI代理硬件部署与Skill扩展指南

当业务需要把 OpenClaw 这样的个人 AI 代理真正跑起来时,很多朋友会卡在环境安装、依赖兼容、模型配置这些环节。折腾半天还没看到 Agent 回复一句话,体验非常劝退。本文围绕 PlugClaw 这套基于原生安卓系统的 OpenClaw 硬件方案,完整讲解它的…

2026/9/1 15:22:05
华为AI岗机试全解析:OD机试算法考点与面试准备

华为AI岗机试全解析:OD机试算法考点与面试准备

1. 华为AI岗到底在招什么样的人先把这个岗位的底细摸清楚。2026年05月27号这个时间节点出现在招聘标题里,其实信息量很大——这不是一个普通的JD岗位描述,而是一个真实的求职时间锚点。也就是说,如果在5月27号当天或前后参加华为AI岗位的面试…

2026/9/1 15:22:05
花店销售系统全栈开发实战:SpringBoot+Vue+MySQL毕业设计解析

花店销售系统全栈开发实战:SpringBoot+Vue+MySQL毕业设计解析

简介:这是一套面向计算机专业本科生的高分毕业设计级花店销售系统实战资源,适用于毕业设计、课程设计及期末大作业场景,解决传统花店线上化运营中商品管理、订单处理与用户交互等核心业务需求。资源包共1405个文件,含164个Java后端…

2026/9/1 15:17:04