js读取本地excel文件展示在浏览器页面
时间: 2023-12-09 17:03:51 浏览: 58
要实现在浏览器页面中展示本地 Excel 文件,可以通过以下步骤实现:
1. 使用 JavaScript FileReader API 读取本地 Excel 文件,并将其转换为二进制数据。
2. 使用第三方库如 SheetJS 或 Handsontable 解析 Excel 文件,并将其转换为可视化的数据表格。
3. 将解析出的数据表格插入到 HTML 页面中,以展示在浏览器页面中。
以下是一个基本实现的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展示本地 Excel 文件</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" />
<div id="table"></div>
<script>
const fileInput = document.getElementById('fileInput');
const tableDiv = document.getElementById('table');
fileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
const data = new Uint8Array(event.target.result);
const workbook = XLSX.read(data, {type: 'array'});
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const json = XLSX.utils.sheet_to_json(worksheet, {header: 1});
const table = buildTable(json);
tableDiv.innerHTML = '';
tableDiv.appendChild(table);
};
reader.readAsArrayBuffer(file);
});
function buildTable(data) {
const table = document.createElement('table');
for (let i = 0; i < data.length; i++) {
const row = table.insertRow(-1);
for (let j = 0; j < data[i].length; j++) {
const cell = row.insertCell(-1);
cell.textContent = data[i][j];
}
}
return table;
}
</script>
</body>
</html>
```
这个示例中使用了 SheetJS 库来解析 Excel 文件,使用了 HTML 的 `<table>` 元素来展示数据表格。用户选择本地 Excel 文件后,会触发 `change` 事件,然后读取文件并解析成数据表格,并插入到 HTML 页面中。