How to Save Web Pages as PDFs with WebSave

To let visitors save a page from your site as a PDF with PDFCrowd WebSave, add a button with the pdfcrowd-websave class and your WebSave key, then load the WebSave JavaScript. Use URL mode for public pages. Use content mode when the PDF must include a logged-in view, current form values, or other state already loaded in the visitor’s browser. WebSave sends the conversion to PDFCrowd’s servers, so you do not need to install a PDF renderer on your own server. Read the WebSave guide.

1. Add the WebSave button

This minimal example uses the documented WebSave script version 1.3.0. A demo key produces watermarked output for trying the integration. Use a personal key for production; keys are associated with configured domains or subdomains.

<button class="pdfcrowd-websave" data-key="demo">
  Save as PDF
</button>
<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js"></script>

For the default styled button, add the optional pdfcrowd-websave-style class. It supplies default styling, an icon, and a loading animation.

<button class="pdfcrowd-websave pdfcrowd-websave-style" data-key="YOUR_WEBSAVE_KEY">
  Save this page as PDF
</button>
<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js"></script>

Place the button and any configuration before the library script so the library can find them at startup. Check the current WebSave guide for the current script version when implementing or upgrading.

2. Choose URL mode or content mode

Mode	Use it for	What it can include	Data sent for conversion
URL mode (default)	Public pages that PDFCrowd can fetch	A fresh server-side fetch of the URL; URL parameters can be adjusted	The URL is fetched by the service. The visitor’s login session and current form input are not shared.
Content mode	Logged-in pages, application views, and completed forms already loaded in the browser	HTML from the current page, including copied input, selection, and textarea values	Submitted page HTML is sent to PDFCrowd for server-side conversion.

Use URL mode for a public article or product page when the rendered server response is what should appear in the PDF. Use content mode when the visitor’s current page state matters. Content mode converts the HTML that is present when the action runs: it does not automatically load records that have not been fetched, or preserve every interactive browser state. It recreates a rendering; it is not a pixel capture of the visitor’s screen. Ensure required data and assets are present and accessible before conversion.

Privacy considerations for content mode

Content mode sends submitted HTML to PDFCrowd. Consider whether that HTML contains personal, confidential, or regulated data, and disclose the processing appropriately for your application. PDFCrowd says submitted HTML and generated files are deleted from active processing systems within 30 minutes, with no backup copies. Converted URLs may be retained in conversion logs for a default 14 days; PDFCrowd says URL retention can be set to no storage. These are vendor statements and may change. For sensitive or regulated use, review the current data processing agreement, subprocessors, and applicable terms before enabling the feature.

3. Configure output and behavior

WebSave accepts a JavaScript configuration object. Define it before loading the library, then point the button’s data-config attribute at that object. With no data-config, the reference says default settings apply. Consult the WebSave reference for exact property names and accepted values.

<button
  class="pdfcrowd-websave"
  data-key="YOUR_WEBSAVE_KEY"
  data-config="pdfConfig">
  Download report
</button>

<script>
  const pdfConfig = {
    // Add supported WebSave options here.
  };
</script>
<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js"></script>

The documented controls include:

File handling: choose a filename and whether the result downloads, opens, or opens in a new tab (download, open, or openNewTab).
Page layout: select page size, orientation, and margins; configure headers and footers.
Print presentation: use print CSS, custom CSS, or custom JavaScript to prepare the converted document.
Remove interface elements: use the pdfcrowd-remove class on content that should be excluded from the PDF.

For a substantial document, a print-specific URL or stylesheet often makes the desired structure easier to maintain. Treat CSS and script adjustments as site-specific: no one setting guarantees identical layout for every page.

4. Initialize buttons rendered later

If a framework or client-side script creates the button after the initial page load, initialize it after inserting the element with window.WebSave.initButton(...). The guide describes this approach for React, Vue, Angular, and Svelte.

<div id="pdf-action"></div>
<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js"></script>
<script>
  const host = document.getElementById('pdf-action');
  const button = document.createElement('button');
  button.className = 'pdfcrowd-websave';
  button.dataset.key = 'YOUR_WEBSAVE_KEY';
  button.textContent = 'Save as PDF';
  host.appendChild(button);
  window.WebSave.initButton(button);
</script>

Call the initializer only after the button exists. In a component framework, run it after the component has mounted and the button’s key and configuration attributes have been set.

5. Check keys, domains, and local development

Use the right key: demo output is watermarked. Use your personal key for non-watermarked production output.
Match the configured host: keys are domain-scoped. Subdomain inclusion follows the domain used when the key is created; it does not make sibling domains interchangeable.
Check custom URL hosts: URL mode custom targets are subject to an exact-host same-origin check.
Do not target localhost from the service: PDFCrowd’s servers cannot reach your local development server. For development, expose it through a temporary public HTTPS tunnel, then use the reachable URL.

6. Improve the PDF layout

Decide what content belongs in the document and whether URL or content mode supplies that state.
Set page size, orientation, and margins to match the document’s intended use.
Add print-specific CSS to control page breaks, hide navigation, and adjust typography and colors.
Use custom CSS or JavaScript only when print styles and the page’s own markup are insufficient.
Mark controls or other unwanted elements with pdfcrowd-remove.
Try representative pages with long content, images, forms, and unusual layouts before exposing the button widely.

A converted PDF can differ from the live browser view because it is rendered by a server-side conversion process. Layout tuning should be based on the actual pages and content your visitors export.

7. Troubleshooting

Symptom	Likely cause	What to check
Button does nothing or is not recognized	The required class or key is missing, the script loaded before the markup, or the button was inserted after startup without initialization.	Confirm `pdfcrowd-websave`, a valid `data-key`, script loading, and (for dynamic markup) a call to `window.WebSave.initButton(button)`.
PDF has a watermark	The demo key is being used.	Replace `demo` with a personal key configured for the site’s domain.
Key or domain is rejected	The current host does not match the key’s domain scope, or the developer expects sibling domains to share a key.	Check the domain and subdomain settings used when the key was created. Confirm the page’s actual hostname.
Login-protected page becomes a login screen	URL mode makes a fresh request and does not share the visitor’s session.	Use content mode for the already loaded page state, and confirm the required content is present in its HTML.
Recent form values are missing	URL mode does not include current browser form input.	Use content mode; verify inputs, selections, and textareas have their current values before starting conversion.
Some dynamic content is absent	The relevant data or assets were not loaded or represented in the submitted HTML.	Load the needed records before capture and check that referenced assets are available to the conversion process.
Local development URL cannot be converted	PDFCrowd’s servers cannot access localhost.	Use a temporary public HTTPS tunnel for development and provide its reachable URL.
A custom URL target fails origin checks	URL mode enforces an exact-host same-origin check for custom targets.	Keep the target on the expected host and verify the configured page URL and parameters.
PDF layout differs from the browser	Server-side conversion and print rendering do not guarantee a pixel-identical screen rendering.	Add print CSS, adjust page settings, and try a print-specific page or targeted custom CSS/JavaScript.
Button styling or loading state is missing	The optional style class is not present, or site styles override it.	Add `pdfcrowd-websave-style` if desired and inspect the page’s CSS for conflicting rules.

8. Performance, reliability, and cost

WebSave delegates conversion to PDFCrowd’s servers, avoiding the need to operate a PDF renderer on your web server. The reviewed official material does not provide a named performance benchmark, so conversion duration and output size should be evaluated with your own pages. Large or dynamic pages may take more work to prepare and convert; load required content deliberately and keep the PDF-specific markup as lean as practical.

For reliability, make the export action clear, initialize dynamic buttons after rendering, and validate the key’s host scope. Test both typical and edge-case documents. If users depend on a downloadable record, provide a way to retry and make clear what page state the PDF contains.

PDFCrowd’s pricing page describes a free trial with 100 test API credits valid for one month, with credits based on output size at one credit per 0.5 MB. The reviewed pricing content does not state a fixed WebSave plan price; check the current pricing selector for applicable terms rather than assuming a rate.

Or skip the browser setup

If you need a screenshot or PDF of a public URL instead of adding a visitor-facing WebSave button, ScreenshotNeo is a website screenshot API and MCP server. It can return PNG, JPEG, WebP, or PDF in one GET request. Its call also works as a straightforward capture when you do not need WebSave’s in-page visitor flow.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

See the ScreenshotNeo API documentation for options and response details. Cookie banners are accepted and 60+ known consent platforms, newsletter popups, and chat widgets are removed before the shot; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are never billed, and response headers identify the page verdict and billing status. An MCP server gives AI agents tools to take screenshots, inspect page information, and capture PDFs. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

FAQ

Can visitors use WebSave on any website?

WebSave is an integration that a site owner adds to their own site. It is not primarily a browser tool for saving arbitrary third-party pages.

Does content mode capture exactly what is on the visitor’s screen?

No. It submits current page HTML for server-side conversion. Include the needed data and prepare the markup, and expect a converted rendering rather than a pixel-identical screen capture.

Can I use it for a form or logged-in page?

Yes, when the relevant page state has already loaded in the browser, content mode can include current input values, selections, and textarea values. URL mode does not share the visitor’s login or current form state.

Can I use WebSave on a local development server?

PDFCrowd’s servers cannot reach localhost. Use a temporary public HTTPS tunnel during development.