HTML से PDF

How are you sending the HTML?
⚠ Heads up — read this first
Complex modern CSS (flexbox edge cases, grid, custom properties, container queries) may render imperfectly. For pixel-perfect web → PDF, use the browser's built-in Print → Save as PDF. This tool is for quick conversions where round-trip-perfect isn't required.

🔒 Everything happens in your browser. Nothing uploads. Close the tab and it's gone.

HTML से PDF Converter किसी भी HTML — pasted markup, .html file, या public URL — को downloadable PDF में बदलता है। A4 या Letter, portrait या landscape, और margin pick करें। Page html2canvas के साथ off-screen canvas में render होता है, jsPDF द्वारा PDF pages में tiled होता है, और आपको single file के रूप में वापस मिलता है। पूरी तरह आपके browser में चलता है; कुछ upload नहीं होता। Limits के बारे में honest रहें: html2canvas CSS का subset re-implement करता है, तो flexbox edge cases, grid, और custom properties imperfectly render हो सकते हैं। Pixel-perfect output के लिए अपने browser के Print → Save as PDF use करें। URL mode best-effort है — ज़्यादातर public sites cross-origin fetches (CORS) block करती हैं, तो उनके लिए 'Paste HTML' reliable path है।

Built by Bob Article by Lace QA by Ben Shipped

कैसे उपयोग करें

  1. 1

    Mode pick करें। Paste HTML किसी भी markup के लिए काम करता है जो आपके पास पहले से है। Upload .html local file accept करता है। From URL public page fetch करता है (ज़्यादातर CORS fail होंगे — FAQ देखें)।

  2. 2

    Page size (A4 या Letter), orientation (portrait या landscape), और margin (0, 10, 20, या 40 mm) set करें। Defaults A4 / portrait / 20 mm हैं।

  3. 3

    Convert to PDF click करें। HTML hidden div में render होती है, html2canvas इसे 2× scale पर capture करता है, और jsPDF result को उतने pages पर tile करता है जितने ज़रूरी हैं।

  4. 4

    Download click करें। Output filename source से derived है: pasted HTML → webpage.pdf, uploaded file → filename mirror करती है, URL → hostname से derived (example.com → example-com.pdf)।

संबंधित टूल्स

🖼 Image to PDF 📎 PDF Merger 📦 Compress PDF 🔄 PDF to PNG

अक्सर पूछे जाने वाले प्रश्न

Ratings & Reviews

Rate this tool

Sign in to rate and review this tool.

Loading reviews…

HTML से PDF Converter क्या करता है

HTML से PDF Converter आपके पास जो भी HTML है — pasted markup, uploaded .html file, या public URL — को downloadable PDF में बदलता है। Page html2canvas के साथ off-screen canvas में render होता है, jsPDF द्वारा PDF pages पर tiled होता है, और single file के रूप में वापस मिलता है। A4 या Letter, portrait या landscape, और margin pick करें। सब कुछ आपके browser में होता है। कुछ upload नहीं होता।

Trade के बारे में honest रहें। html2canvas CSS का subset JavaScript में re-implement करता है — यह DOM से computed styles पढ़ता है और उन्हें canvas पर paint करता है। यह common stuff nails: colors, fonts, padding, borders, backgrounds, simple positioning, basic flexbox। Edge cases पर struggle करता है: complicated grid layouts, subgrid, baseline alignment, flex containers के अंदर percentage gaps, कुछ custom-property layout calculations। Pixel-perfect output के लिए, आपके browser का खुद का Print → Save as PDF wins — यह real rendering engine use करता है। हमारा tool उस case के लिए है जहाँ आपके पास raw HTML है hand में और बिना पहले browser tab खोले PDF चाहते हैं।

इसे कैसे use करें

Widget के पास तीन input modes हैं। आपकी situation match करने वाला pick करें।

  1. Mode pick करें। Paste HTML किसी भी markup के लिए काम करता है जो आपके पास पहले से है। Upload .html local file accept करता है। From URL public page fetch करता है (ज़्यादातर CORS fail होंगे — नीचे देखें)।
  2. Page size (A4 या Letter), orientation (portrait या landscape), और margin (0, 10, 20, या 40 mm) set करें। Defaults A4 / portrait / 20 mm हैं।
  3. Convert to PDF click करें। HTML hidden div में render होती है, html2canvas इसे sharpness के लिए 2× scale पर capture करता है, और jsPDF result को उतने pages पर tile करता है जितने ज़रूरी हैं।
  4. Download click करें। Output filename source से derived है: pasted HTML → webpage.pdf, uploaded file → filename mirror करती है, URL → hostname से derived (example.com → example-com.pdf)।

आपकी HTML के बारे में कुछ हमारे control वाले server तक नहीं पहुँचता। Paste mode और Upload mode पूरी तरह local हैं — conversion के दौरान अपने browser का network tab खोलें और आप शून्य outbound requests देखेंगे। URL mode exactly एक request बनाता है: आपका browser आपके typed URL को fetch करता है, और response browser memory में रहता है।

तीन input modes और हर एक कब use करें

हर mode अलग problem solve करता है। Upfront सही pick करना time बचाता है।

Modeक्या accept करता हैकिस पर काम करता हैकिसके लिए best
Paste HTMLTextarea में कोई भी markupसब कुछ (markup पहले से local है)Email templates, CMS snippets, exported reports, कुछ भी जो आप copy-paste कर सकते हैं
Upload .htmlLocal .html fileसब कुछ (file पहले से local है)Standalone HTML reports, generated invoices, exported notebooks
From URLPermissive CORS के साथ public URLRoughly 5% public URLs (CORS-permitted endpoints, dev environments, आपकी अपनी sites)APIs से quick fetches जो HTML return करती हैं, आपकी अपनी sites जहाँ आप headers control करते हैं

अगर आपने URL mode try किया और error मिली, तो आप Cross-Origin Resource Sharing से टकराए — browser security feature, bug नहीं जो हम patch around कर सकें। Workaround universal है: URL को normal tab में खोलें, right-click → View Page Source (या DevTools → Elements → <html> tag पर Copy outerHTML अगर page JS-rendered है), और वो Paste HTML mode में paste करें। HTML अब local है, CORS अब apply नहीं होता, और conversion चलती है।

Real numbers के साथ worked example

मान लो आपके पास HTML email template है — marketing announcement, 1,200 words body copy, दो header images, CTA button, social links के साथ footer। लगभग 18 KB HTML और 240 KB inline images, सब एक .html file में top पर single <style> block के साथ।

A4 / portrait / 20mm margin पर: conversion 2.5 seconds लेती है। Output 3 pages पर 1.3 MB है। Hero image sharp है, body type cleanly पढ़ता है, CTA button अपना shape और color रखता है, footer logos right size पर render होते हैं। Source से only visible difference: CTA पर hover state capture नहीं हुआ (हम resting DOM render कर रहे हैं, hover simulation नहीं), और footer के flex-wrap ने एक icon को second row पर रख दिया क्योंकि html2canvas ने flex gap को real browser से slightly different measure किया।

A4 / landscape / 10mm margin पर: same content, 3 के बजाय 2 pages, slightly wider line lengths। 1.1 MB। Letter / portrait / 20mm: 3 pages, 1.3 MB, lines same word boundaries पर wrap करती हैं A4 जैसी क्योंकि column nearly same width है।

अब input flip करें: localhost:3000 से serve किया गया React के साथ rendered single-page-app dashboard। URL mode bootstrap HTML fetch करता है और हर component skip करता है जिसे React mount करना था — आपको loading spinner के साथ blank PDF मिलता है। सही move: app को tab में खोलें, render होने दें, rendered DOM से outerHTML copy करें, Paste HTML mode में paste करें। PDF अब वो match करता है जो screen पर था।

यह Adobe Acrobat, SmallPDF, iLovePDF से कैसे compare करता है

Big-name HTML-to-PDF services — Adobe Acrobat का web version, SmallPDF का URL-to-PDF, iLovePDF का HTML-to-PDF, PDFCrowd, DocRaptor — सब server-side चलते हैं, जो fidelity के लिए right architecture है पर privacy और speed के लिए wrong architecture है।

वे services आमतौर पर अपने server पर headless Chromium instance drive करती हैं। आप उन्हें URL या HTML देते हैं; वे browser spin up करते हैं, आपकी content पर navigate करते हैं, JS चलाते हैं, fonts और images load होने के लिए wait करते हैं, फिर Chrome का print API hit करते हैं। Output pixel-perfect है क्योंकि वो real browser से आया। Downsides: आपकी HTML और कोई भी data उसके अंदर उनकी infrastructure पर travel करता है और उनके logs में बैठता है; आप queue में सबके render jobs के साथ wait करते हैं; आमतौर पर daily free quota और paid tier है $9-15/month से शुरू; और ज़्यादातर second file से पहले account require करते हैं।

हम कम करते हैं, आपके browser में, free के लिए। Trade honest है: complex CSS imperfectly render हो सकता है, JS execute नहीं होगा (हम off-screen render container में scripts नहीं चलाते), web fonts जिन्हें CORS-permitted fetch चाहिए वे defaults पर fall back हो सकते हैं, और बहुत long pages large output produce कर सकते हैं। Email template, exported report, CMS preview, या generated invoice के लिए — common HTML-to-PDF jobs — हमारा tool right pick है। Polished marketing site के लिए जिसे आप bit-for-bit archive करना चाहते हैं, Chrome का Print → Save as PDF, या server-side services में से एक use करें अगर scripting worth the cost है।

html2canvas क्या कर सकता है और क्या नहीं

html2canvas visual work करने वाला engine है, और इसकी limits जानना headaches बचाता है।

अच्छा काम करता है:

  • Standard CSS properties. Color, background, font, padding, margin, border, border-radius, box-shadow, opacity — सब real browser में जैसे same render होते हैं।
  • Inline styles और same-document <style> tags. अगर आपकी CSS आपकी paste की हुई HTML के अंदर है, यह काम करता है। Best results के लिए हमेशा अपनी CSS को top पर single <style> block में inline करें।
  • Basic flexbox. Row और column layouts, simple alignment, gap, basic justify-content और align-items — vast majority layouts के लिए fine।
  • Inline और block images. CORS-permitting servers से absolute URL द्वारा HTML में embedded या referenced JPEGs और PNGs correctly render होते हैं।

Imperfectly काम करता है:

  • CSS Grid. Explicit tracks वाले simple grids आमतौर पर render होते हैं। Auto-placement, subgrid, named areas, और grid-template-areas अक्सर नहीं।
  • Custom properties (CSS variables). Property directly read होने पर honor होती है, पर कुछ computed-value chains break करते हैं।
  • Flexbox edge cases. Mixed-height children के साथ flex-wrap, baseline alignment, percentage gaps, flex-basis: 0% वाले items — ये कभी-कभी slightly wrong dimensions के साथ lay out करते हैं।
  • External domains से loaded web fonts. अगर font के CORS headers cross-origin reads permit करते हैं, render होता है; otherwise हम system serif पर fall back करते हैं।

काम नहीं करता:

  • JavaScript. हम render container में scripts execute नहीं करते। अगर आपकी HTML JS पर content inject करने के लिए depend करती है (charts, SPAs, कुछ भी dynamic), पहले DevTools में rendered DOM capture करें और वो paste करें।
  • iframes. Iframe की contents अलग document context में रहती है जिसे html2canvas पढ़ नहीं सकता।
  • :hover, :focus, :active states. DOM rest पर capture होता है। Hover effects simulate नहीं होते।
  • Animations. Single frame capture होता है। CSS transitions और keyframe animations नहीं दिखते।

जब browser का Print → Save as PDF right answer है

Chrome, Firefox, Safari, और Edge सबके पास print dialog में built-in Save as PDF option है। यह browser का real rendering engine (Blink, Gecko, WebKit) use करता है, जिसका मतलब grid, flexbox, web fonts, और JS-rendered content पर perfect fidelity। यह आपकी auth cookies भी handle करता है — login के पीछे वाले pages correctly render होते हैं क्योंकि print dialog page जैसे same browser context में है।

Catch: यह require करता है कि आप page को actually tab में खोलें और print dialog से walk through करें। एक या दो PDFs के लिए वो fine है। Batch jobs या API या CMS export से मिली HTML के लिए tedious है। हमारा tool उनके लिए है — raw HTML hand में, PDF चाहिए, tab spin up नहीं करना चाहते। Browser का Print → Save as PDF बाकी सब के लिए right tool है।

Decision tree: pixel-perfect, आपके पास page tab में खुली है → Print → Save as PDF। Raw HTML hand में, "good enough" output, no upload → यह tool। Pixel-perfect और आपको सैकड़ों URLs पर इसे script करना है → Puppeteer के through headless Chromium या paid services में से एक।

संबंधित PDF tools

HTML से PDF Converter finished document के रास्ते पर कुछ और के साथ pair करता है:

  • Image से PDF — images के folder को single PDF में bundle करें। अक्सर right tool अगर आपकी "HTML" really screenshots की stack है।
  • PDF Merger — HTML-to-PDF output को दूसरी PDFs (cover letter, appendix, signed page) के साथ एक file में combine करें।
  • Compress PDF — अगर output unexpectedly large है (long pages और बहुत images 5-10 MB push कर सकते हैं), result को compressor से run करें।
  • PDF से PNG — PDF hand में आने के बाद हर PDF page को image के रूप में render करें।
  • Word से PDF — अगर आपके पास actually .docx है और आप HTML tool पर stumble हो गए, तो यह right neighbor है।

Microapp हर PDF tool browser-side ship करता है। Revenue का 10% charity में जाता है, off the top, audited quarterly — tools को वो 10% earn करना है, जिसका मतलब उन्हें actually upsells में दबाए बिना काम करना है।

Frequently asked questions

मेरी URL क्यों fail होती है?

Cross-Origin Resource Sharing (CORS)। जब आपका browser JavaScript से अलग domain के URL को fetch करता है, target server को explicitly response headers से allow करना पड़ता है। लगभग कोई public website ऐसा नहीं करती। यह browser security feature है, कुछ जो हम in-page workaround नहीं कर सकते। Reliable path: URL को normal browser tab में खोलें, view source (या right-click → View Page Source), HTML copy करें, और इसे यहाँ Paste HTML mode में paste करें। यह CORS को पूरी तरह bypass करता है क्योंकि HTML अब local है। Pages जो login require करते हैं वे दोनों तरह काम नहीं करेंगे — उन्हें आपकी session cookies चाहिए जो हमारी fetch borrow नहीं कर सकती।

क्या यह CSS preserve करता है?

ज़्यादातर, हाँ — पर सब नहीं। html2canvas rendered DOM से computed styles पढ़ता है और उन्हें canvas पर paint करता है। Standard color, font, padding, border, background, और basic positioning सब काम करते हैं। Inline styles, आपकी HTML के अंदर <style> tags, और class names से apply होने वाले styles जो आपके stylesheet तक पहुँचते हैं सब participate करते हैं। Catch: अगर आपकी HTML अन्य domains पर external stylesheets reference करती है, वे CORS से block हो सकते हैं URL fetch की तरह — उस case में rendered output उन rules के लिए default styles use करता है। Best results के लिए, अपनी CSS को paste की हुई HTML के top पर <style> block में inline करें।

Flexbox और grid के बारे में क्या?

Flexbox: common cases के लिए ज़्यादातर काम करता है (row/column layouts, basic alignment)। Edge cases — flex-wrap mixed-content children के साथ, baseline alignment, percentage gaps — कभी-कभी गलत dimensions के साथ render होते हैं। Grid: partial support। Explicit row/column tracks वाले simple grids आमतौर पर काम करते हैं; auto-placement, subgrid, और named areas अक्सर नहीं। CSS custom properties (--my-var) honor होते हैं जब directly read किए जाते हैं पर कुछ layout calculations break कर देते हैं। अगर आपका document modern layout पर heavily depend करता है, browser का Print → Save as PDF (Chrome, Firefox, Safari सब support करते हैं) use करें — वो browser का real rendering engine use करता है, JS reimplementation नहीं।

JavaScript के बारे में क्या?

Execute नहीं होता। हम कुछ strip नहीं करते, पर html2canvas DOM को वैसे capture करता है जैसा वह hand over के समय exist करता है — और हम off-screen render container में scripts नहीं चलाते। अगर आपकी HTML JS पर depend करती है content inject करने के लिए, regular browser tab में पहले उस JS को चलाएँ, rendered DOM पर view source करें (DevTools → Elements → <html> पर Copy outerHTML), और post-JS version यहाँ paste करें। Charts, single-page apps, कुछ भी जो JS से खुद को build करता है — rendered DOM capture करें, फिर convert करें।

Browser का Print → Save as PDF के साथ यह कैसे compare करता है?

Print → Save as PDF आपके browser का real layout engine (Chrome में Blink, Safari में WebKit, Firefox में Gecko) use करता है, तो यह सब कुछ nails — flexbox, grid, web fonts, JS-rendered content, perfect typography। Catch: यह require करता है कि आप पहले page को tab में खोलें और print dialog से walk through करें। हमारा tool उस case के लिए है जहाँ आपके पास raw HTML है (email template जो आप test कर रहे हैं, exported report, CMS से snippet) और बिना पहले browser में खोले PDF चाहते हैं। Fidelity के लिए Print use करें, speed और automation-friendly raw-HTML input के लिए यह use करें।

क्या मेरी HTML actually upload नहीं होती?

Paste HTML और Upload .html के लिए सही — दोनों पूरी तरह आपके browser में चलते हैं, no outbound requests। From URL के लिए exactly एक outbound request है: आपका browser आपके typed URL को fetch करता है, और बस; fetched HTML memory में रहती है और कभी हमारे servers तक नहीं पहुँचती। अपने browser के network tab में verify करें। PDF locally build होती है और blob URL के through download होती है।

Output expected से बड़ा क्यों है?

क्योंकि page canvas में rasterize होता है, फिर PDF में land होने पर JPG के रूप में re-encode होता है। बहुत images वाला long page आसानी से कुछ KB source HTML से multi-MB PDF produce कर सकता है। अगर size matters, तो result को हमारे PDF Compressor से run करें — image-heavy output के लिए यह अक्सर 50-70% drop करेगा।

क्या मैं password-protected page या login के पीछे वाला convert कर सकता हूँ?

URL mode से नहीं — हमारी fetch के पास आपकी browser cookies या auth headers का access नहीं है। Workaround: page को अपने normal browser tab में खोलें (जहाँ आप logged in हैं), DevTools → Elements खोलें, <html> tag पर right-click → Copy → Copy outerHTML, फिर वो Paste HTML में paste करें। यह fully rendered, authenticated page capture करता है including any DOM जो JS ने login के बाद build किया।