怎么用js自动读取本地固定xls表格,并将内容显示在html页面
要使用JavaScript自动读取本地固定xls表格文件并在HTML页面中显示内容,可以采用以下步骤:
1、创建一个 HTML 文件。在其中创建一个具有 ID 的元素和一个具有 ID 的
元素。<!DOCTYPE html>
<html>
<head>
<title>Excel to HTML</title>
</head>
<body>
<input type="file" id="input"/>
<br><br>
<table id="table"></table>
<script src="exceltohtml.js"></script>
</body>
</html>
2、使用 JavaScript 创建一个函数来处理文件上传事件,并将 Excel 格式的数据转换为 HTML 表格格式。可以使用 js-xlsx 库https://github.com/SheetJS/js-xlsx 来实现将 Excel 文件转换为 JSON 数据。
function handleFile() {
const inputFile = document.getElementById("input").files[0];
const reader = new FileReader();
reader.readAsBinaryString(inputFile);
reader.onload = function(event) {
const data = event.target.result;
const workbook = XLSX.read(data, {type: 'binary'});
const sheetName = workbook.SheetNames[0];
const sheetData = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {header: 1});
const tableEl = document.getElementById("table");
// 创建表头
let tr = document.createElement("tr");
for(let i=0;i<sheetData[0].length;i++){
let th = document.createElement("th");
th.innerHTML=sheetData[0][i];
tr.appendChild(th);
}
tableEl.appendChild(tr);
// 插入每行数据
for(let i=1;i<sheetData.length;i++){
let tr = document.createElement("tr");
for(let j=0;j<sheetData[i].length;j++){
let td = document.createElement("td");
td.innerHTML=sheetData[i][j];
tr.appendChild(td);
}
tableEl.appendChild(tr);
}
};
}
3、将 js-xlsx 库引入到 HTML 文件中。
<script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
4、在 HTML 文件中添加对刚刚创建的函数的调用,并将 HTML、CSS 样式应用于表。
<script>
input.onchange = handleFile;
</script>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #e6e6e6;
}
</style>
这样,当用户通过在页面上选择文件并上传时,JavaScript 函数会自动读取 Excel 表中的内容,并将其转换为 HTML 表格格式,并显示在网页上。