To create a JavaScript program that allows you to upload an Excel file and fetch the data to display it on a web page, you can use libraries like SheetJS (xlsx.js) to read Excel files in JavaScript. Here's a basic approach.
Steps
- Install SheetJS (xlsx.js)
- Create an HTML form for file upload
- Parse the uploaded Excel file
- Display the data on the webpage
Code Example
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Excel Data Upload</title>
</head>
<body>
<h1>Upload Excel File</h1>
<input type="file" id="upload" />
<table id="excelDataTable" border="1">
<!-- Data will be dynamically injected here -->
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script>
// Listen for file input changes
document.getElementById('upload').addEventListener('change', handleFile, false);
function handleFile(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const data = new Uint8Array(event.target.result);
const workbook = XLSX.read(data, { type: 'array' });
// Get first worksheet
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
// Convert sheet to JSON
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
// Display the data in a table
displayData(jsonData);
};
reader.readAsArrayBuffer(file);
}
function displayData(data) {
const table = document.getElementById('excelDataTable');
table.innerHTML = ''; // Clear any existing data
// Loop through rows and cells
data.forEach((row) => {
let rowElement = document.createElement('tr');
row.forEach((cell) => {
let cellElement = document.createElement('td');
cellElement.textContent = cell;
rowElement.appendChild(cellElement);
});
table.appendChild(rowElement);
});
}
</script>
</body>
</html>
Explanation
- File Upload: This HTML allows users to select an Excel file using an <input type="file">.
- File Reading: Using FileReader API, the uploaded file is read as an ArrayBuffer.
- SheetJS: The SheetJS library parses the Excel file and converts it to JSON format.
- Table Display: The data is then injected into an HTML table dynamically.
Join the conversation! Your thoughts help the community grow.