Client-Side HTML to PDF Converter

HTML to PDF Converter

Convert the HTML or text below into a downloadable PDF document.

Content Input

Paste your HTML or plain text here:

<div class="flex-1">
                    <label for="fileName" class="block text-sm font-medium text-gray-700">Output Filename:</label>
                    <input type="text" id="fileName" value="document-export" class="mt-1 w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                </div>

<div class="flex-1">
                    <label for="pdfTitle" class="block text-sm font-medium text-gray-700">PDF Document Title:</label>
                    <input type="text" id="pdfTitle" value="Generated PDF" class="mt-1 w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                </div>
            </div>

<button id="convertBtn" class="mt-8 w-full flex items-center justify-center px-6 py-3 border border-transparent text-lg font-bold rounded-lg shadow-xl text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 disabled:bg-indigo-400" onclick="convertToPDF()">
                Convert & Download PDF
            </button>
        </div>

<div id="status" class="hidden text-center p-4 rounded-lg text-sm font-medium transition duration-300"></div>
    </div>

<div class="hidden-container">
        <div id="contentToConvert">
            
        </div>
    </div>

/**
         * Displays a status message to the user.
         * @param {string} message The message text.
         * @param {'success'|'error'|'loading'} type The type of message.
         */
        function setStatus(message, type) {
            statusDiv.classList.remove('hidden');
            statusDiv.textContent = message;
            
            statusDiv.classList.remove('bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800', 'bg-yellow-100', 'text-yellow-800');
            convertBtn.disabled = true;

if (type === 'success') {
                statusDiv.classList.add('bg-green-100', 'text-green-800');
                convertBtn.disabled = false;
            } else if (type === 'error') {
                statusDiv.classList.add('bg-red-100', 'text-red-800');
                convertBtn.disabled = false;
            } else if (type === 'loading') {
                statusDiv.classList.add('bg-yellow-100', 'text-yellow-800');
                // Use innerHTML for loading spinner
                statusDiv.innerHTML = `<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-yellow-800 inline-block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> ${message}`;
            }
        }

/**
         * Main function to convert the HTML content to a downloadable PDF.
         */
        async function convertToPDF() {
            const rawHtml = htmlInput.value.trim();
            let filename = fileNameInput.value.trim() || 'export';
            const title = pdfTitleInput.value.trim();

if (!rawHtml) {
                setStatus('Please paste some HTML or text content to convert.', 'error');
                return;
            }

setStatus('Rendering content...', 'loading');

// 1. Inject the HTML content into the hidden container
            contentContainer.innerHTML = rawHtml;

try {
                // 2. Use html2canvas to render the content container as a canvas (image)
                const canvas = await html2canvas(contentContainer, {
                    scale: 2, // Use a higher scale for better resolution in the PDF
                    logging: false,
                    allowTaint: true,
                    useCORS: true,
                    scrollX: 0,
                    scrollY: 0,
                    windowWidth: contentContainer.scrollWidth,
                    windowHeight: contentContainer.scrollHeight,
                });

setStatus('Generating PDF...', 'loading');

// 3. Initialize jsPDF
                const pdf = new jsPDF('p', 'mm', 'a4');
                const pdfWidth = pdf.internal.pageSize.getWidth();
                const pdfHeight = pdf.internal.pageSize.getHeight();

// Get the image data from the canvas
                const imgData = canvas.toDataURL('image/png');
                const imgWidth = pdfWidth;
                const imgHeight = (canvas.height * imgWidth) / canvas.width;

let heightLeft = imgHeight;
                let position = 0;

// 4. Add the image to the PDF, handling multi-page content
                pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                heightLeft -= pdfHeight;

while (heightLeft >= 0) {
                    position = heightLeft - imgHeight;
                    pdf.addPage();
                    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
                    heightLeft -= pdfHeight;
                }

// 5. Add meta-data and save the file
                pdf.setProperties({
                    title: title,
                    subject: 'HTML to PDF Conversion',
                    author: 'Client-Side Converter',
                    keywords: 'html, pdf, converter, jspdf, html2canvas',
                    creator: 'Client-Side Converter'
                });

pdf.save(`${filename}.pdf`);
                
                setStatus('Conversion successful! Your file has been downloaded.', 'success');

} catch (error) {
                console.error("Conversion Error:", error);
                setStatus(`An error occurred during conversion: ${error.message}`, 'error');
            } finally {
                // Clean up the temporary content container
                contentContainer.innerHTML = '';
            }
        }
    </script>
</body>
</html>

</div>
</div>

</article>

<nav class="navigation post-navigation" aria-label="Posts">
				<div class="nav-links"><div class="nav-previous"><a title="Compress PDF" href="https://protoolskit.com/compress-pdf/" rel="prev"><span class="ast-post-nav" aria-hidden="true"><span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z'></path></svg></span> Previous</span> <p> Compress PDF </p></a></div><div class="nav-next"><a title="Rotate PDF" href="https://protoolskit.com/rotate-pdf/" rel="next"><span class="ast-post-nav" aria-hidden="true">Next <span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'></path></svg></span></span> <p> Rotate PDF </p></a></div></div>
		</nav>		<div id="comments" class="comments-area comment-form-position-below ">
	
	
	
	
		<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html-to-pdf/#respond" style="display:none;">Cancel Reply</a></small></h3><form action="https://protoolskit.com/wp-comments-post.php" method="post" id="ast-commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><div class="ast-row comment-textarea"><fieldset class="comment-form-comment"><legend class ="comment-form-legend"></legend><div class="comment-form-textarea ast-grid-common-col"><label for="comment" class="screen-reader-text">Type here..</label><textarea id="comment" name="comment" placeholder="Type here.." cols="45" rows="8" aria-required="true">

Name*

Email*

Website