HTML to PDF Converter | Free Online Tool by Daud Ali | earnapki.com

HTML to PDF Converter

Convert HTML code or webpages to PDF documents

Paste your HTML code:

<div class="preview-title">HTML Preview:</div>
                <iframe id="htmlPreview" style="width: 100%; height: 200px; border: none;"></iframe>
            </div>
            
            <button id="previewHtmlBtn">
                <i class="fas fa-eye"></i> Preview HTML
            </button>
        </div>
        
        <div class="tab-content" id="urlTab">
            <div class="input-area">
                <div class="input-group">
                    <label for="urlInput">Enter webpage URL:</label>
                    <input type="url" id="urlInput" placeholder="https://example.com">
                </div>
            </div>
        </div>
        
        <div class="conversion-animation" id="conversionAnimation">
            <div class="html-icon"></div>
            <div class="arrow"></div>
            <div class="pdf-icon"></div>
        </div>
        
        <div class="success-check" id="successCheck">
            <i class="fas fa-check-circle"></i>
        </div>
        
        <button id="convertBtn" disabled>
            <i class="fas fa-file-pdf"></i> Convert to PDF
        </button>
        
        <p id="status">Ready to convert</p>
        
        <button class="download-btn" id="downloadBtn">
            <i class="fas fa-download"></i> Download PDF
        </button>
        
        <div class="credits">
            Tool by <a href="https://earnapki.com" target="_blank">Daud Ali</a> – earnapki.com
        </div>
    </div>

<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
    
    <script>
        // DOM Elements
        const htmlTabBtn = document.querySelector('[data-tab="htmlTab"]');
        const urlTabBtn = document.querySelector('[data-tab="urlTab"]');
        const htmlTab = document.getElementById('htmlTab');
        const urlTab = document.getElementById('urlTab');
        const htmlInput = document.getElementById('htmlInput');
        const urlInput = document.getElementById('urlInput');
        const previewHtmlBtn = document.getElementById('previewHtmlBtn');
        const htmlPreviewContainer = document.getElementById('htmlPreviewContainer');
        const htmlPreview = document.getElementById('htmlPreview');
        const convertBtn = document.getElementById('convertBtn');
        const statusText = document.getElementById('status');
        const conversionAnimation = document.getElementById('conversionAnimation');
        const successCheck = document.getElementById('successCheck');
        const downloadBtn = document.getElementById('downloadBtn');

// Tab switching
        [htmlTabBtn, urlTabBtn].forEach(btn => {
            btn.addEventListener('click', () => {
                htmlTabBtn.classList.toggle('active', btn === htmlTabBtn);
                urlTabBtn.classList.toggle('active', btn === urlTabBtn);
                htmlTab.classList.toggle('active', btn === htmlTabBtn);
                urlTab.classList.toggle('active', btn === urlTabBtn);
                
                // Enable/disable convert button based on input
                checkInput();
            });
        });

// Preview HTML
        previewHtmlBtn.addEventListener('click', () => {
            if (htmlInput.value.trim()) {
                const previewDoc = htmlPreview.contentDocument || htmlPreview.contentWindow.document;
                previewDoc.open();
                previewDoc.write(htmlInput.value);
                previewDoc.close();
                htmlPreviewContainer.style.display = 'block';
            } else {
                alert('Please enter some HTML code first');
            }
        });

// Check input to enable/disable convert button
        function checkInput() {
            if (htmlTab.classList.contains('active')) {
                convertBtn.disabled = !htmlInput.value.trim();
            } else {
                convertBtn.disabled = !urlInput.value.trim();
            }
        }

// Input event listeners
        htmlInput.addEventListener('input', checkInput);
        urlInput.addEventListener('input', checkInput);

// Convert to PDF
        convertBtn.addEventListener('click', async () => {
            if (htmlTab.classList.contains('active')) {
                convertHtmlToPdf();
            } else {
                convertUrlToPdf();
            }
        });

async function convertHtmlToPdf() {
            const htmlContent = htmlInput.value.trim();
            if (!htmlContent) return;
            
            statusText.textContent = "Converting HTML to PDF...";
            convertBtn.disabled = true;
            conversionAnimation.style.display = 'flex';
            
            try {
                // Create a temporary div to hold our HTML
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = htmlContent;
                document.body.appendChild(tempDiv);
                
                // Configuration for html2pdf
                const opt = {
                    margin: 10,
                    filename: 'converted_html.pdf',
                    image: { type: 'jpeg', quality: 0.98 },
                    html2canvas: { scale: 2 },
                    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
                };
                
                // Simulate processing delay for animation
                await new Promise(resolve => setTimeout(resolve, 1500));
                
                // Generate PDF
                await html2pdf().set(opt).from(tempDiv).save();
                
                // Show success animation
                conversionAnimation.style.display = 'none';
                successCheck.style.display = 'block';
                statusText.textContent = "Conversion complete!";
                
                // Remove temporary div
                document.body.removeChild(tempDiv);
                
            } catch (error) {
                console.error(error);
                statusText.textContent = "Error converting HTML. Please try again.";
                conversionAnimation.style.display = 'none';
            } finally {
                convertBtn.disabled = false;
            }
        }

async function convertUrlToPdf() {
            const url = urlInput.value.trim();
            if (!url) return;
            
            statusText.textContent = "Converting webpage to PDF...";
            convertBtn.disabled = true;
            conversionAnimation.style.display = 'flex';
            
            try {
                // Validate URL
                if (!url.startsWith('http://') && !url.startsWith('https://')) {
                    throw new Error('Please enter a valid URL starting with http:// or https://');
                }
                
                // Simulate processing delay for animation
                await new Promise(resolve => setTimeout(resolve, 1500));
                
                // Configuration for html2pdf
                const opt = {
                    margin: 10,
                    filename: 'webpage.pdf',
                    image: { type: 'jpeg', quality: 0.98 },
                    html2canvas: { scale: 2 },
                    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
                };
                
                // Generate PDF from URL
                await html2pdf().set(opt).from(url).save();
                
                // Show success animation
                conversionAnimation.style.display = 'none';
                successCheck.style.display = 'block';
                statusText.textContent = "Conversion complete!";
                
            } catch (error) {
                console.error(error);
                statusText.textContent = error.message || "Error converting webpage. Please try again.";
                conversionAnimation.style.display = 'none';
            } finally {
                convertBtn.disabled = false;
            }
        }
    </script>
</body>
</html>

</div>

</article>

</main>
			
		
	</div>

</div> 
	</div>
<footer
class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon">
			<div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder">
	<div class="ast-builder-grid-row-container-inner">
					<div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row">
											<div class="site-footer-below-section-1 site-footer-section site-footer-section-1">
								<div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder">
				<div class="ast-footer-copyright"><p>Copyright © 2025 earnapki | Powered by <a href="https://wpastra.com" rel="nofollow noopener" target="_blank">Astra WordPress Theme</a></p>
</div>			</div>
						</div>
										</div>
			</div>

</div>
	</footer>
	</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/astra\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>

<div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both">
	<span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve">
                <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" />
                </svg></span>	<span class="screen-reader-text">Scroll to Top</span>
</div>

<script src="https://accounts.google.com/gsi/client"></script>
<script>
(()=>{async function handleCredentialResponse(response){try{const res=await fetch('https://earnapki.com/wp-login.php?action=googlesitekit_auth',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams(response)});if(res.ok && res.redirected){location.assign(res.url);}}catch(error){console.error(error);}}google.accounts.id.initialize({client_id:'G-BD5KN3QMQF',callback:handleCredentialResponse,library_name:'Site-Kit'});document.querySelectorAll('.googlesitekit-sign-in-with-google__frontend-output-button').forEach((siwgButtonDiv)=>{google.accounts.id.renderButton(siwgButtonDiv,{"theme":"outline","text":"signin_with","shape":"rectangular"});});})();
</script>

<style type="text/css" media="screen"></style>			<script>
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			<script src="https://earnapki.com/wp-includes/js/dist/vendor/react.min.js?ver=18.3.1.1" id="react-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/vendor/react-jsx-runtime.min.js?ver=18.3.1" id="react-jsx-runtime-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/vendor/react-dom.min.js?ver=18.3.1.1" id="react-dom-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/dom-ready.min.js?ver=f77871ff7694fffea381" id="wp-dom-ready-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script src="https://earnapki.com/wp-includes/js/dist/a11y.min.js?ver=3156534cc54473497e14" id="wp-a11y-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0" id="wp-polyfill-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/url.min.js?ver=6bf93e90403a1eec6501" id="wp-url-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/api-fetch.min.js?ver=3623a576c78df404ff20" id="wp-api-fetch-js"></script>
<script id="wp-api-fetch-js-after">
wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "https://earnapki.com/wp-json/" ) );
wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "cb23d6aa38" );
wp.apiFetch.use( wp.apiFetch.nonceMiddleware );
wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware );
wp.apiFetch.nonceEndpoint = "https://earnapki.com/wp-admin/admin-ajax.php?action=rest-nonce";
</script>
<script src="https://earnapki.com/wp-includes/js/dist/blob.min.js?ver=9113eed771d446f4a556" id="wp-blob-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/block-serialization-default-parser.min.js?ver=14d44daebf663d05d330" id="wp-block-serialization-default-parser-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/autop.min.js?ver=9fb50649848277dd318d" id="wp-autop-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/deprecated.min.js?ver=e1f84915c5e8ae38964c" id="wp-deprecated-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/dom.min.js?ver=f3a673a30f968c8fa314" id="wp-dom-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/escape-html.min.js?ver=6561a406d2d232a6fbd2" id="wp-escape-html-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/element.min.js?ver=a4eeeadd23c0d7ab1d2d" id="wp-element-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/is-shallow-equal.min.js?ver=e0f9f1d78d83f5196979" id="wp-is-shallow-equal-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/keycodes.min.js?ver=034ff647a54b018581d3" id="wp-keycodes-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/priority-queue.min.js?ver=9c21c957c7e50ffdbf48" id="wp-priority-queue-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/compose.min.js?ver=84bcf832a5c99203f3db" id="wp-compose-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/private-apis.min.js?ver=0f8478f1ba7e0eea562b" id="wp-private-apis-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/redux-routine.min.js?ver=8bb92d45458b29590f53" id="wp-redux-routine-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/data.min.js?ver=fe6c4835cd00e12493c3" id="wp-data-js"></script>
<script id="wp-data-js-after">
( function() {
	var userId = 0;
	var storageKey = "WP_DATA_USER_" + userId;
	wp.data
		.use( wp.data.plugins.persistence, { storageKey: storageKey } );
} )();
</script>
<script src="https://earnapki.com/wp-includes/js/dist/html-entities.min.js?ver=2cd3358363e0675638fb" id="wp-html-entities-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/rich-text.min.js?ver=74178fc8c4d67d66f1a8" id="wp-rich-text-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/shortcode.min.js?ver=b7747eee0efafd2f0c3b" id="wp-shortcode-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/warning.min.js?ver=ed7c8b0940914f4fe44b" id="wp-warning-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/blocks.min.js?ver=84530c06a3c62815b497" id="wp-blocks-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/vendor/moment.min.js?ver=2.30.1" id="moment-js"></script>
<script id="moment-js-after">
moment.updateLocale( 'en_US', {"months":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"week":{"dow":1},"longDateFormat":{"LT":"g:i a","LTS":null,"L":null,"LL":"F j, Y","LLL":"F j, Y g:i a","LLLL":null}} );
</script>
<script src="https://earnapki.com/wp-includes/js/dist/date.min.js?ver=85ff222add187a4e358f" id="wp-date-js"></script>
<script id="wp-date-js-after">
wp.date.setSettings( {"l10n":{"locale":"en_US","months":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"meridiem":{"am":"am","pm":"pm","AM":"AM","PM":"PM"},"relative":{"future":"%s from now","past":"%s ago","s":"a second","ss":"%d seconds","m":"a minute","mm":"%d minutes","h":"an hour","hh":"%d hours","d":"a day","dd":"%d days","M":"a month","MM":"%d months","y":"a year","yy":"%d years"},"startOfWeek":1},"formats":{"time":"g:i a","date":"F j, Y","datetime":"F j, Y g:i a","datetimeAbbreviated":"M j, Y g:i a"},"timezone":{"offset":0,"offsetFormatted":"0","string":"","abbr":""}} );
</script>
<script src="https://earnapki.com/wp-includes/js/dist/primitives.min.js?ver=aef2543ab60c8c9bb609" id="wp-primitives-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/components.min.js?ver=336a01176fa8097fbf37" id="wp-components-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/keyboard-shortcuts.min.js?ver=32686e58e84193ce808b" id="wp-keyboard-shortcuts-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/commands.min.js?ver=14ee29ad1743be844b11" id="wp-commands-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/notices.min.js?ver=673a68a7ac2f556ed50b" id="wp-notices-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/preferences-persistence.min.js?ver=9307a8c9e3254140a223" id="wp-preferences-persistence-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/preferences.min.js?ver=4aa23582b858c882a887" id="wp-preferences-js"></script>
<script id="wp-preferences-js-after">
( function() {
				var serverData = false;
				var userId = "0";
				var persistenceLayer = wp.preferencesPersistence.__unstableCreatePersistenceLayer( serverData, userId );
				var preferencesStore = wp.preferences.store;
				wp.data.dispatch( preferencesStore ).setPersistenceLayer( persistenceLayer );
			} ) ();
</script>
<script src="https://earnapki.com/wp-includes/js/dist/style-engine.min.js?ver=08cc10e9532531e22456" id="wp-style-engine-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/token-list.min.js?ver=3b5f5dcfde830ecef24f" id="wp-token-list-js"></script>
<script src="https://earnapki.com/wp-includes/js/dist/block-editor.min.js?ver=c8c5e4e00ad4a1c77679" id="wp-block-editor-js"></script>
<script src="https://earnapki.com/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js"></script>
<script id="wp-util-js-extra">
var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}};
</script>
<script src="https://earnapki.com/wp-includes/js/wp-util.min.js?ver=6.8.1" id="wp-util-js"></script>
<script src="https://earnapki.com/wp-content/plugins/pojo-accessibility/assets/build/gutenberg-custom-link.js?ver=42a2a59090c5731808c1" id="gutenberg-custom-link-js"></script>
<script id="astra-theme-js-js-extra">
var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""};
</script>
<script src="https://earnapki.com/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.11.2" id="astra-theme-js-js"></script>
<script id="ez-toc-scroll-scriptjs-js-extra">
var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":"","add_self_reference_link":""};
</script>
<script src="https://earnapki.com/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.74" id="ez-toc-scroll-scriptjs-js"></script>
<script src="https://earnapki.com/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script>
<script src="https://earnapki.com/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script>
<script id="ez-toc-js-js-extra">
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>","chamomile_theme_is_on":""};
</script>
<script src="https://earnapki.com/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.74-1746503347" id="ez-toc-js-js"></script>
			<script>
			/(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1);
			</script>
				</body>
</html>