【免费】JS读取Excel为json数据资源-CSDN文库

共2个文件

js：1个

html：1个

需积分: 0 66 浏览量更新于2023-02-03 收藏 312KB ZIP 举报

在JavaScript中，将Excel文件转换为JSON数据是一个常见的需求，特别是在Web应用中处理用户上传的表格数据时。这里我们将深入探讨如何使用JavaScript实现这一功能，主要依赖于一个名为`xlsx`的库，这个库在提供的压缩包中包含了一个名为`xlsx.full.min.js`的文件。 `xlsx`库是一个强大的工具，它支持读写多种电子表格格式，包括Excel（.xls, .xlsx）、CSV、HTML等。在我们的场景中，我们将利用它的读取功能将Excel文件解析为JSON对象。你需要在HTML文件（如`index.html`）中引入`xlsx.full.min.js`库。这通常通过`<script>`标签来完成，如下所示： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JS读取Excel为json数据</title> <script src="xlsx.full.min.js"></script> </head> <body>  </body> </html> ``` 接下来，我们创建一个函数来处理文件读取和转换。在JavaScript中，你可以使用`FileReader` API来读取本地文件。当用户选择一个Excel文件后，`readAsBinaryString`方法会读取文件内容，然后调用`XLSX.read`方法来解析这个二进制字符串： ```javascript function readExcelFile(file) { var reader = new FileReader(); reader.onload = function(e) { var binaryStr = e.target.result; var workbook = XLSX.read(binaryStr, {type: 'binary'}); var firstSheetName = workbook.SheetNames[0]; var sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[firstSheetName]); console.log(sheetData); // 这里是转换后的JSON数据 }; reader.readAsBinaryString(file); } ``` 在这个函数中，`XLSX.read`返回一个工作簿对象，其中包含了所有工作表的信息。我们取第一个工作表`firstSheetName`，然后使用`sheet_to_json`方法将工作表转换为JSON数组。每一行Excel数据都会被转换为一个JSON对象，列名作为键，单元格值作为值。为了触发这个函数，你可能需要设置一个文件输入元素，监听`change`事件，当用户选择文件时调用`readExcelFile`： ```html <input type="file" id="excelInput" accept=".xls,.xlsx" onchange="readExcelFile(this.files[0])"> ``` 这样，当用户选择一个Excel文件并点击打开后，文件会被读取并转换为JSON数据，然后显示在控制台。你可以根据实际需求对这些数据进行进一步处理，例如存储到数据库或显示在页面上。通过JavaScript和`xlsx`库，我们可以方便地实现Excel文件到JSON数据的转换，这对于前端开发处理表格数据提供了极大的便利。在实际应用中，还可以结合Promise或者async/await来处理异步操作，提高代码的可读性和可维护性。

收起资源包目录

JS读取Excel为json数据.zip （2个子文件）

xlsx.full.min.js 874KB

index.html 2KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>  <script src="./xlsx.full.min.js"></script> </head> <body> <input type="file" onchange="importf(this)" /> <div id="demo"></div> <script> /* 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) { var data = e.target.result; if(rABS) { wb = XLSX.read(btoa(fixdata(data)), {//手动转化 type: 'base64' }); } else { wb = XLSX.read(data, { type: 'binary' }); } //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字 //wb.Sheets[Sheet名]获取第一个Sheet的数据 document.getElementById("demo").innerHTML= JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ); var jsonStr = JSON.stringify( XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]) ); console.log(jsonStr); }; 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; } </script> </html>