Javascripts把Excel解析为json(js-xlsx)

水深无声 2022-04-24 11:12 198阅读 0赞

最近碰到了导入导出Excel的一些问题,在此分享一下我的解决过程  
[演示demo(点击)][demo]

#### 点击查看[Javascripts/Java把json数据导出Excel(js-xlsx&&POI)][Javascripts_Java_json_Excel_js-xlsx_POI] ####

### 需求场景 ###

[js-xlsx—gitHub][js-xlsx_gitHub]  
有时候有会有这样的需求,将Excel的数据导入数据库.后端后大名鼎鼎的POI,但是这样会存在一些问题,如果excel文件过大,解析起来非常占用服务器资源.于是百度了一下,原来前端也有excel导入导出的解决方案,就是**js-xlsx**了.把解析excel的工作放在前端,极大的**减轻服务器压力.**

### 步骤(思路) ###

*  上传Excel文件
 *  利用Html5中的Api**FileReader**将文件读取为二进制流
 *  FileReader的实例有很多事件,我们只需要关注其onload事件(当流读取完成会触发)
 *  拿到二进制流使用XLSX的read方法将二进制流转换为一个WorkBook对象
 *  其实WorkBook里面已经包含了我们所需要的数据了,但是里面还有很多我们不关注的信息.
 *  最后将我们关注的信息重新封装即可

### 动画演示 ###

![在这里插入图片描述][20190423141600493.gif]

### 代码分析 ###

<script>
        document.getElementById('btn').onclick = function () { //点击事件
          var fileEle = document.getElementById("xlsxFile"); //文本框的元素
          var reader = new FileReader();//创建一个文件输入流
          reader.readAsBinaryString(fileEle.files[0])//把文本框的文件读取为二进制流
          reader.onload = function (e) { //读取完成触发的事件
            var workbook = XLSX.read(e.target.result, {  type: 'binary' })//将二进制流转换成workBook对象（也就是工作簿对象，打印在控制台了可以看一看）
            console.log('工作簿对象');
            console.log(workbook);
            console.log('每个工作表的转换成json的数据');
            console.log(JSON.parse(to_json(workbook)));
            document.getElementById("jsonContent").innerHTML=to_json(workbook)
          }
        }
    
        //将workbook的数据转换为json数据
        function to_json(workbook) { 
          var result = { };
          workbook.SheetNames.forEach(function (sheetName) { 
            var roa = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], { 
              header: 1
            });
            if (roa.length)
              result[sheetName] = roa;
          });
          return JSON.stringify(result, 2, 2);
        };
      </script>

[demo]: http://139.199.72.163/code_demo/js_xlsx_demo/js-xlsx_fileToJson.html
[Javascripts_Java_json_Excel_js-xlsx_POI]: https://blog.csdn.net/shenkeding9350/article/details/89470900
[js-xlsx_gitHub]: https://github.com/SheetJS/js-xlsx
[20190423141600493.gif]: /images/20220216/97997f00e7444ebe80d8c392010d1129.png

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 excel把工作表快速保存为单个文件

简单粗暴的解决 excel把工作表快速保存为单个文件的问题首先创建文件夹F，把要保存单个文件test.xsl的excel文件拖到里面 ![50fc483e1c4ea85

不念不忘少年蓝@/ 2024年03月22日 15:59/ 0 赞/ 88 阅读

相关 laravel把markdown文本解析为html元素

laravel把markdown文本解析为html元素工具使用erusev/parsedown扩展包，安装方法 composer require er

╰+哭是因爲堅強的太久メ/ 2023年10月06日 17:39/ 0 赞/ 54 阅读

相关 JAVA笔记——将excel解析为对象（通用模板）

环境使用到poi库 1. poi.jar 2. poi-ooxml.jar 3. poi-ooxml-schemas.jar 4. xmlBean.ja

比眉伴天荒/ 2022年08月20日 04:13/ 0 赞/ 356 阅读

相关 java解析excel文件为txt文件

java解析excel文件，并将其以建松格式保存到txt文件中。 1、maven配置  <dependency> <g

系统管理员/ 2022年07月15日 08:26/ 0 赞/ 378 阅读

相关把Sql语句解析为一棵语法树相关

》》 [http://www.bianceng.cn/Sql%20server/sql99.htm][http_www.bianceng.cn_Sql_20server_sql

淡淡的烟草味﹌/ 2022年06月10日 06:39/ 0 赞/ 236 阅读

相关 Javascripts把Excel解析为json(js-xlsx)

最近碰到了导入导出Excel的一些问题,在此分享一下我的解决过程 [演示demo(点击)][demo] 点击查看[Javascripts/Java把json数据导出Ex

水深无声/ 2022年04月24日 11:12/ 0 赞/ 199 阅读

相关 Javascripts/Java把json数据导出Excel(js-xlsx&&POI)

为什么要使用js-xlsx呢? 假如我们遇到了这样一个需求,把数据库中的数据导出位Excel,或者把Excel导入到数据库(这里以导出Excel为例). [前端导出演

待我称王封你为后i/ 2022年04月24日 11:06/ 0 赞/ 141 阅读

相关 [转]Asp.net中把DataTable或DataGrid导出为Excel

转自\[url\]http://www.cnblogs.com/chwkai/archive/2005/10/08/250426.html\[/url\] 当前编码的

水深无声/ 2022年04月12日 06:27/ 0 赞/ 315 阅读

相关 mybatis test把空字符串解析为0

直接入主题：一个mybatis的Mapper文件 xxxxMapper(Map<String,Object>params); 相关xml代码片段： <if

旧城等待，/ 2021年11月09日 09:01/ 0 赞/ 269 阅读

相关 asp中把数据导出为excel的2种方法

我们在做项目的时候经常要将数据库的数据导出到excel中，很多asp用户并不知道怎么写。这里明凯总结了两种方法来导出excel，希望能帮到大家。方法一：用excel

待我称王封你为后i/ 2021年11月04日 16:52/ 0 赞/ 334 阅读