当前位置：首页 > news >正文

【前端】读取 xlsx 文件并转化成 json 数据

news 2024/9/24 5:09:03

1、使用 XMLHttpRequest

<!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>// 创建 XMLHttpRequestvar xhr = new XMLHttpRequest();// 配置请求类型和URLxhr.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];// 将工作表转换为JSONvar jsonData = XLSX.utils.sheet_to_json(worksheet);// 处理JSON数据console.log(jsonData);}};// 发送请求xhr.send();</script></body>
</html>

2、使用 input

<!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>