|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<title>HTML Table to Word Converter</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
:root { |
|
|
--primary: #6366f1; |
|
|
--primary-dark: #4f46e5; |
|
|
--bg: #f9fafb; |
|
|
--surface: #ffffff; |
|
|
--text: #111827; |
|
|
--muted: #6b7280; |
|
|
--border: #e5e7eb; |
|
|
--error: #ef4444; |
|
|
--success: #10b981; |
|
|
--radius: 12px; |
|
|
--shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
margin: 0; |
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; |
|
|
background: var(--bg); |
|
|
color: var(--text); |
|
|
line-height: 1.6; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
padding: 2rem 1rem; |
|
|
} |
|
|
|
|
|
.app { |
|
|
width: 100%; |
|
|
max-width: 640px; |
|
|
} |
|
|
|
|
|
header { |
|
|
text-align: center; |
|
|
margin-bottom: 2rem; |
|
|
} |
|
|
|
|
|
h1 { |
|
|
font-size: 2.25rem; |
|
|
font-weight: 800; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.card { |
|
|
background: var(--surface); |
|
|
border-radius: var(--radius); |
|
|
box-shadow: var(--shadow); |
|
|
padding: 2rem; |
|
|
} |
|
|
|
|
|
.upload-zone { |
|
|
border: 2px dashed var(--border); |
|
|
border-radius: var(--radius); |
|
|
padding: 3rem 2rem; |
|
|
text-align: center; |
|
|
transition: border-color 0.3s, background-color 0.3s; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.upload-zone:hover { |
|
|
border-color: var(--primary); |
|
|
background-color: #f3f4ff; |
|
|
} |
|
|
|
|
|
.upload-zone.dragover { |
|
|
border-color: var(--primary); |
|
|
background-color: #e0e7ff; |
|
|
} |
|
|
|
|
|
.upload-icon { |
|
|
font-size: 3rem; |
|
|
color: var(--muted); |
|
|
margin-bottom: 0.5rem; |
|
|
} |
|
|
|
|
|
.upload-text { |
|
|
font-size: 1.125rem; |
|
|
font-weight: 600; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.upload-hint { |
|
|
color: var(--muted); |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.file-input { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.success { |
|
|
color: var(--success); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.error { |
|
|
color: var(--error); |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.info { |
|
|
color: var(--muted); |
|
|
margin-top: 0.5rem; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
margin-top: 2rem; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 1rem; |
|
|
} |
|
|
|
|
|
label { |
|
|
font-weight: 600; |
|
|
margin-bottom: 0.5rem; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
input[type="number"] { |
|
|
width: 100%; |
|
|
padding: 0.75rem; |
|
|
border: 1px solid var(--border); |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
input[type="number"]:focus { |
|
|
border-color: var(--primary); |
|
|
outline: none; |
|
|
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); |
|
|
} |
|
|
|
|
|
.preview { |
|
|
overflow-x: auto; |
|
|
margin-top: 2rem; |
|
|
} |
|
|
|
|
|
table { |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
th, td { |
|
|
padding: 0.75rem; |
|
|
border-bottom: 1px solid var(--border); |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
th { |
|
|
background-color: #f3f4f6; |
|
|
font-weight: 600; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
background: var(--primary); |
|
|
color: #fff; |
|
|
border: none; |
|
|
padding: 0.75rem 1.5rem; |
|
|
border-radius: 8px; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: background-color 0.3s; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
gap: 0.5rem; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background: var(--primary-dark); |
|
|
} |
|
|
|
|
|
.status { |
|
|
margin-top: 1rem; |
|
|
padding: 1rem; |
|
|
border-radius: var(--radius); |
|
|
} |
|
|
|
|
|
.status.success { |
|
|
background: #ecfdf5; |
|
|
color: var(--success); |
|
|
} |
|
|
|
|
|
.status.error { |
|
|
background: #fef2f2; |
|
|
color: var(--error); |
|
|
} |
|
|
|
|
|
.status.info { |
|
|
background: #f3f4f6; |
|
|
color: var(--muted); |
|
|
} |
|
|
|
|
|
@media (max-width: 600px) { |
|
|
h1 { |
|
|
font-size: 1.75rem; |
|
|
} |
|
|
|
|
|
.card { |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.upload-zone { |
|
|
padding: 2rem 1rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="app"> |
|
|
<header> |
|
|
<h1>HTML Table to Word Converter</h1> |
|
|
</header> |
|
|
|
|
|
<div class="card"> |
|
|
<form id="uploadForm"> |
|
|
<div class="upload-zone" id="dropZone"> |
|
|
<i class="fas fa-cloud-upload-alt upload-icon"></i> |
|
|
<p class="upload-text">Upload HTML File</p> |
|
|
<p class="upload-hint">Drag & drop or click to select</p> |
|
|
<input type="file" id="fileInput" class="file-input" accept=".html,.htm" /> |
|
|
</div> |
|
|
|
|
|
<div id="status" class="status" style="display: none;"></div> |
|
|
|
|
|
<div id="controls" class="controls" style="display: none;"> |
|
|
<div> |
|
|
<label for="skipRows">Rows to skip (from top)</label> |
|
|
<input type="number" id="skipRows" min="0" value="1" /> |
|
|
</div> |
|
|
<div> |
|
|
<label for="numColumns">Number of columns to import</label> |
|
|
<input type="number" id="numColumns" min="1" max="50" value="8" /> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="preview" class="preview" style="display: none;"> |
|
|
<h2>Extracted Table Preview</h2> |
|
|
<table id="previewTable"></table> |
|
|
</div> |
|
|
|
|
|
<button type="button" id="downloadBtn" class="btn" style="display: none;"> |
|
|
<i class="fas fa-download"></i>Download as Word (.docx) |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
const dropZone = document.getElementById('dropZone'); |
|
|
const statusDiv = document.getElementById('status'); |
|
|
const controlsDiv = document.getElementById('controls'); |
|
|
const previewDiv = document.getElementById('preview'); |
|
|
const previewTable = document.getElementById('previewTable'); |
|
|
const downloadBtn = document.getElementById('downloadBtn'); |
|
|
const skipRowsInput = document.getElementById('skipRows'); |
|
|
const numColumnsInput = document.getElementById('numColumns'); |
|
|
|
|
|
let extractedTable = null; |
|
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click()); |
|
|
|
|
|
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 files = e.dataTransfer.files; |
|
|
if (files.length) { |
|
|
handleFile(files[0]); |
|
|
} |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', () => { |
|
|
const file = fileInput.files[0]; |
|
|
if (file) { |
|
|
handleFile(file); |
|
|
} |
|
|
}); |
|
|
|
|
|
function handleFile(file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (e) => { |
|
|
try { |
|
|
const html = e.target.result; |
|
|
const tables = extractAllTables(html); |
|
|
const validTables = tables.filter(t => t && t.length && t[0].length >= 5); |
|
|
if (!validTables.length) { |
|
|
showStatus("No valid tables found in the uploaded HTML file.", 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const largest = validTables.reduce((max, cur) => (cur.length > max.length ? cur : max), validTables[0]); |
|
|
extractedTable = largest; |
|
|
|
|
|
const maxCols = largest[0].length; |
|
|
const maxRows = largest.length; |
|
|
|
|
|
showStatus(`Found ${validTables.length} table(s). Using the largest one with ${maxRows} rows and ${maxCols} columns.`, 'success'); |
|
|
|
|
|
skipRowsInput.max = Math.max(maxRows - 1, 0); |
|
|
skipRowsInput.value = maxRows <= 1 ? 0 : 1; |
|
|
|
|
|
numColumnsInput.max = maxCols; |
|
|
numColumnsInput.value = Math.min(8, maxCols); |
|
|
|
|
|
controlsDiv.style.display = 'block'; |
|
|
previewTable.innerHTML = ''; |
|
|
updatePreview(); |
|
|
} catch (err) { |
|
|
showStatus("An error occurred while processing the file.", 'error'); |
|
|
console.error(err); |
|
|
} |
|
|
}; |
|
|
reader.readAsText(file); |
|
|
} |
|
|
|
|
|
function extractAllTables(html) { |
|
|
const parser = new DOMParser(); |
|
|
const doc = parser.parseFromString(html, 'text/html'); |
|
|
const tables = doc.querySelectorAll('table'); |
|
|
return Array.from(tables).map(table => { |
|
|
const rows = Array.from(table.querySelectorAll('tr')); |
|
|
return rows.map(row => { |
|
|
const cells = Array.from(row.querySelectorAll('td, th')); |
|
|
return cells.map(cell => cell.textContent.trim()); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
function updatePreview() { |
|
|
if (!extractedTable) return; |
|
|
const skip = parseInt(skipRowsInput.value, 10); |
|
|
const cols = parseInt(numColumnsInput.value, 10); |
|
|
const sliced = extractedTable.slice(skip).map(row => row.slice(0, cols)); |
|
|
|
|
|
previewTable.innerHTML = ''; |
|
|
if (sliced.length > 0) { |
|
|
const thead = document.createElement('thead'); |
|
|
const tr = document.createElement('tr'); |
|
|
sliced[0].forEach(cell => { |
|
|
const th = document.createElement('th'); |
|
|
th.textContent = cell; |
|
|
tr.appendChild(th); |
|
|
}); |
|
|
thead.appendChild(tr); |
|
|
previewTable.appendChild(thead); |
|
|
|
|
|
const tbody = document.createElement('tbody'); |
|
|
for (let i = 1; i < sliced.length; i++) { |
|
|
if (sliced[i].every(c => !c)) continue; |
|
|
const tr = document.createElement('tr'); |
|
|
sliced[i].forEach(cell => { |
|
|
const td = document.createElement('td'); |
|
|
td.textContent = cell; |
|
|
tr.appendChild(td); |
|
|
}); |
|
|
tbody.appendChild(tr); |
|
|
} |
|
|
previewTable.appendChild(tbody); |
|
|
} |
|
|
|
|
|
previewDiv.style.display = 'block'; |
|
|
downloadBtn.style.display = 'inline-flex'; |
|
|
} |
|
|
|
|
|
skipRowsInput.addEventListener('input', updatePreview); |
|
|
numColumnsInput.addEventListener('input', updatePreview); |
|
|
|
|
|
downloadBtn.addEventListener('click', () => { |
|
|
if (!extractedTable) return; |
|
|
const skip = parseInt(skipRowsInput.value, 10); |
|
|
const cols = parseInt(numColumnsInput.value, 10); |
|
|
const sliced = extractedTable.slice(skip).map(row => row.slice(0, cols)); |
|
|
|
|
|
downloadTableAsDocx(sliced, 'extracted_table.docx'); |
|
|
}); |
|
|
|
|
|
function downloadTableAsDocx(table, filename) { |
|
|
let html = '<html><head><meta charset="UTF-8"></head><body><table>'; |
|
|
table.forEach(row => { |
|
|
html += '<tr>'; |
|
|
row.forEach(cell => { |
|
|
html += `<td>${cell}</td>`; |
|
|
}); |
|
|
html += '</tr>'; |
|
|
}); |
|
|
html += '</table></body></html>'; |
|
|
|
|
|
const blob = new Blob([html], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); |
|
|
const url = URL.createObjectURL(blob); |
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = filename; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
} |
|
|
|
|
|
function showStatus(message, type) { |
|
|
statusDiv.textContent = message; |
|
|
statusDiv.className = `status ${type}`; |
|
|
statusDiv.style.display = 'block'; |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
