1、使用 XMLHttpRequest
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Read Excel with JavaScript</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
<script>
// 创建 XMLHttpRequest
var xhr = new XMLHttpRequest();
// 配置请求类型和URL
xhr.open("GET", "./测试.xlsx", true);
xhr.responseType = "arraybuffer"; // 重要:设置响应类型为arraybuffer以接收二进制数据
// 处理请求状态改变
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
// 当请求成功完成
var data = new Uint8Array(xhr.response); // 获取返回的二进制数据
// 使用SheetJS解析二进制数据
var workbook = XLSX.read(data, { type: "array" });
// 读取第一个工作表
var firstSheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[firstSheetName];
// 将工作表转换为JSON
var jsonData = XLSX.utils.sheet_to_json(worksheet);
// 处理JSON数据
console.log(jsonData);
}
};
// 发送请求
xhr.send();
</script>
</body>
</html>
2、使用 input
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Read Excel with JavaScript</title>
</head>
<body>
<input type="file" id="fileInput" />
<pre id="output"></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>
<script>
// JavaScript 部分在这里
document
.getElementById("fileInput")
.addEventListener("change", handleFile, false);
function handleFile(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const data = new Uint8Array(e.target.result);
const workbook = XLSX.read(data, { type: "array" });
// 获取第一个工作表的名称
const firstSheetName = workbook.SheetNames[0];
// 获取第一个工作表
const worksheet = workbook.Sheets[firstSheetName];
// 将工作表内容转换为 JSON 格式
const jsonData = XLSX.utils.sheet_to_json(worksheet, {
header: 1,
});
console.log(jsonData);
};
reader.readAsArrayBuffer(file);
}
</script>
</body>
</html>