PDF โ†’ HTML Converter

Upload a PDF, drag & drop to reorder pages, then export as HTML

Drop your PDF here

or click to browse from your device

Processing...
๐Ÿ“„ โ€” ยท 0 pages
Drag cards to reorder pages  ยท  Hover and click โœ• to delete a page
๐Ÿ“„ Page Order
โœจ Generated HTML

๐Ÿ“„ Converted PDF โ€” ${pageOrder.length} page${pageOrder.length !== 1 ? 's' : ''}

${pagesHTML}
`; progressWrap.classList.remove('visible'); outputSection.classList.add('visible'); // Preview const blob = new Blob([generatedHTML], { type: 'text/html' }); previewFrame.src = URL.createObjectURL(blob); codeDisplay.textContent = generatedHTML; showToast('HTML generated successfully!', 'success'); outputSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // Tab switching function activateTab(tab) { document.querySelectorAll('.tab-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.tab === tab); }); document.getElementById('previewPanel').style.display = tab === 'preview' ? 'block' : 'none'; document.getElementById('codePanel').style.display = tab === 'code' ? 'block' : 'none'; } // Event Listeners browseBtn.addEventListener('click', () => fileInput.click()); fileInput.addEventListener('change', () => { if (fileInput.files[0]) loadPDF(fileInput.files[0]); }); uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.classList.add('dragover'); }); uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover')); uploadZone.addEventListener('drop', (e) => { e.preventDefault(); uploadZone.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type === 'application/pdf') loadPDF(file); else showToast('Please drop a valid PDF file.', 'error'); }); document.getElementById('btnReset').addEventListener('click', () => reset(true)); document.getElementById('btnReverseAll').addEventListener('click', () => { if (pageOrder.length) { pageOrder.reverse(); renderGrid(); outputSection.classList.remove('visible'); showToast('Page order reversed.', 'success'); } }); document.getElementById('btnConvert').addEventListener('click', convertToHTML); document.querySelectorAll('.tab-btn').forEach(btn => { btn.addEventListener('click', () => activateTab(btn.dataset.tab)); }); document.getElementById('btnDownload').addEventListener('click', () => { if (!generatedHTML) return; const a = document.createElement('a'); a.href = URL.createObjectURL(new Blob([generatedHTML], { type: 'text/html' })); a.download = 'converted.html'; a.click(); showToast('Download started!', 'success'); }); document.getElementById('btnCopy').addEventListener('click', () => { if (!generatedHTML) return; navigator.clipboard.writeText(generatedHTML) .then(() => showToast('Copied to clipboard!', 'success')) .catch(() => showToast('Copy failed. Try the download button.', 'error')); });