Excel to HTML Converter — Free, Browser-Based | SmallStudyTools
Upload an .xlsx file and get a real, semantic HTML table, right in your browser — nothing is uploaded to a server. Pro Mode adds multi-sheet export, header row control, basic styling, zebra striping, captions, and numeric alignment.
Add to Favorites
Share This Tool
● Pro Version is Free for now
Simple
Pro — Full Control
✓ Bulk convert multiple files at once ·
Drag & drop your .xlsx file here
or click to browse — only .xlsx files are accepted
Browse Files
+ Add Another File
</> Convert to HTML Off = only the first sheet is converted. On = every sheet gets its own heading and table.
Combine all sheets
Off by default · on = one heading + table per sheet
🏷️ First Row as Header PRO
Turns the first row into real <th> header cells inside a <thead>.
Use first row as header
On by default · off = every row is a plain data row
Embeds a clean <style> block — borders, padding, header background.
Include basic styling
On by default · off = bare, unstyled table markup
Shades alternating rows via CSS — needs Basic Styling turned on.
Alternate row shading
Off by default
Adds a real <caption> element above each table — the sheet name when combining sheets, or the file name otherwise.
Add caption with sheet/file name
Off by default
🔢 Right-Align Numbers PRO
Auto-detects columns that are entirely numeric and right-aligns just those <th>/<td> cells.
Right-align numeric columns
Off by default · detected automatically per column
`;
}// ── CONVERSION ────────────────────────────────────────────────
async function startConversion() {
if (!queuedFiles.length || converting) return;
converting = true;
clearErr();
updateConvertBtn();
document.getElementById('progressWrap').classList.add('show');
fileResults = [];const allSheets = isPro ? allSheetsOn : false;
const hasHeader = isPro ? headerRowOn : true;
const styled = isPro ? stylingOn : true;
const zebra = isPro ? (zebraOn && stylingOn) : false;
const showCaption = isPro ? captionOn : false;
const rightAlign = isPro ? rightAlignNumeric : false;
const totalFiles = queuedFiles.length;try {
for (let fi = 0; fi < queuedFiles.length; fi++) {
const qf = queuedFiles[fi];
setProgress(`Converting "${qf.file.name}"...`, (fi + 0.5) / totalFiles);
await new Promise(r => setTimeout(r, 0));
const buf = await qf.file.arrayBuffer();
const wb = XLSX.read(buf, { type: 'array' });
const sheetNames = allSheets ? wb.SheetNames : [wb.SheetNames[0]];
const sheetsData = sheetNames.map(sn => ({
name: sn,
rows: XLSX.utils.sheet_to_json(wb.Sheets[sn], { header: 1, raw: false, defval: '' }),
}));
const base = qf.file.name.replace(/\.xlsx$/i, '');
const fullHtml = buildFullHtmlForWorkbook(sheetsData, hasHeader, base, styled, zebra, allSheets, showCaption, rightAlign);
let totalRows = 0, maxCols = 0;
sheetsData.forEach(s => {
totalRows += hasHeader ? Math.max(0, s.rows.length - 1) : s.rows.length;
maxCols = Math.max(maxCols, s.rows.length ? s.rows[0].length : 0);
});
fileResults.push({ id: qf.id, name: base, text: fullHtml, rowCount: totalRows, colCount: maxCols, sheetCount: sheetsData.length });
}
renderResults();
document.getElementById('resultsCard').classList.add('show');
document.getElementById('resultsCard').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
toast(`Converted ${fileResults.length} file${fileResults.length === 1 ? '' : 's'} to HTML!`);
} catch (e) {
showErr('Something went wrong converting that file. Please make sure it isn\'t corrupted, and try again.');
} finally {
converting = false;
document.getElementById('progressWrap').classList.remove('show');
updateConvertBtn();
}
}function setProgress(label, frac) {
document.getElementById('progressLabel').textContent = label;
document.getElementById('progressFill').style.width = Math.min(100, Math.max(4, frac * 100)) + '%';
}// ── RESULTS / DOWNLOADS ───────────────────────────────────────
function renderResults() {
const wrap = document.getElementById('fileResultsList');
wrap.innerHTML = fileResults.map(fr => `
${escHtml(fr.name)}.html
${fr.sheetCount} sheet${fr.sheetCount === 1 ? '' : 's'} · ${fr.rowCount} row${fr.rowCount === 1 ? '' : 's'} · ${fr.colCount} column${fr.colCount === 1 ? '' : 's'} · ${formatBytes(fr.text.length)}
${escHtml(fr.text.slice(0, 700))}${fr.text.length > 700 ? '\n…' : ''}
`).join('');const topActions = document.getElementById('resultsTopActions');
topActions.innerHTML = fileResults.length > 1
? `
`
: '';
}function copyResult(fileId) {
const fr = fileResults.find(f => f.id === fileId);
if (!fr) return;
navigator.clipboard.writeText(fr.text)
.then(() => toast('Copied to clipboard!'))
.catch(() => toast('Could not copy — try the Download button instead'));
}function downloadResult(fileId) {
const fr = fileResults.find(f => f.id === fileId);
if (!fr) return;
const blob = new Blob([fr.text], { type: 'text/html' });
triggerBlobDownload(blob, `${fr.name}.html`);
toast('HTML file downloaded!');
}async function downloadEverythingZip() {
if (!fileResults.length) return;
const zip = new JSZip();
fileResults.forEach(fr => { zip.file(`${fr.name}.html`, fr.text); });
const blob = await zip.generateAsync({ type: 'blob' });
triggerBlobDownload(blob, 'excel-to-html-converted.zip');
toast('ZIP downloaded!');
}function triggerBlobDownload(blob, filename) {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = filename; a.click();
setTimeout(() => URL.revokeObjectURL(url), 4000);
}function resetTool() {
queuedFiles = [];
fileResults = [];
renderFileChips();
updateConvertBtn();
document.getElementById('resultsCard').classList.remove('show');
document.getElementById('mainCol').scrollIntoView({ behavior: 'smooth', block: 'start' });
}// ── SHEET HANDLING / HEADER / STYLING / ZEBRA (pro) ─────────────
function toggleAllSheets() {
if (!isPro) { toast('Multi-sheet export is part of Pro Mode'); return; }
allSheetsOn = !allSheetsOn;
document.getElementById('allSheetsSwitch').classList.toggle('on', allSheetsOn);
document.getElementById('allSheetsSwitch').setAttribute('aria-checked', String(allSheetsOn));
}
function toggleHeaderRow() {
if (!isPro) { toast('Header row control is part of Pro Mode'); return; }
headerRowOn = !headerRowOn;
document.getElementById('headerSwitch').classList.toggle('on', headerRowOn);
document.getElementById('headerSwitch').setAttribute('aria-checked', String(headerRowOn));
}
function toggleStyling() {
if (!isPro) { toast('Styling control is part of Pro Mode'); return; }
stylingOn = !stylingOn;
document.getElementById('stylingSwitch').classList.toggle('on', stylingOn);
document.getElementById('stylingSwitch').setAttribute('aria-checked', String(stylingOn));
updateZebraAvailability();
}
function toggleZebra() {
if (!isPro) { toast('Zebra striping is part of Pro Mode'); return; }
if (!stylingOn) { toast('Turn on Basic Styling first — zebra striping is a CSS rule'); return; }
zebraOn = !zebraOn;
document.getElementById('zebraSwitch').classList.toggle('on', zebraOn);
document.getElementById('zebraSwitch').setAttribute('aria-checked', String(zebraOn));
}
function toggleCaption() {
if (!isPro) { toast('Table caption is part of Pro Mode'); return; }
captionOn = !captionOn;
document.getElementById('captionSwitch').classList.toggle('on', captionOn);
document.getElementById('captionSwitch').setAttribute('aria-checked', String(captionOn));
}
function toggleRightAlign() {
if (!isPro) { toast('Right-align numeric columns is part of Pro Mode'); return; }
rightAlignNumeric = !rightAlignNumeric;
document.getElementById('rightAlignSwitch').classList.toggle('on', rightAlignNumeric);
document.getElementById('rightAlignSwitch').setAttribute('aria-checked', String(rightAlignNumeric));
}
function updateZebraAvailability() {
const sw = document.getElementById('zebraSwitch');
const sub = document.getElementById('zebraSub');
if (!sw) return;
sw.disabled = !stylingOn;
if (sub) sub.textContent = stylingOn ? 'Off by default' : 'Off by default · requires styling to be on';
}// ── MODE ──────────────────────────────────────────────────────
function setMode(mode) {
isPro = mode === 'pro';
document.getElementById('btnSimple').classList.toggle('active', !isPro);
document.getElementById('btnPro').classList.toggle('active', isPro);
document.body.classList.toggle('pro-mode', isPro);
const pb = document.getElementById('proBar'); if (pb) pb.style.display = isPro ? 'flex' : 'none';
document.getElementById('fileInput').multiple = isPro;
document.getElementById('uploadCardTitle').textContent = isPro ? 'Upload Your Excel Files' : 'Upload Your Excel File';
document.getElementById('dropzoneHint').textContent = isPro
? 'or click to browse — only .xlsx files are accepted, up to ' + MAX_FILES_PRO + ' at once'
: 'or click to browse — only .xlsx files are accepted';
if (!isPro && queuedFiles.length > 1) {
queuedFiles = queuedFiles.slice(0, 1);
renderFileChips();
toast('Switched to Simple Mode — only the first file was kept');
}
if (!isPro) {
allSheetsOn = false;
document.getElementById('allSheetsSwitch').classList.remove('on');
document.getElementById('allSheetsSwitch').setAttribute('aria-checked', 'false');
headerRowOn = true;
document.getElementById('headerSwitch').classList.add('on');
document.getElementById('headerSwitch').setAttribute('aria-checked', 'true');
stylingOn = true;
document.getElementById('stylingSwitch').classList.add('on');
document.getElementById('stylingSwitch').setAttribute('aria-checked', 'true');
zebraOn = false;
document.getElementById('zebraSwitch').classList.remove('on');
document.getElementById('zebraSwitch').setAttribute('aria-checked', 'false');
updateZebraAvailability();
captionOn = false;
document.getElementById('captionSwitch').classList.remove('on');
document.getElementById('captionSwitch').setAttribute('aria-checked', 'false');
rightAlignNumeric = false;
document.getElementById('rightAlignSwitch').classList.remove('on');
document.getElementById('rightAlignSwitch').setAttribute('aria-checked', 'false');
}
updateConvertBtn();
}// ── UTILS ─────────────────────────────────────────────────────
function escHtml(s) { return String(s || '').replace(/&/g, '&').replace(//g, '>'); }
function toast(msg) { const t = document.getElementById('toast'); t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 2800); }
function formatBytes(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(0) + ' KB';
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
}
