`; const blob = new Blob([fullHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); previewFrame.src = url; }// ----- Tab Switching ----- tabBtns.forEach(btn => { btn.addEventListener('click', () => { tabBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); currentMode = btn.dataset.mode; if (currentMode === 'html') { htmlEditor.style.display = 'block'; richTextEditor.style.display = 'none'; } else { htmlEditor.style.display = 'none'; richTextEditor.style.display = 'block'; } updatePreview(); }); });// ----- Auto-preview on input ----- htmlEditor.addEventListener('input', updatePreview); richTextEditor.addEventListener('input', updatePreview); refreshPreviewBtn.addEventListener('click', updatePreview);// ----- Sample HTML ----- loadSampleBtn.addEventListener('click', () => { const sampleHTML = `

Welcome to HTML2PDF Pro

This is a sample document demonstrating HTML to PDF conversion.

Features

• Convert HTML code to PDF
• Rich text editing support
• Custom page sizes and orientation
• Fetch content from URLs

Sample Table

Product	Price	Quantity
Widget A	$25.00	150
Widget B	$35.50	200
Widget C	$42.00	175

Generated with HTML2PDF Pro

`; htmlEditor.value = sampleHTML; currentMode = 'html'; tabBtns.forEach(b => b.classList.remove('active')); document.querySelector('[data-mode="html"]').classList.add('active'); htmlEditor.style.display = 'block'; richTextEditor.style.display = 'none'; updatePreview(); setStatus('Sample HTML loaded.'); });// ----- Fetch URL ----- fetchURLBtn.addEventListener('click', async () => { const url = prompt('Enter URL to fetch HTML from:', 'https://example.com'); if (!url) return; setStatus('Fetching URL...'); showProgress(30); try { const proxyUrl = 'https://api.allorigins.win/raw?url=' + encodeURIComponent(url); const response = await fetch(proxyUrl); if (!response.ok) throw new Error('Failed to fetch'); const html = await response.text(); htmlEditor.value = html; currentMode = 'html'; tabBtns.forEach(b => b.classList.remove('active')); document.querySelector('[data-mode="html"]').classList.add('active'); htmlEditor.style.display = 'block'; richTextEditor.style.display = 'none'; updatePreview(); showProgress(100); setStatus('URL content loaded.'); setTimeout(hideProgress, 800); } catch (err) { setStatus('Error fetching URL. Try pasting HTML directly.'); hideProgress(); } });// ----- Clear ----- clearBtn.addEventListener('click', () => { htmlEditor.value = ''; richTextEditor.innerHTML = '

Start typing your rich text content here...

'; updatePreview(); setStatus('Cleared.'); });// ----- Convert to PDF ----- convertBtn.addEventListener('click', async () => { const content = getHTMLContent(); if (!content || content.trim().length < 10) { alert('Please add some HTML content to convert.'); return; } setStatus('Converting to PDF...'); showProgress(20); const pageSize = pageSizeSelect.value; const orientation = orientationSelect.value; const scale = parseFloat(scaleInput.value) || 2; const margin = marginSelect.value; // Create a temporary container for rendering const container = document.createElement('div'); container.style.position = 'absolute'; container.style.left = '-9999px'; container.style.top = '0'; container.style.width = '800px'; container.style.padding = margin === 'none' ? '0' : margin === 'small' ? '20px' : margin === 'large' ? '60px' : '40px'; container.style.backgroundColor = 'white'; container.style.fontFamily = "'Segoe UI', Roboto, sans-serif"; container.innerHTML = content; document.body.appendChild(container); try { const canvas = await html2canvas(container, { scale: scale, useCORS: true, logging: false, backgroundColor: '#ffffff', }); document.body.removeChild(container); showProgress(60); const imgData = canvas.toDataURL('image/png'); const imgWidth = canvas.width; const imgHeight = canvas.height; // PDF page dimensions const dimensions = { A4: [595.28, 841.89], LETTER: [612, 792], LEGAL: [612, 1008], A3: [841.89, 1190.55] }; let [pgWidth, pgHeight] = dimensions[pageSize] || dimensions.LETTER; if (orientation === 'landscape') [pgWidth, pgHeight] = [pgHeight, pgWidth]; const pdfDoc = await PDFLib.PDFDocument.create(); // Calculate how many pages needed const scaleFactor = pgWidth / imgWidth; const pageImgHeight = imgHeight * scaleFactor; const pagesNeeded = Math.ceil(pageImgHeight / pgHeight); const imgBytes = await fetch(imgData).then(res => res.arrayBuffer()); const image = await pdfDoc.embedPng(imgBytes); for (let i = 0; i < pagesNeeded; i++) { const page = pdfDoc.addPage([pgWidth, pgHeight]); const yOffset = i * pgHeight; page.drawImage(image, { x: 0, y: -yOffset, width: pgWidth, height: pageImgHeight, }); } showProgress(90); const pdfBytes = await pdfDoc.save(); const blob = new Blob([pdfBytes], { type: 'application/pdf' }); saveAs(blob, 'converted-html.pdf'); showProgress(100); setStatus('PDF downloaded successfully!'); setTimeout(hideProgress, 800); } catch (err) { document.body.removeChild(container); setStatus('Error: ' + err.message); hideProgress(); } });// ----- Initial Load ----- htmlEditor.value = `

HTML2PDF Pro

Start editing this HTML or paste your own code.

Click Convert to PDF when ready.

`; updatePreview(); setStatus('Ready. Edit HTML or switch to Rich Text mode.'); })();