HTML To PDF
Convert HTML to PDF in seconds—capture a website URL or raw HTML code as a clean, printable PDF. Perfect for saving web pages, reports, invoices, landing pages, and previews for clients. Fast, secure, and free to use with no registration required.
HTML to PDF Converter
The HTML to PDF Converter generates a PDF from either a website URL or raw HTML code. Enter a public web address and the tool fetches and renders the page, or paste HTML markup directly and the tool renders it locally. Configure the viewport width, page size, orientation, margin, and whether to produce a single page less document — then click Convert to PDF and download the result.
HTML to PDF conversion is used to save web pages for offline reading, archive online content, generate shareable snapshots of web applications, export HTML invoice and report templates, test print layouts during development, and create client-ready PDF previews of web designs. The result is a static PDF that captures the page as it appeared at the moment of conversion.
How to use the HTML to PDF Converter
- Choose your input mode. To convert a live web page, enter the full URL (including https://) in the website URL field. To convert HTML code, paste the markup directly into the HTML input area.
- Select a Screen Size (viewport width). This determines how the HTML is rendered before being captured as a PDF. Desktop 1440px is the practical default for most websites. See the settings reference table below for when to use each viewport.
- Configure Page Size, Orientation, and Page Margin to match your output requirements. Enable One Long Page if you want a single scroll-like PDF with no page breaks.
- Click Convert to PDF. The tool renders the HTML at the specified viewport width and captures the result as a PDF at the chosen page size.
- Preview the PDF output before sharing. HTML rendering in a PDF engine can differ from browser rendering — check text, images, fonts, and layout before sending or publishing.
Two input modes — URL and HTML code
| URL mode | HTML code mode | |
| Input | A public web address (e.g. https://www.example.com/page). The tool fetches the page from the internet and renders it. | Raw HTML markup pasted directly into a text input. The tool renders the HTML locally without fetching anything from the internet. |
| Requires internet access? | Yes — the page must be publicly accessible. Private pages behind a login, intranet pages, and localhost URLs cannot be fetched. Password-protected pages will not render correctly. | No — the HTML is rendered directly. Useful for local development previews, templates, and HTML that has not been published yet. |
| External assets (CSS, fonts, images) | External stylesheets, fonts, and images are fetched from the live page. If any asset is blocked by CORS, CDN restrictions, or authentication, it will not render in the PDF. | External assets referenced in the HTML (e.g. ) may not load unless URLs are absolute and publicly accessible. Inline CSS is more reliable than linked external files. |
| JavaScript execution | JavaScript may or may not be executed depending on the rendering engine. Dynamic content populated by JavaScript after page load may not appear in the PDF. Static HTML content is reliably captured; JS-rendered content is less predictable. | JavaScript in pasted HTML may execute partially. Content that depends on JavaScript for rendering should be pre-rendered to static HTML before pasting. |
| Best for | Saving publicly accessible web pages, capturing live content, archiving web-based documents, generating PDFs from published HTML invoices or reports. | Testing print layouts during development, converting HTML templates and email designs, exporting content that is not published, and rendering HTML with full control over the markup. |
Pages behind a login, intranet URLs, and localhost addresses cannot be converted via URL mode — the rendering engine has no access to authenticated sessions. For authenticated page content, open the page in your browser, use browser DevTools to copy the rendered HTML (right-click the page → Inspect → right-click the element → Copy → Copy outerHTML), and paste it into HTML code mode. Be aware that external assets (images, fonts, CSS files) referenced with relative paths will still not load without a publicly accessible base URL.
Conversion settings — complete reference
The tool provides five groups of settings that significantly affect the output PDF. The Screen Size setting is the most important and most frequently overlooked — it determines which layout the HTML renders at before being captured:
| Setting | Option | What it does and when to use it |
| Screen Size (viewport width) | ||
| Screen Size | Desktop HD (1920 px) | Renders the HTML at 1920 pixels wide — the width of a large desktop monitor. Use for pages designed for widescreen displays, dashboards, data tables, and any layout optimized for a large screen. Content will display at its widest, most spacious layout. |
| Screen Size | Desktop (1440 px) | Renders at 1440 pixels — the most common desktop screen width. The standard choice for most web pages and the most predictable rendering for content designed for general desktop viewing. A practical default for most URL conversions. |
| Screen Size | Tablet (768 px) | Renders at 768 pixels — the standard CSS breakpoint for tablets and some small laptops. Use when you want the tablet-optimized layout of a responsive website, or when the desktop layout is too wide for A4 and you want a narrower, more page-friendly rendering. |
| Screen Size | Mobile (320 px) | Renders at 320 pixels — a mobile phone viewport. The page will render its mobile layout. Useful for testing mobile page designs, or when you want a narrow single-column layout that converts cleanly to a narrow PDF page. |
| Page Size | ||
| Page Size | A3 (297 × 420 mm) | A large page format. Use for wide content — data tables, complex dashboards, horizontal layouts, and technical documentation that loses important detail when fitted to a smaller page. A3 gives wide content more horizontal space without forcing it to wrap or shrink. |
| Page Size | A4 (297 × 210 mm) | The international standard page size. The correct choice for almost all professional documents — reports, proposals, documentation, invoices, and client deliverables intended for European, Asian, or international audiences. |
| Page Size | A5 (148 × 210 mm) | A compact page format — half the size of A4. Use for mobile page exports, single-column content, short documents, and any HTML content that renders at a narrow width and would benefit from a proportionally compact page. |
| Page Size | US Letter (216 × 279 mm) | The standard US page size. Use for documents distributed in the United States, Canada, or Mexico, or submitted to US institutions, publishers, and organizations that expect Letter-size pages. |
| Orientation | ||
| Orientation | Portrait | Standard reading orientation. Correct for articles, reports, documentation, and most text-heavy content. A4 portrait at 1440px desktop width is the most common HTML to PDF combination and produces clean, readable output for standard web pages. |
| Orientation | Landscape | Horizontal orientation. Use for wide tables, dashboards, spreadsheet-style HTML, and any content that is significantly wider than it is tall. Combined with A3 or A4 in landscape, this is the right choice for data-heavy pages. |
| Page Margin | ||
| Margin | No Margin | The rendered HTML fills the page edge to edge. Use for content that already has its own internal padding and margins, or for full-bleed designs where white borders would be undesirable. |
| Margin | Small Margin | A narrow white border (~0.5 inch / 12 mm) is added around the rendered content. A practical default — provides space between content and the page edge without wasting significant page area. |
| Margin | Big Margin | A wide white border (~1 inch / 25 mm) is added. Use for formal documents, legal printouts, printed reports, and contexts where standard document margins are expected. |
| One Long Page | ||
| One Long Page | Enabled (checked) | The entire HTML content is rendered as a single continuous page without any page breaks — the PDF has exactly one page, as tall as the content requires. Use for: full-page screenshots of long articles; API documentation; content where page breaks would interrupt code blocks, tables, or step sequences; and any export where pagination is unwanted. Disabled: the content is divided into pages at the selected page size, with natural page breaks between sections. |
The Screen Size and Page Size settings work together and choosing mismatched values can produce poor results. A 1920px desktop layout placed on an A4 portrait page will be heavily scaled down and may make text very small. A 320px mobile layout on an A3 landscape page will leave most of the page empty. A practical rule: narrow viewport widths (Tablet 768px, Mobile 320px) pair better with smaller page sizes (A5, A4 portrait); wide viewport widths (Desktop HD 1920px) pair better with larger page sizes (A3, A4 landscape). Desktop 1440px on A4 portrait is a versatile general-purpose combination.
Common rendering issues and how to fix them
HTML to PDF conversion is more complex than image-to-PDF conversion because HTML is a dynamic, interactive format being captured by a static rendering engine. The following issues are common and have specific fixes:
| Issue | Cause and fix |
| PDF looks different from the browser | The rendering engine used for PDF conversion is not a browser — it does not apply the same rules as Chrome or Firefox. Responsive CSS media queries, viewport-dependent font sizes, and dynamic layout calculations may produce different results. Use @media print CSS rules to define a print-specific layout, and test the PDF output directly rather than comparing to the browser view. |
| Missing fonts — text appears in a fallback typeface | Custom fonts loaded via @font-face or Google Fonts CDN may not load during conversion if the font service is inaccessible or CORS-restricted. Use system fonts (Arial, Helvetica, Times New Roman, Courier) for reliable rendering, or ensure the font CSS URL is publicly accessible and not blocked. |
| Images missing or broken | Images referenced with relative URLs (e.g. src='images/photo.jpg') cannot be resolved without a base URL. Use absolute URLs (https://www.yourdomain.com/images/photo.jpg) for all image references in pasted HTML. For URL-mode conversions, ensure images on the live page are not blocked by authentication or CDN restrictions. |
| Content cut off at the page edge | Wide content (tables, code blocks, images wider than the page) does not wrap at the page boundary — it is clipped. Apply max-width: 100% to images, and use CSS overflow: hidden or overflow-wrap: break-word on containers. For tabular data, consider A3 landscape to give more horizontal space, or use the One Long Page option to avoid pagination entirely. |
| JavaScript-rendered content not appearing | Content populated by JavaScript after the initial page load (single-page applications, dynamic tables, content loaded via API calls) may not be present in the PDF. The rendering engine captures the HTML at a point in time that may not include all dynamically injected content. Pre-render dynamic content to static HTML before converting, or use the HTML code mode with static markup. |
| Page breaks splitting tables or code blocks | PDF page breaks at the selected page size may fall in the middle of tables, code blocks, or lists. Use the @media print CSS property page-break-inside: avoid on containers you do not want split, or enable the One Long Page option to produce a single pageless PDF. |
| Login-required or private pages not converting | The tool's rendering engine cannot authenticate with a website — pages that require a login, session cookie, or API key will not render their protected content. To capture authenticated page content, copy the rendered HTML from the browser (browser DevTools → Elements → right-click → Copy Outerhtml) and paste it into HTML code mode. External assets may still need absolute URL references. |
Improving output with print CSS
The most effective way to control HTML to PDF output is to add @media print CSS rules to the HTML. These rules apply only during print rendering (including PDF conversion) and have no effect on normal browser display:
Hide navigation and sidebars for print: @media print { nav, aside, .sidebar { display: none; } }
Prevent page breaks inside code blocks: @media print { pre, code { page-break-inside: avoid; } }
Prevent page breaks inside tables: @media print { table, tr { page-break-inside: avoid; } }
Force a page break before a section: @media print { .new-section { page-break-before: always; } }
Set body width for consistent print layout: @media print { body { width: 100%; max-width: none; margin: 0; } }
For HTML pasted directly into code mode, embed these rules in a block within the of your HTML. For URL-mode conversions, the rules must be in the page's stylesheet on the live server. Print CSS gives you direct control over which elements appear, where page breaks fall, and how the layout adjusts for a fixed-width page.
Common use cases and recommended settings
| Scenario | Recommended settings | Notes |
| Archiving a published web article or blog post | Input: URL. Screen: Desktop (1440px). Page: A4. Orientation: Portrait. Margin: Small. One Long Page: optional. | Desktop 1440px gives the standard reading layout. A4 portrait is the universal document format. One Long Page is useful for long articles where you do not want page breaks interrupting reading flow. |
| Capturing a data table or dashboard from a web app | Input: URL or HTML. Screen: Desktop HD (1920px). Page: A3 or A4 Landscape. Orientation: Landscape. Margin: Small. One Long Page: consider for very long tables. | Wide data tables need horizontal space. A3 or A4 landscape prevents columns being clipped. Desktop HD renders at the widest available layout. |
| HTML invoice or receipt template | Input: HTML code. Screen: Desktop (1440px) or Tablet (768px). Page: A4. Orientation: Portrait. Margin: Small or Big. One Long Page: Disabled. | HTML invoices are usually single or two-page documents. Use HTML code mode for direct template rendering. Ensure all CSS is inline or embedded in the HTML to avoid external asset loading issues. |
| Client preview of a landing page | Input: URL. Screen: Desktop (1440px). Page: A3 or A4 Landscape. Orientation: Landscape. Margin: No Margin. One Long Page: Enabled. | Landscape + no margin gives the widest canvas for presenting a full-width landing page design. One Long Page captures the entire page without breaks for a clean scroll-like preview document. |
| API or developer documentation | Input: URL or HTML. Screen: Desktop (1440px). Page: A4. Orientation: Portrait. Margin: Small. One Long Page: Enabled. | One Long Page is important for documentation — page breaks in the middle of code blocks and parameter tables make docs unusable. Ensure code blocks use pre-wrap or overflow-x: auto in the CSS to prevent text being cut off. |
| Mobile page design review | Input: URL. Screen: Mobile (320px). Page: A5. Orientation: Portrait. Margin: Small. One Long Page: optional. | Mobile 320px renders the narrow single-column mobile layout. A5 is proportionally compact and well-suited to mobile page content. Use this to review or share mobile-optimized designs in document form. |
Usage limits
| Account type | Daily conversions |
| Guest (no account) | 25 conversions per day |
| Registered (free account) | 100 conversions per day |
Related tools
- Text to PDF — convert plain text (.txt) content to PDF without a browser rendering step.
- Word to PDF — convert Word documents (DOC, DOCX) to PDF, preserving rich formatting, fonts, and layout.
- Image to PDF — convert screenshots and exported images to PDF if you want to capture a visual snapshot without HTML rendering.
- Watermark PDF — add a DRAFT, CONFIDENTIAL, or branding watermark to the generated PDF.
- Lock PDF — add password protection to the converted HTML PDF for sensitive documents.
Frequently asked questions
What is the difference between URL mode and HTML code mode?
URL mode fetches a live web page from the internet and renders it. The tool sends a request to the URL, receives the HTML and all linked assets (CSS, fonts, images), renders it at the selected viewport width, and captures the result as a PDF. HTML code mode renders markup you paste directly into the tool — no network request is made. URL mode is for publicly accessible web pages; HTML code mode is for local templates, unpublished HTML, email designs, and pages that require authentication or are not publicly available.
Why does my PDF look different from the browser view?
The rendering engine used to convert HTML to PDF is not a browser — it applies CSS and lays out content differently from Chrome, Safari, or Firefox. Responsive CSS media queries may produce unexpected results, web fonts may not load, JavaScript-rendered content may be missing, and page-based pagination introduces breaks that do not exist in a scroll-based browser. The most effective fixes are: use @media print CSS to define a print-specific layout; use absolute URLs for all external assets; disable JavaScript-dependent features in your HTML template; and test the PDF output directly rather than comparing to the browser view.
What does the Screen Size setting do?
The Screen Size setting sets the viewport width at which the HTML is rendered before being captured as a PDF. It simulates the browser window width used during conversion. A 1440px Desktop viewport renders the page as it would appear on a standard laptop or desktop screen. A 768px Tablet viewport renders the responsive tablet layout. A 320px Mobile viewport renders the narrow mobile layout. Choosing the right viewport width is essential for getting the layout you expect in the output — a desktop-optimized page rendered at 320px will show its narrow mobile layout, which may be significantly different from the desktop design.
What does 'One Long Page' do?
One Long Page produces a PDF with a single page that is as tall as the entire rendered HTML content — there are no page breaks dividing the content into multiple pages. The resulting PDF has one page whose height equals the full scroll height of the rendered HTML. This is useful for long articles or documentation where page breaks would disrupt reading flow, for content with tables or code blocks that should not be split, and for client previews where a scroll-like view is more appropriate than a paginated document. Disable One Long Page when you need a standard multi-page document formatted for printing at A4 or Letter size.
Can I convert a page that requires a login?
Not directly via URL mode — the rendering engine cannot authenticate with a website. Pages behind a login, protected portals, and intranet addresses are not accessible without a session. To convert authenticated content: log into the page in your browser, open DevTools (F12 or right-click → Inspect), find the root HTML element, right-click it and select 'Copy → Copy outerHTML', then paste the copied HTML into HTML code mode. Note that external assets (images, CSS, fonts) referenced with relative URLs will not load in HTML code mode without publicly accessible absolute URLs.
Why are images or fonts missing from my PDF?
Images referenced with relative paths (src='images/photo.jpg') cannot be resolved in HTML code mode without a base URL. Replace relative paths with absolute URLs (https://www.yourdomain.com/images/photo.jpg). Custom web fonts loaded via Google Fonts or @font-face CDN may not load if the font service blocks requests from the rendering engine. Use web-safe system fonts (Arial, Helvetica, Times New Roman, Courier) in print CSS to ensure reliable font rendering. In URL mode, images blocked by CORS headers or authentication will not appear in the PDF.
Is this tool suitable for generating PDF invoices from HTML templates?
Yes. HTML code mode is well-suited for invoice generation — paste your HTML invoice template, ensure all CSS is inline or embedded in a block within the HTML (rather than linked to external files), and use absolute URLs for any logo images. A4 portrait with Small margin is the standard invoice format. Disable One Long Page to allow the invoice to span multiple pages if needed. Print CSS (page-break-inside: avoid on invoice line item tables) prevents invoice rows being split across pages.</p><h3>Is the HTML to PDF Converter free?</h3><p>Yes. The converter is free within the daily usage limits shown above. Guest users can run 25 conversions per day without creating an account. Registering a free ToolsPiNG account increases the daily limit to 100 conversions.</p></p>