Js实现将Excel导出为JSON

前言

开发这个小工具目的是为了提供给前端 JSON 数据，因为客户只提供从数据中台导出的 Excel 表格数据，所以给前端程序员生成好 JSON 数据文件再发给他就行，反正每次客户生成 Excel 还得转换一次。

用到哪些库

jQuery
xlsx
记得把库的地址替换成自己的目录，你可以在这里搜索 xlsx 库，直接搜索“xlsx”，找到对应的资源引用就是了。

注意

第一种方式采用上传文件实现，图方便直接用这个，新建txt改为Html复制粘贴就能直接用。
第二种方式采用异步加载文件实现，某些业务场景下，你可能用得上，代码也放在这儿了，有需要自取。使用时记得把它放到应用服务器 Web 目录下，否则无法读取本地xlsx文件，例如：Tomcat（./webapps）、Apache（./www）、Nginx（./wwwroot）等。或者安装 http-server 使用命令将存放代码块的文件夹设为 Web 目录：

cd [你存放代码的文件路径]
http-server ./ -p 8080

代码

第一种方式，上传文件

<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>xlsx导出为json</title><script src="./static/jquery.min.js"></script><script src="./static/xlsx.full.min.js"></script></head><body><div style="margin:20px"><p id="tips"></p><input id="fileExcel" type="file" onchange="getExcelData(this)" style="width: 320px;"></div><script>//读取Excel数据function getExcelData(obj) {$("#tips").html("正在读取，请稍后...");$("#fileExcel").css("display", "none");var reader = new FileReader();//文件加载完成后调用reader.onload = function(e) {var data = e.target.result;const workbook = XLSX.read(data, {type: 'array'})//获取json格式的Excel数据var jsonData0 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {defval: 'null' //单元格为空时的默认值});//表格存在多个 Sheet 可以使用下标获取数据//var jsonData1 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[1]], {});// 如果表格内存在日期，需要处理一下/* for (var i = 0; i < jsonData0.length; i++) {jsonData0[i]["日期"] = formatDate(jsonData0[i]["日期"]);} */download("data.json", JSON.stringify(jsonData));$("#tips").html("");$("#fileExcel").css("display","block");};//加载文件reader.readAsArrayBuffer(obj.files[0]);}//下载文件function download(filename, text) {var pom = document.createElement('a');pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));pom.setAttribute('download', filename);if (document.createEvent) {var event = document.createEvent('MouseEvents');event.initEvent('click', true, true);pom.dispatchEvent(event);} else {pom.click();}}//将excel日期转为字符串格式var format = "-";function formatDate(numb) {const time = new Date((numb - 1) * 24 * 3600000 + 1)time.setYear(time.getFullYear() - 70)const year = time.getFullYear() + ''const month = time.getMonth() + 1 + ''const date = time.getDate() - 1 + ''if (format && format.length === 1) {return year + format + month + format + date}return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)}</script></body>
</html>

第二种方式，异步加载

<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>xlsx导出为json</title><!-- 先替换为自己的库 --><script src="./static/jquery.min.js"></script><script src="./static/xlsx.full.min.js"></script></head><body><div><button id="btn1" type="button">读取Excel并转为JSON</button><p id="loading" style="display: none;">读取中...</p></div><script>/*https://github.com/SheetJS/sheetjs/*/var flag = true;$("#btn1").click(function() {if (flag) {$("#btn1").hide();$("#loading").show();flag = false;jQuery.ajax({url: './file.xlsx',cache: false,xhr: function() {var xhr = new XMLHttpRequest()xhr.responseType = 'blob'return xhr},success: function(data) {var reader = new FileReader();//加载文件reader.readAsArrayBuffer(data);//文件加载完成后调用reader.onload = function(e) {var data = e.target.result;const workbook = XLSX.read(data, {type: 'array'})var jsonData0 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]], {});//表格存在多个 Sheet 可以使用下标获取数据//var jsonData1 = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[1]], {});// 如果表格内存在日期，需要处理一下/* for (var i = 0; i < jsonData0.length; i++) {jsonData0[i]["日期"] = formatDate(jsonData0[i]["日期"]);} */$("#btn1").show();$("#loading").hide();download("data.json", JSON.stringify(jsonData0));};},error: function() {}})}})//下载文件function download(filename, text) {var pom = document.createElement('a');pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));pom.setAttribute('download', filename);if (document.createEvent) {var event = document.createEvent('MouseEvents');event.initEvent('click', true, true);pom.dispatchEvent(event);} else {pom.click();}}//将excel日期转为字符串格式var format = "-";function formatDate(numb) {const time = new Date((numb - 1) * 24 * 3600000 + 1)time.setYear(time.getFullYear() - 70)const year = time.getFullYear() + ''const month = time.getMonth() + 1 + ''const date = time.getDate() - 1 + ''if (format && format.length === 1) {return year + format + month + format + date}return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)}</script></body>
</html>

Js实现将Excel导出为JSON相关推荐

JSON格式数据转Excel导出
json格式数据转Excel导出的两种方法第一种table格式数据直接转Excel: 但是用这种方式会出现一种问题,就是当你的table有分页的情况下,只能抓取当前分页的数据. 拿到表格的id就可以 ...
JSON格式化动态生成表格表格转置行列转换 Excel导出
先看效果初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出需要行求和.列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 Excel导出行求 ...
js+PHP利用PHPExcel导出表格数据到excel
这里写自定义目录标题前言通过js筛选出表格数据 PHP利用PHPExcel导出表格数据到excel 前言因为在开发平台的时候遇到了需要将表格数据导出到Excel的情况,通过百度找到了PHP插件P ...
利用js-xlsx.js插件实现Excel文件导入并解析Excel数据成json数据格式
<!DOCTYPE html><html lang= ...
js页面上的excel导出
js页面上的excel导出这里的代码是网上转别人的感觉还不错,可以试试. <html> <head> <script type="text/javascrip ...
在Unity上编写一个小工具--Excel导出Json
这是个Excel导出Json的工具类,需要放进Editor文件夹里,之后就可以在菜单上点击导出了这个工具运行需要一个插件----NPOI,这个是用来读取excel文件的,这个插件的dll文件可以去网 ...
使用table2excel.js 将页面上的数据用excel导出兼容IE 火狐谷歌浏览器
很好用的excel导出插件,可直接导出页面中数据,简单好用.原table2excel.js 使用火狐 ie导出excel有问题,js代码已修改. html示例代码 <!DOCTYPE html& ...
js 实现前端数据导出为excel表格
源码: <html> <head><p style="font-size: 20px;color: red;">将json数据导出为csv文件& ...
java 前端导出exvel_使用纯前端做的Excel导出了解一下
该楼层疑似违规已被系统折叠隐藏此楼查看此楼这是我改造的前端Excel导出,需要引入jQuery插件[复制粘贴即可使用],各位不懂可以试一下.纯属练习使用JS标签方式将页面数据信息导出xlsx文件 ...

Js实现将Excel导出为JSON

前言

用到哪些库

注意

代码

Js实现将Excel导出为JSON相关推荐

最新文章

热门文章