首先引入SheetJS库，通过CDN添加script标签；接着创建type为file的input元素并限制格式为.xls和.xlsx；然后监听文件选择事件，获取用户上传的文件；使用FileReader读取文件二进制数据，并用XLSX.read解析生成workbook对象；从中提取第一张工作表的数据，利用XLSX.utils.sheet_to_json转换为JSON格式；最后将结果通过pre标签展示在页面id为output的div中，实现Excel数据的网页解析与显示。
如果您需要在网页中解析Excel文件并将数据展示出来，可以利用HTML5的File API结合SheetJS库来实现对Excel文件的读取与处理。以下是具体的操作步骤：
使用SheetJS（也称为xlsx.js）之前，需要先将其引入到项目中。该库支持多种格式的电子表格文件读取，包括XLS和XLSX。
1、通过CDN方式在HTML文件的<head>或<body>标签中引入SheetJS库：
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
立即学习“前端免费学习笔记（深入）”；
2、确保网络可访问CDN资源，否则需下载库文件并本地引用。
为了允许用户选择本地的Excel文件，需要添加一个type为file的input元素，并限制其仅接受Excel格式文件。
1、在HTML页面中添加以下代码：
<input type="file" id="excelFile" accept=".xlsx, .xls" />
2、accept属性可帮助过滤文件类型，提升用户体验。
当用户选择文件后，JavaScript需要捕获该事件并获取文件对象，以便后续解析。
1、使用document.getElementById获取文件输入元素：
const input = document.getElementById('excelFile');
2、为input元素绑定change事件监听器：
input.addEventListener('change', function(e) { const file = e.target.files[0]; if(file) { /* 处理文件 */ } });
利用FileReader API读取用户上传的Excel文件二进制数据，然后交由SheetJS进行解析。
1、在事件回调中创建FileReader实例：
const reader = new FileReader();
2、定义onload事件处理函数，在文件读取完成后触发：
reader.onload = function(e) { const data = new Uint8Array(e.target.result); const workbook = XLSX.read(data, { type: 'array' }); };
3、调用reader.readAsArrayBuffer(file)启动读取操作。
4、XLSX.read方法返回workbook对象，包含所有工作表信息。
解析完成后，可以从workbook对象中提取特定工作表的内容并转换为JSON格式。
1、获取第一个工作表名称：
const firstSheetName = workbook.SheetNames[0];
2、通过workbook.Sheets[第一张表名]获取工作表对象：
const worksheet = workbook.Sheets[firstSheetName];
3、使用XLSX.utils.sheet_to_json将工作表转为数组对象：
const jsonData = XLSX.utils.sheet_to_json(worksheet);
4、默认情况下，该方法会跳过空行，适合大多数数据提取场景。
将转换后的JSON数据显示在HTML表格或预览区域中，便于用户查看。
1、在页面中准备一个用于显示结果的容器：
<div id="output"></div>
2、获取输出元素并设置其innerHTML为JSON数据的字符串形式：
document.getElementById('output').innerHTML = '<pre>' + JSON.stringify(jsonData, null, 2) + '</pre>';
3、使用<pre>标签保持格式化缩进，提高可读性。
以上就是html5文件如何实现Excel表格解析 html5文件SheetJS库的读取操作的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
190
收藏
