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

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

news 文章来源：https://blog.csdn.net/weixin_44646763/article/details/134419079 2025/4/21 22:08:38

一、实现将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

Qt DragDrop拖动与放置

本文章从属于 Qt实验室-CSDN博客系列 拖放操作包括两个动作&#xff1a;拖动(drag)和放下(drop或称为放置)。 拖动允许 对于要拖出的窗口或控件&#xff0c;要setDragEnabled(true) 对于要拖入的窗口或控件&#xff0c;要setAcceptDrops(true) 下面以一个具体的用例进行说…...

编程日记 2023/11/17 3:29:21

thinkphp8 多级控制器调用

在使用这个目录的时候正常访问时 http://tp.com/index.php/user2.login/index, 这个多级目录时不允许使用的&#xff0c;想要使用就的使用路由 在route/app.php 里面配置&#xff1a;Route::get(user2/login,user2.Login/index); 第一个参数时外部访问参数&#xff0c;第二个是…...

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

设计测试用例的6种基本原则

设计测试用例的基本原则&#xff0c;对于软件测试非常重要&#xff0c;这些原则有助于设计出高质量、全面、有效的测试用例&#xff0c;从而提高软件测试的效率和准确性&#xff0c;维护软件的质量和稳定。如果在设计用例时没有遵循基本原则&#xff0c;这会影响用例的全面性、…...

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

java的Exception.getMessage为null

之前捕获异常后调用异常的getMessage写日志&#xff0c;日志写的竟然是null&#xff0c;不可思议。发现要调用异常的getCause().getMessage()才能得到异常信息 刻意把密码改错&#xff0c;让异常直达界面&#xff0c;免得有问题时候只能猜...

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

EXTI (2)

增强版实验简介 EXTI5和EXTI9共享一个中断源 下面的类似 EXTI0到4各自拥有一个中断源 改变引脚 PA0和PA1改变为PA5 和PA6 EXTI的重映射 之前是把PA0映射到EXTI0 PA1映射到EXTI1上 现在是要把PA5和PA6分别映射到EXTI5和6上 EXTI进行初始化 NVIC初始化 编写中断函数 因为EXTI…...

编程日记 2023/11/17 3:21:14

Django实战项目-学习任务系统-任务完成率统计

接着上期代码内容&#xff0c;继续完善优化系统功能。 本次增加任务完成率统计功能&#xff0c;为更好的了解哪些任务完成率高&#xff0c;哪些任务完成率低。 该功能完成后&#xff0c;学习任务系统1.0版本就基本完成了。 1&#xff0c;编辑urls配置文件&#xff1a; ./mysi…...

编程日记 2023/11/17 3:18:10

安卓调用手机邮箱应用发送邮件

先来看看实现效果&#xff1a; 也不过多介绍了&#xff0c;直接上代码&#xff1a; private void openMail() {Uri uri Uri.parse("mailto:" "");List<ApplicationInfo> applicationInfoList getPackageManager().getInstalledApplications(Packa…...

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

Vue-Pinia

目录 Pinia状态管理库 使用步骤 1、安装Pinia 2、在vue应用实例中使用pinia 3、在src/stores/token.js中定义stores 4、在组件中使用store axios请求拦截器 代码实现 Pinia状态管理库 Pinia是Vue的专属状态管理库&#xff0c;它允许你跨组件或页面共享状态 一般在登录时…...

编程日记 2023/11/17 3:16:08

C语言，编写程序输出半径为1到15的圆的面积，若面积在30到100之间则予以输出，否则，不予输出

以下是一个使用C语言编写的程序&#xff0c;用于输出半径为1到15的圆的面积&#xff0c;并且如果面积在30到100之间&#xff0c;则输出该圆的半径和面积。 #include <stdio.h> #define PI 3.14159265358979323846int main() {int radius;double area;for (radius 1; ra…...

编程日记 2023/11/17 3:15:07

Ansys Electronics Desktop仿真——HFSS线圈寄生电阻，电感

利用ANSYS Electronics Desktop&#xff0c;可在综合全面、易于使用的设计平台中集成严格的电磁场分析和系统电路仿真。按需求解器技术让您能集成电磁场仿真器和电路及系统级仿真&#xff0c;以探索完整的系统性能。 HFSS&#xff08;High Frequency Structure Simulator&#…...

编程日记 2023/11/17 3:14:06