首页html上传excel文件，并读取excel和显示

html上传excel文件，并读取excel和显示

时间: 2024-02-04 07:03:47 浏览: 109

要在 HTML 中实现上传 Excel 文件并读取其内容并显示，可以使用以下代码作为参考： ```html <!DOCTYPE html> <html> <head> <title>Upload and Read Excel in HTML</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.8/xlsx.full.min.js"></script> <script> function uploadFile() { var file = document.getElementById('myFile').files[0]; var reader = new FileReader(); reader.onload = function(e) { var data = new Uint8Array(e.target.result); var workbook = XLSX.read(data, {type: 'array'}); var sheet_name_list = workbook.SheetNames; var xlData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]); var table = document.createElement("table"); var headerRow = table.insertRow(0); for (var key in xlData[0]) { var headerCell = headerRow.insertCell(-1); headerCell.innerHTML = key; } for (var i = 0; i < xlData.length; i++) { var row = table.insertRow(-1); for (var key in xlData[i]) { var cell = row.insertCell(-1); cell.innerHTML = xlData[i][key]; } } document.getElementById("excelData").appendChild(table); }; reader.readAsArrayBuffer(file); } </script> </head> <body> <input type="file" id="myFile" name="filename" accept=".xlsx"> <button onclick="uploadFile()">Upload</button> <div id="excelData"></div> </body> </html> ``` 这个代码会在 HTML 中创建一个文件选择器和一个上传按钮。一旦用户选择了文件并点击上传按钮，JavaScript 代码会读取文件内容并将其解析为 JSON 格式。然后，代码将 JSON 数据转换为 HTML 表格并将其添加到页面中的一个 div 元素中。

阅读全文