<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XLSX to CSV Viewer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background: #f9f9f9;
}
.container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
max-width: 800px;
margin: auto;
}
textarea {
width: 100%;
height: 300px;
margin-top: 10px;
font-family: monospace;
}
h1 {
color: #333;
}
.dropzone {
margin: 20px 0;
padding: 40px;
border: 2px dashed #ccc;
border-radius: 10px;
text-align: center;
background-color: #fafafa;
transition: background-color 0.2s;
}
.dropzone.dragover {
background-color: #e6f7ff;
border-color: #00aaff;
}
</style>
</head>
<body>
<div class="container">
<h1>XLSX to CSV Viewer</h1>
<div id="dropzone" class="dropzone">Drop .xlsx file here or click to upload</div>
<textarea id="csvOutput" placeholder="CSV output will appear here..."></textarea>
</div>
<script>
var gk_isXlsx = true;
var gk_xlsxFileLookup = {};
var gk_fileData = {};
function filledCell(cell) {
return cell !== '' && cell != null;
}
function loadFileData(filename) {
if (gk_isXlsx && gk_xlsxFileLookup[filename]) {
try {
var workbook = XLSX.read(gk_fileData[filename], { type: 'base64' });
var firstSheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[firstSheetName];
var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1, blankrows: false, defval: '' });
var filteredData = jsonData.filter(row => row.some(filledCell));
var headerRowIndex = filteredData.findIndex((row, index) => {
const currentFilled = row.filter(filledCell).length;
const nextFilled = filteredData[index + 1]?.filter(filledCell).length || 0;
return currentFilled >= nextFilled;
});
if (headerRowIndex === -1 || headerRowIndex > 25) {
headerRowIndex = 0;
}
const trimmedData = filteredData.slice(headerRowIndex);
const tempSheet = XLSX.utils.aoa_to_sheet(trimmedData);
const csv = XLSX.utils.sheet_to_csv(tempSheet);
return csv;
} catch (e) {
console.error('Error loading XLSX file:', e);
return "";
}
}
return gk_fileData[filename] || "";
}
const dropzone = document.getElementById('dropzone');
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('dragover');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('dragover');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('dragover');
const file = e.dataTransfer.files[0];
handleFile(file);
});
dropzone.addEventListener('click', () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.xlsx';
input.onchange = (e) => handleFile(e.target.files[0]);
input.click();
});
function handleFile(file) {
if (file && file.name.endsWith('.xlsx')) {
const reader = new FileReader();
reader.onload = function(evt) {
const data = evt.target.result.split(',')[1];
gk_xlsxFileLookup[file.name] = true;
gk_fileData[file.name] = data;
const csv = loadFileData(file.name);
document.getElementById('csvOutput').value = csv;
};
reader.readAsDataURL(file);
} else {
alert('Please upload a valid .xlsx file.');
}
}
</script>
</body>
</html>