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

js中的FileReader对象

news 2025/7/5 19:40:40

一个简单的例子来理解：
读取用户上传的 Excel 文件（.xlsx），解析内容，并以表格形式在页面上显示出来。

它依赖一个外部库：XLSX.js（即 SheetJS），用于解析 Excel 数据。

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h2>上传Excel文件</h2><input type="file" name="" id="excelFile" accept=".xlsx, .xls"><div id="output"></div><script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script><script src="index.js"></script>
</body>
</html>

index.js

// 读取excel并提取列内容
const UploadFie = document.querySelector("#excelFile")UploadFie.addEventListener("change", handleFile)function handleFile(event) {const file = event.target.files[0]// console.log(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)// 渲染结果renderTable(jsonData)}// reader.readAsArrayBuffer(file)
}function renderTable(data) {const output = document.querySelector("#output")output.innerHTML = ""if (data.length === 0) {output.textContent = "没有数据"return}const table = document.createElement("table")table.style.border = "1"const thead = table.insertRow()Object.keys(data[0]).forEach(key => {const th = document.createElement("th")th.textContent = keythead.appendChild(th)})data.forEach(row => {const tr = table.insertRow()Object.values(row).forEach(value => {const td = tr.insertCell()td.textContent = value})})output.appendChild(table)
}

带注释js代码

// 获取页面上 ID 为 "excelFile" 的 <input type="file"> 元素，用于文件上传
const UploadFie = document.querySelector("#excelFile");// 给文件上传输入框添加事件监听器，监听 "change" 事件（用户选中文件时触发）
UploadFie.addEventListener("change", handleFile);// 文件选择后的处理函数
function handleFile(event) {// 获取用户选择的第一个文件对象（如果选择多个，只取第一个）const file = event.target.files[0];// 创建一个 FileReader 实例，用于读取文件内容const reader = new FileReader();// 当文件读取完成后触发 onload 回调函数reader.onload = function(e) {// 将读取到的 ArrayBuffer 包装成 Uint8Array 类型的字节数组const data = new Uint8Array(e.target.result);// 使用 SheetJS (XLSX) 读取 Excel 文件内容，指定类型为 "array"const workbook = XLSX.read(data, { type: "array" });// 获取 Excel 的第一个工作表名称const firstSheetName = workbook.SheetNames[0];// 获取第一个工作表对象const worksheet = workbook.Sheets[firstSheetName];// 将工作表数据转换为 JSON 格式数组，每一行为一个对象const jsonData = XLSX.utils.sheet_to_json(worksheet);// 将数据渲染为 HTML 表格并显示在页面上renderTable(jsonData);};// 将文件内容以 ArrayBuffer（二进制缓冲区）方式读取（适用于 Excel）reader.readAsArrayBuffer(file);
}// 渲染 JSON 数据为 HTML 表格，并插入到页面中
function renderTable(data) {// 获取用于显示表格的容器（一般是一个 <div id="output">）const output = document.querySelector("#output");// 清空上一次渲染的内容output.innerHTML = "";// 如果数据为空，显示提示文字并结束函数if (data.length === 0) {output.textContent = "没有数据";return;}// 创建一个新的 HTML 表格元素const table = document.createElement("table");table.style.border = "1"; // 设置表格边框（简易做法）// 创建表头（thead），使用数据的键（字段名）作为列名const thead = table.insertRow(); // 插入第一行作为表头Object.keys(data[0]).forEach(key => {const th = document.createElement("th"); // 创建表头单元格th.textContent = key; // 设置列名（字段名）thead.appendChild(th); // 将表头单元格添加到表头行中});// 遍历数据数组，为每一行数据创建表格行data.forEach(row => {const tr = table.insertRow(); // 创建新行Object.values(row).forEach(value => {const td = tr.insertCell(); // 创建单元格td.textContent = value;     // 填入单元格的值});});// 将完整表格添加到页面上的容器中output.appendChild(table);
}

结构总览 & 难理解的点

代码分为三大部分：

监听文件上传：UploadFie.addEventListener(...)
处理上传的文件内容并解析 Excel：handleFile 函数
将数据渲染成 HTML 表格：renderTable 函数

const data = new Uint8Array(e.target.result);

解释：
上面代码中：reader.readAsArrayBuffer(file); 我们通过 FileReader 的 readAsArrayBuffer() 方法来读取文件内容，读取完成后触发 reader.onload，其事件对象 e 中包含的 e.target.result 是一个 ArrayBuffer。

ArrayBuffer 是一种原始的、通用的二进制数据容器，不能直接读取内容，需要借助视图（如 Uint8Array, DataView, Float32Array 等）进行解析。

Uint8Array()

Uint8Array 是 JavaScript 中的一种类型化数组（TypedArray）。
它提供了对 ArrayBuffer 的结构化、字节级别的访问

const workbook = XLSX.read(data, { type: "array" });

XLSX.read() 要求的是字节数组
SheetJS 的 XLSX.read() 方法如果传入 {type: "array"}，它期望的输入是一个 Uint8Array，因此我们必须将原始的 ArrayBuffer 包装为 Uint8Array，否则 XLSX.read() 无法解析

🔬 ArrayBuffer VS Uint8Array