我自己做的基于SheetJs做的例子
基本思路:
通过<input type="file" >
获取选中的本地excel文件流。再通过 FileReader 对象读取文件,然后使用FileReader.onload 事件监听操作
FileReader仅用于以安全的方式从用户(远程)系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件,应使用标准Ajax解决方案进行服务器端文件读取,如果读取跨域,则使用CORS权限。
可以处理对应列,跳过行头,生成JSON
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <html> <head> <title>JS-XLSX Live Demo</title> <style> #drop { border: 2px dashed #bbb; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; padding: 25px; text-align: center; font: 20pt bold, "Vollkorn" ; color: #bbb } #b64data { width: 100%; } a { text-decoration: none } button { } </style> <script type= "text/javascript" src= "dist/xlsx.full.min.js" ></script> <script type= "text/javascript" src= "dist/xlsx.core.min.js" ></script> <script type= "text/javascript" src= "dist/jquery.min.js" ></script> </head> <body> <pre> <input type= "file" name= "xlfile" id= "xlf" onchange= "importf(this)" > </pre> <pre id= "out" ></pre> <br> <div id= "demo" > </div> <div> <textarea id= 'debug' rows= "30" cols= "100" ></textarea> </div> <script> /* FileReader共有4种读取方法: 1.readAsArrayBuffer(file):将文件读取为ArrayBuffer。 2.readAsBinaryString(file):将文件读取为二进制字符串 3.readAsDataURL(file):将文件读取为Data URL 4.readAsText(file, [encoding]):将文件读取为文本,encoding缺省值为'UTF-8' */ var workbook; //读取完成的数据 var rABS = false ; //是否将文件读取为二进制字符串 function importf(obj) { //导入 const headers = [ "A" , "B" , "C" , "D" , "E" , "F" ]; //针对G0107中的表样,做的6列 const ranges = 4; //针对G0107中的表样,跳过的表头 if (!obj.files) { return ; } var f = obj.files[0]; var reader = new FileReader(); reader.onload = function (e) { var data = e.target.result; if (rABS) { workbook = XLSX.read(btoa(fixdata(data)), { //手动转化 type: 'base64' }); } else { workbook = XLSX.read(data, { type: 'binary' }); } var out_json; for ( var sheetNum = 0; sheetNum < Number(workbook.SheetNames.length); sheetNum++) { var first_sheet_name = workbook.SheetNames[sheetNum]; //var json = XLSX.utils.sheet_to_json(workbook.Sheets[first_sheet_name]); var json = XLSX.utils.sheet_to_json(workbook.Sheets[first_sheet_name], { header: headers, raw: true , defval: '' } ); debugger; //console.log(json); out_json = getOutput(json, 'json' ); $( '#debug' ).val(out_json); } }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } } function fixdata(data) { //文件流转BinaryString var 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; } function getOutput(obj, type) { switch (type) { case 'json' : return JSON.stringify(obj); break ; case 'obj' : return obj; break ; default : return JSON.stringify(obj); } } </script> </body> </html> |
用空常来坐坐
https://www.cnblogs.com/alexgl2008/
分类:
工作随笔
标签:
JavaScript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理