当前位置： 首页 > news >正文

JS 读取excel文件内容 和 将json数据导出excel文件

news 2025/9/15 6:28:59

一、实现将json数据导出为excel文件

1、通过原生js实现

核心方法：

function JSONToExcelConvertor(JSONData, FileName, title, filter) {if (!JSONData)return;//转化json为objectvar arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;var excel = "<table>";//设置表头  var row = "<tr>";if (title) {//使用标题项for (var i in title) {row += "<th align='center'>" + title[i] + '</th>';}}else {//不使用标题项for (var i in arrData[0]) {row += "<th align='center'>" + i + '</th>';}}excel += row + "</tr>";//设置数据  for (var i = 0; i < arrData.length; i++) {var row = "<tr>";for (var index in arrData[i]) {//判断是否有过滤行if (filter) {if (filter.indexOf(index) == -1) {var value = arrData[i][index] == null ? "" : arrData[i][index];row += '<td>' + value + '</td>';}}else {var value = arrData[i][index] == null ? "" : arrData[i][index];row += "<td align='center'>" + value + "</td>";}}excel += row + "</tr>";}excel += "</table>";var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>";excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">';excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel';excelFile += '; charset=UTF-8">';excelFile += "<head>";excelFile += "<!--[if gte mso 9]>"excelFile += "<xml>";excelFile += "<x:ExcelWorkbook>";excelFile += "<x:ExcelWorksheets>";excelFile += "<x:ExcelWorksheet>";excelFile += "<x:Name>";excelFile += "{worksheet}";excelFile += "</x:Name>";excelFile += "<x:WorksheetOptions>";excelFile += "<x:DisplayGridlines/>";excelFile += "</x:WorksheetOptions>";excelFile += "</x:ExcelWorksheet>";excelFile += "</x:ExcelWorksheets>";excelFile += "</x:ExcelWorkbook>";excelFile += "</xml>";excelFile += "<![endif]-->";excelFile += "</head>";excelFile += "<body>";excelFile += excel;excelFile += "</body>";excelFile += "</html>";var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile);var link = document.createElement("a");link.href = uri;link.style = "visibility:hidden";link.download = FileName + ".xls";document.body.appendChild(link);link.click();document.body.removeChild(link);}

JSONData：json数据
FileName：导出的文件名
title： 列的表头标题
filter： 要过滤的数据列

方法调用：

let excelData = [{ "c1": "990019", "c2": "张三1", "c3": "女", },{ "c1": "140007", "c2": "张三2", "c3": "女", },
]
JSONToExcelConvertor(excelData, "test", ['ID（编号）', 'NAME（名称）'], ['c3']);

2、通过xlsx.js实现

安装

方式一：命令行下载

npm install xlsx

方式二：github手动下载
https://github.com/SheetJS/sheetjs/tree/github/dist

<script type="text/javascript" src='./xlsx.full.min.js'></script>
使用

实现核心方法

/*** 单个sheet下载* @param {object[]} json json* @param {object} tableTitle excel表头名称* @param {string} fileName 文件名称* @param {object} wbConfig 扩展* @param {object} woptsConfig 扩展*/
function json2Excel(json,tableTitle,fileName,wbConfig={},woptsConfig={}) {let wopts = {bookType: 'xlsx',bookSST: false, type: 'binary'};let workBook = {SheetNames: ['Sheet1'],Sheets: {},Props: {}};json = [tableTitle,...json];workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(json,{skipHeader:true}); // skipHeader 忽略原来的表头//3、XLSX.write() 开始编写Excel表格//4、changeData() 将数据处理成需要输出的格式saveAs(new Blob([changeData(XLSX.write({...workBook,...wbConfig}, {...wopts,...woptsConfig}))], {type: 'application/octet-stream'}),fileName)
}
/*** 多个sheet下载* @param {object} data * @param data.Sheet1.title {}* @param data.Sheet1.data []* @param {string} fileName 文件名称* data格式* {'sheet1':{title:{name:'名字',age:'年龄'},json:[{name:'sd',age:1999}]},'sheet2':{title:{name:'名字',age:'年龄'},json:[{name:'z',age:195}]},}*/function json2ExcelMultiSheet(data,fileName){let wopts = {bookType: 'xlsx',bookSST: false, type: 'binary'};let workBook = {SheetNames: [],Sheets: {},Props: {}};let keys = Object.keys(data);keys.forEach(key=>{let json = [data[key].title,...data[key].json];workBook.SheetNames.push(key);workBook.Sheets[key] = XLSX.utils.json_to_sheet(json,{skipHeader:true}); // skipHeader 忽略原来的表头})// XLSX.write() 开始编写Excel表格//changeData() 将数据处理成需要输出的格式saveAs(new Blob([changeData(XLSX.write(workBook, wopts))], {type: 'application/octet-stream'}),fileName)
}
function changeData(s) {//如果存在ArrayBuffer对象(es6) 最好采用该对象if (typeof ArrayBuffer !== 'undefined') {//1、创建一个字节长度为s.length的内存区域let buf = new ArrayBuffer(s.length);//2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾let view = new Uint8Array(buf);//3、返回指定位置的字符的Unicode编码for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;return buf;} else {let buf = new Array(s.length);for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;return buf;}
}
function saveAs(obj, fileName) {//当然可以自定义简单的下载文件实现方式 let tmpa = document.createElement("a");tmpa.download = fileName+'.xlsx' || "下载.xlsx";tmpa.href = URL.createObjectURL(obj); //绑定a标签tmpa.click(); //模拟点击实现下载setTimeout(function () { //延时释放URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL}, 100);}

方法调用：
这里只演示单个sheet下载

let excelData = [{ "c1": "990019", "c2": "张三1", "c3": "女", },{ "c1": "140007", "c2": "张三2", "c3": "女", },
]
json2Excel(excelData, { "c1": "ID（编号）", "c2": "NAME（名称）", "c3": "c3", }, "test")

二、JS读取excel文件内容

这里使用了上面说的xlsx.js库，所以需先安装xlsx

先通过本地导入要读取的excel文件

<div id="import"><p>导入模版</p><p> 请选择要选择导入的模版文件</p><input type="file" onchange="importFile(this)"><div id="demo"></div>
</div>

将excel解析为json后写入元素

var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function importFile(obj) {//导入if (!obj.files) {return;}var f = obj.files[0];var reader = new FileReader();reader.onload = function (e) {var data = e.target.result;if (rABS) {wb = XLSX.read(btoa(fixdata(data)), {//手动转化type: 'base64'});} else {wb = XLSX.read(data, {type: 'binary'//以二进制的方式读取});}console.log('wb: ', wb);//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字//wb.Sheets[Sheet名]获取第一个Sheet的数据// XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], { raw: false }); //以字符串形式读取。console.log('XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]): ', XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));document.getElementById("demo").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));};if (rABS) {reader.readAsArrayBuffer(f);} else {reader.readAsBinaryString(f);}
}function fixdata(data) { //文件流转BinaryStringvar o = "",l = 0,w = 10240;for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));return o;
}

完美，成功解析：
在这里插入图片描述

参考资料：

https://www.npmjs.com/package/xlsx

https://blog.csdn.net/weixin_43660626/article/details/106780365

相关文章：

JS 读取excel文件内容 和 将json数据导出excel文件

一、实现将json数据导出为excel文件 1、通过原生js实现 核心方法&#xff1a; function JSONToExcelConvertor(JSONData, FileName, title, filter) {if (!JSONData)return;//转化json为objectvar arrData typeof JSONData ! object ? JSON.parse(JSONData) : JSONData;va…...

编程日记 2023/11/17 3:55:55

ASP.NET限流器的简单实现

一、滑动时间窗口 我为RateLimiter定义了如下这个简单的IRateLimiter接口&#xff0c;唯一的无参方法TryAcquire利用返回的布尔值确定当前是否超出设定的速率限制。我只提供的两种基于时间窗口的实现&#xff0c;如下所示的基于“滑动时间窗口”的实现类型SliddingWindowRateL…...

编程日记 2023/11/17 3:54:53

汇编语言循环左移和循环右移如何实现的，详细的比喻一下

汇编语言中的循环左移&#xff08;ROL&#xff09;和循环右移&#xff08;ROR&#xff09;是两种基本的位操作&#xff0c;通常用于低级编程任务&#xff0c;如加密、解密、数据处理等。我将使用一个详细的比喻来解释这两种操作&#xff0c;以使其更易于理解。 循环左移&#…...

编程日记 2023/11/17 3:53:52

ChromeDriver 各版本下载地址

chromedriver 115及115之后版本下载地址&#xff1a;https://googlechromelabs.github.io/chrome-for-testing/ chromedriver 115之前版本下载地址&#xff1a;http://chromedriver.storage.googleapis.com/index.html...

编程日记 2023/11/17 3:52:51

计算机网络之物理层

物理层 1. 物理层的基本概念 2.物理层下面的传输媒体 传输媒体可分为两类&#xff0c;一类是导引型传输媒体&#xff0c;另一类是非导引型传输媒体。 3.传输方式 3.1 串行传输和并行传输 串行传输&#xff1a;串行传输是指数据是一个比特依次发送的&#xff0c;因此在发送端…...

编程日记 2023/11/17 3:51:50

沉浸式航天vr科普馆VR太空主题馆展示

科普教育从小做起&#xff0c;现在我们的很多地方小孩子游乐体验不单单只有草坪玩耍体验&#xff0c;还有很多科普知识的体验馆和游玩馆。虽然现在我们还不能真实的上太空或者潜入海底&#xff0c;但是这些现在已经可以逼真的展示在我们面前。通过一种虚拟现实技术手段。人们带…...

编程日记 2023/11/17 3:50:48

AI电话机器人能否代替人工？优缺点介绍

AI电话机器人是一种基于人工智能技术的自动语音系统&#xff0c;它可以模拟人类的语音交互&#xff0c;执行客服、销售、调查等任务。随着人工智能的发展&#xff0c;AI电话机器人的功能越来越强大&#xff0c;它们在某些领域已经能够替代人工执行任务。那么&#xff0c;AI电话…...

编程日记 2023/11/17 3:49:46

Java —— 多态

目录 1. 多态的概念 2. 多态实现条件 3. 重写 重写与重载的区别 4. 向上转型和向下转型 4.1 向上转型 4.2 向下转型 5. 多态的优缺点 6. 避免在构造方法中调用重写的方法 我们从字面上看"多态"两个字, 多态就是有多种状态/形态. 比如一个人可以有多种状态, …...

编程日记 2023/11/17 3:47:44

UI自动化测试(弹出框，多窗口)

一、弹出框实战 1、在UI自动化测试中经常会遇到Alert弹出框的场景。Alert类是对话框的处理&#xff0c;主要是对alert警告框。confirm确认框&#xff0c;promp消息对话框。 text():获取alert的文本 dismiss ():点击取消 accept():接受 send-keys():输入 from selenium import …...

编程日记 2023/11/17 3:45:41

Python爬虫程序网络请求及内容解析

目录 引言 一、网络请求 1. 导入必要的库 2. 发送请求 3. 处理响应 二、内容解析 1. HTML解析 2. 查找特定元素 3. 查找多个元素 4. 使用选择器选择元素 三、应用示例&#xff1a;爬取网站文章并解析标题和内容 1. 发送请求并解析HTML内容 2. 查找文章元素并提取标…...

编程日记 2023/11/17 3:44:39

C嘎嘎模板

> 作者简介&#xff1a;დ旧言~&#xff0c;目前大二&#xff0c;现在学习Java&#xff0c;c&#xff0c;c&#xff0c;Python等 > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是模板&#xff0c;并且能熟练运用函数模…...

编程日记 2023/11/17 3:43:36

数据结构和算法八股与手撕

数据结构和算法八股文 第一章 数据结构 1.1 常见结构 见http://t.csdnimg.cn/gmc3U 1.2 二叉树重点 1.2.1 各种树的定义 满二叉树&#xff1a;只有度为0的结点和度为2的结点&#xff0c;并且度为0的结点在同一层上 完全二叉树&#xff1a;除了最底层节点可能没填满外&…...

编程日记 2023/11/17 3:42:35

windiws docker 部署jar window部署docker 转载

Windows环境下从安装docker到部署前后端分离项目（springboot+vue） 一、前期准备 1.1所需工具： 1.2docker desktop 安装 二、部署springboot后端项目 2.1 部署流程 三、部署vue前端项目 3.1相关条件 3.2部署流程 四、前后端网络请求测试 一、前期准备 1.1所需工具： ①docke…...

编程日记 2023/11/17 3:41:33

使用git上传代码至gitee入门（1）

文章目录 一、gitee注册新建仓库 二、git的下载三、git的简单使用&#xff08;push、pull&#xff09;1、将本地文件推送至gitee初始化配置用户名及邮箱将本地文件提交至gitee补充 2、将远程仓库文件拉取至本地直接拉拉至其他本地文件夹 一、gitee 注册 官网&#xff1a;http…...

编程日记 2023/11/17 3:38:31

分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测

分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测 目录 分类预测 | MATLAB实现基于Isomap降维算法与改进蜜獾算法IHBA的Adaboost-SVM集成多输入分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 Isomap-Adaboost-IHBA-…...

编程日记 2023/11/17 3:35:27

如何解决3d max渲染效果图全白这类异常问题？

通过3d max渲染效果图时&#xff0c;经常会出现3Dmax渲染效果图全黑或是3Dmax渲染效果图全白这类异常问题。可能遇到这类问题较多的都是新手朋友。不知如何解决。 3dmax渲染出现异常的问题&#xff0c;该如何高效解决呢&#xff1f;今天小编这里整理几项知识点&#xff0c;大家…...

编程日记 2023/11/17 3:34:26

振南技术干货集：比萨斜塔要倒了,倾斜传感器快来！（2）

注解目录 1、倾斜传感器的那些基础干货 1.1 典型应用场景 &#xff08;危楼、边坡、古建筑都是对倾斜敏感的。&#xff09; 1.2 倾斜传感器的原理 1.2.1 滚珠式倾斜开关 1.2.2 加速度式倾斜传感器 1)直接输出倾角 2)加速度计算倾角 3)倾角精度的提高 &#xff08;如果…...

编程日记 2023/11/17 3:33:25

图形学 -- Geometry几何

隐式 implicit 基于给点归类&#xff0c;满足某些关系的点 缺点&#xff1a;不规则表面难以描述&#xff01; algebraic surface 直接用数学公式表示&#xff1a;不直观&#xff01; Constructive Solid Geometry&#xff08;CSG&#xff09; 用简单形状进行加减 distance …...

编程日记 2023/11/17 3:32:24

opencv中边缘检测的方法

在OpenCV中&#xff0c;边缘检测的方法主要有以下几种&#xff1a; Sobel算子&#xff1a; Sobel算子是边检测器&#xff0c;它使用33内核来检测水平边和垂直边。Sobel算子有两个&#xff0c;一个是检测水平边缘的&#xff0c;另一个是检测垂直边缘的。在OpenCV中&#xff0c;…...

编程日记 2023/11/17 3:31:23

DigitalVirt 洛杉矶 CMIN2 VPS 测评

发布于 2023-07-16 在 https://chenhaotian.top/vps/digitalvirt-us-cmin2/ 官网链接&#xff08;含AFF&#xff09;&#xff1a;https://digitalvirt.com/aff.php?aff459 美国西海岸 四网回程 CMIN2 移动新线路。 晚高峰延迟 165ms 左右&#xff0c;不丢包&#xff0c;非常…...

编程日记 2023/11/17 3:30:22

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

编程新知 2025/9/6 15:39:02

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/9/12 23:22:17

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

编程新知 2025/9/7 8:51:12

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

编程新知 2025/8/18 12:09:07

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2025/9/9 10:04:05

Tauri2学习笔记

教程地址&#xff1a;https://www.bilibili.com/video/BV1Ca411N7mF?spm_id_from333.788.player.switch&vd_source707ec8983cc32e6e065d5496a7f79ee6 官方指引&#xff1a;https://tauri.app/zh-cn/start/ 目前Tauri2的教程视频不多&#xff0c;我按照Tauri1的教程来学习&…...

编程新知 2025/9/12 19:09:56

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

编程新知 2025/9/10 20:00:39

MeshGPT 笔记

[2311.15475] MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers https://library.scholarcy.com/try 真正意义上的AI生成三维模型MESHGPT来袭&#xff01;_哔哩哔哩_bilibili GitHub - lucidrains/meshgpt-pytorch: Implementation of MeshGPT, SOTA Me…...

编程新知 2025/9/13 0:08:41