HTML to PDF Converter - AiCalculator.in HTML to PDF Converter
Convert your HTML code to professional PDF documents instantly
📝
Live Preview
See your HTML rendered in real-time as you type
📄
Instant PDF
Download high-quality PDF with one click
📱
Responsive
Works perfectly on all devices and screen sizes
👁️
Live Preview
📄
Your HTML preview will appear here
Start typing in the text area above
Generated by AiCalculator.in
💡 Pro Tip: You can include CSS styles within <style> tags and even JavaScript within <script> tags in your HTML code for more advanced documents.
`;this.initializeEventListeners();
this.loadFromStorage();
}initializeEventListeners() {
this.htmlInput.addEventListener('input', () => {
this.updatePreview();
this.saveToStorage();
});this.downloadBtn.addEventListener('click', () => {
this.generatePDF();
});this.clearBtn.addEventListener('click', () => {
this.clearInput();
});this.sampleBtn.addEventListener('click', () => {
this.loadSample();
});// Auto-resize textarea
this.htmlInput.addEventListener('input', () => {
this.htmlInput.style.height = 'auto';
this.htmlInput.style.height = Math.max(200, this.htmlInput.scrollHeight) + 'px';
});
}updatePreview() {
const htmlCode = this.htmlInput.value.trim();
if (!htmlCode) {
this.previewContent.innerHTML = `
📄
Your HTML preview will appear here
Start typing in the text area above
`;
return;
}try {
// Create a safe preview
const previewHTML = this.sanitizeHTML(htmlCode);
this.previewContent.innerHTML = previewHTML;
this.hideStatus();
} catch (error) {
this.showStatus('Error rendering preview: ' + error.message, 'error');
}
}sanitizeHTML(html) {
// Basic sanitization for preview
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
// Remove potentially harmful scripts for preview
const scripts = tempDiv.querySelectorAll('script');
scripts.forEach(script => {
const newScript = document.createElement('div');
newScript.textContent = '';
newScript.style.color = '#999';
newScript.style.fontStyle = 'italic';
script.parentNode.replaceChild(newScript, script);
});return tempDiv.innerHTML;
}generatePDF() {
const htmlCode = this.htmlInput.value.trim();
if (!htmlCode) {
this.showStatus('Please enter some HTML code first', 'error');
return;
}this.setLoadingState(true);
this.showStatus('Generating PDF... Please wait', 'info');// Create a temporary container for PDF generation
const tempContainer = document.createElement('div');
tempContainer.style.position = 'absolute';
tempContainer.style.left = '-9999px';
tempContainer.style.top = '0';
tempContainer.style.width = '210mm'; // A4 width
tempContainer.style.background = 'white';
tempContainer.style.padding = '20px';
tempContainer.style.fontFamily = 'Arial, sans-serif';
// Add the HTML content
tempContainer.innerHTML = htmlCode;
// Add watermark
const watermark = document.createElement('div');
watermark.innerHTML = 'Generated by AiCalculator.in';
watermark.style.cssText = `
position: absolute;
bottom: 20px;
right: 30px;
font-size: 12px;
color: #999;
opacity: 0.7;
font-style: italic;
z-index: 1000;
`;
tempContainer.appendChild(watermark);
document.body.appendChild(tempContainer);const options = {
margin: [10, 10, 10, 10],
filename: 'aicalculator.in.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 2,
useCORS: true,
allowTaint: true,
backgroundColor: '#ffffff'
},
jsPDF: {
unit: 'mm',
format: 'a4',
orientation: 'portrait',
compress: true
}
};html2pdf().set(options).from(tempContainer).save().then(() => {
document.body.removeChild(tempContainer);
this.setLoadingState(false);
this.showStatus('PDF downloaded successfully! 🎉', 'success');
}).catch((error) => {
document.body.removeChild(tempContainer);
this.setLoadingState(false);
this.showStatus('Error generating PDF: ' + error.message, 'error');
console.error('PDF generation error:', error);
});
}setLoadingState(loading) {
if (loading) {
this.loadingSpinner.style.display = 'block';
this.downloadBtn.disabled = true;
this.downloadBtn.style.opacity = '0.7';
} else {
this.loadingSpinner.style.display = 'none';
this.downloadBtn.disabled = false;
this.downloadBtn.style.opacity = '1';
}
}clearInput() {
this.htmlInput.value = '';
this.updatePreview();
this.saveToStorage();
this.showStatus('Input cleared', 'info');
setTimeout(() => this.hideStatus(), 2000);
}loadSample() {
this.htmlInput.value = this.sampleHTML;
this.updatePreview();
this.saveToStorage();
this.showStatus('Sample HTML loaded', 'success');
setTimeout(() => this.hideStatus(), 2000);
}showStatus(message, type) {
this.statusMessage.textContent = message;
this.statusMessage.className = `status-message status-${type}`;
this.statusMessage.style.display = 'flex';
if (type === 'success' || type === 'info') {
setTimeout(() => this.hideStatus(), 4000);
}
}hideStatus() {
this.statusMessage.style.display = 'none';
}saveToStorage() {
try {
const data = {
htmlContent: this.htmlInput.value,
timestamp: Date.now()
};
// Use a simple variable instead of localStorage
window.converterData = data;
} catch (error) {
console.log('Storage not available, continuing without save feature');
}
}loadFromStorage() {
try {
const data = window.converterData;
if (data && data.htmlContent) {
this.htmlInput.value = data.htmlContent;
this.updatePreview();
}
} catch (error) {
console.log('Storage not available, starting fresh');
}
}
}// Initialize the converter when the page loads
document.addEventListener('DOMContentLoaded', () => {
new HTMLToPDFConverter();
});// Handle page visibility for better performance
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// Re-focus on input when page becomes visible
const htmlInput = document.getElementById('htmlInput');
if (htmlInput && !htmlInput.value) {
htmlInput.focus();
}
}
});