利用 js

您所在的位置：网站首页 › 如何把json数据转换成表格文件 › 利用 js

利用 js

2023-03-30 05:16| 来源: 网络整理| 查看: 265

如何将选择的文件转为json数据

1.将 xlsx.full.min.js 导入到页面中；

2.然后通过 FileReader 对象读取文件利用 js-xlsx 转成 json 数据

将得到的json数据渲染到页面上

1.由于选择的Excel文件属于表格，渲染时选用 table tr td 等标签；

2.获取表头数据，得到表格列数和列名；

3.通过 for 循环创建 tr 和 td，并给 td 标签添加上列名；

4.对数据对象进行遍历，通过数据对象的键名和 td 标签的列名给对应的 td 添加内容；

5.为了使空白的表格可以编辑，在创建 td 时通过 $.html 的方法添加 input 标签，在给 td 添加内容时同样使用 $.html 进行，把不需要 input 标签的 td 的 html内容重写。

代码示例如下：

DOCTYPE html > table { border-collapse : collapse ; border : black 1px solid ; }

th { text-align : center ; padding : 20px 0 ; }

td { padding : 5px 10px ; border : black 1px solid ; }

input { border : none ; /* 浏览器自带的 input 标签样式并不好看将 input 标签的边框去掉 */ } /* FileReader共有4种读取方法： 1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。 2.readAsBinaryString(file)：将文件读取为二进制字符串 3.readAsDataURL(file)：将文件读取为Data URL 4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8' */ var wb ; //读取完成的数据 var rABS = false ; //是否将文件读取为二进制字符串 function importf ( obj ) { //导入 if (! obj . files ) { return ; } var f = obj . files [ 0 ]; var reader = new FileReader (); reader . onload = function ( e ) { // console.log(e.target.result); if ( rABS ) { wb = XLSX . read ( btoa ( fixdata ( e . target . result )), { //手动转化 type: 'base64' }); } else { wb = XLSX . read ( e . target . result , { type: 'binary' }); } //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字 //wb.Sheets[Sheet名]获取第一个Sheet的数据 var data = XLSX . utils . sheet_to_json ( wb . Sheets [ wb . SheetNames [ 0 ]]); console . log ( data ); var keyAry = []; // 遍历json对象，获取每一列的键名 for ( var key in data [ 1 ]){ keyAry . push ( key ); } // 清除上次渲染的表格 $ ( "#demo" ). empty (); // 设置表格头 $ ( ` keyAry [ 0 ] } ` ). appendTo ( $ ( "#demo" )); for ( var d of data ){ // 通过循环,每有一条数据添加一行表格 var tr = $ ( "" ); for ( var n = 0 ; n < keyAry . length ; n ++){ // 根据keyAry数组的长度,创建每一行表格中的td $ ( "" ). html ( "" ). addClass ( keyAry [ n ]). appendTo ( tr ); } // 遍历对象,根据键名找到是哪一列的数据,给对应的td添加内容 for ( k in d ){ // (tr[0].children[keyAry.indexOf(k)]) $ ( tr [ 0 ]. children [ keyAry . indexOf ( k )]). html ( d [ k ]); } tr . appendTo ( $ ( "#demo" )); } } if ( rABS ) { reader . readAsArrayBuffer ( f ); } else { reader . readAsBinaryString ( f ); } } function fixdata ( data ) { //文件流转BinaryStrings var o = "" , l = 0 , w = 10240 ; jsArry =[]; for (; l < data . byteLength / w ; ++ l ) jsArry . push ( String . fromCharCode . apply ( null , new Uint8Array ( data . slice ( l * w , l * w + w )))); return jsArry ; }

【本文地址】

利用 js

利用 js

今日新闻

推荐新闻