怎么用js自动读取本地固定xls表格,并将内容显示在html页面
1条回答 默认 最新
- XCU_CH 2023-05-19 13:36关注
要使用JavaScript自动读取本地固定xls表格文件并在HTML页面中显示内容,可以采用以下步骤:
1、创建一个 HTML 文件。在其中创建一个具有 ID 的元素和一个具有 ID 的
元素。<!DOCTYPE html> <html> <head> <title>Excel to HTML</title> </head> <body> <input type="file" id="input"/> <br><br> <table id="table"></table> <script src="exceltohtml.js"></script> </body> </html>
2、使用 JavaScript 创建一个函数来处理文件上传事件,并将 Excel 格式的数据转换为 HTML 表格格式。可以使用 js-xlsx 库https://github.com/SheetJS/js-xlsx 来实现将 Excel 文件转换为 JSON 数据。
function handleFile() { const inputFile = document.getElementById("input").files[0]; const reader = new FileReader(); reader.readAsBinaryString(inputFile); reader.onload = function(event) { const data = event.target.result; const workbook = XLSX.read(data, {type: 'binary'}); const sheetName = workbook.SheetNames[0]; const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: 1}); const tableEl = document.getElementById("table"); // 创建表头 let tr = document.createElement("tr"); for(let i=0;i<sheetData[0].length;i++){ let th = document.createElement("th"); th.innerHTML=sheetData[0][i]; tr.appendChild(th); } tableEl.appendChild(tr); // 插入每行数据 for(let i=1;i<sheetData.length;i++){ let tr = document.createElement("tr"); for(let j=0;j<sheetData[i].length;j++){ let td = document.createElement("td"); td.innerHTML=sheetData[i][j]; tr.appendChild(td); } tableEl.appendChild(tr); } }; }
3、将 js-xlsx 库引入到 HTML 文件中。
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
4、在 HTML 文件中添加对刚刚创建的函数的调用,并将 HTML、CSS 样式应用于表。
<script> input.onchange = handleFile; </script> <style> table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; } th { background-color: #e6e6e6; } </style>
这样,当用户通过在页面上选择文件并上传时,JavaScript 函数会自动读取 Excel 表中的内容,并将其转换为 HTML 表格格式,并显示在网页上。
解决 无用评论 打赏 举报
悬赏问题
- ¥15 ogg dd trandata 报错
- ¥15 高缺失率数据如何选择填充方式
- ¥50 potsgresql15备份问题
- ¥15 Mac系统vs code使用phpstudy如何配置debug来调试php
- ¥15 目前主流的音乐软件,像网易云音乐,QQ音乐他们的前端和后台部分是用的什么技术实现的?求解!
- ¥60 pb数据库修改与连接
- ¥15 spss统计中二分类变量和有序变量的相关性分析可以用kendall相关分析吗?
- ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
- ¥20 神经网络Sequential name=sequential, built=False
- ¥16 Qphython 用xlrd读取excel报错