Add a PDF Settings Dialog with WebSave

This guide shows how to add a settings dialog to a WebSave as PDF button using plain HTML and JavaScript.

Clicking the button opens the settings dialog. The visitor chooses a page size and filename, then clicks Download PDF or Cancel.

Wait for the visitor's choice

Before creating the PDF, WebSave calls onBeforeConversion with the conversion settings, named cfg in this example. Returning a Promise makes WebSave wait for the visitor's choice:

  • If the visitor clicks Download PDF, update cfg.apiSettings and cfg.fileName, then resolve with false to continue.
  • If the visitor cancels, resolve with true to stop the conversion.

Add the button and dialog

Add this HTML code inside the page's <body>, outside any existing form. The pdfcrowd-remove class keeps the button and dialog out of the PDF.

The browser's <dialog> element keeps keyboard focus inside the dialog and lets the visitor close it with Escape. The form's method="dialog" makes its buttons close the dialog without sending the form to the server.

The code uses the working demo WebSave key, so you can try it without creating an account. For production, replace it with your WebSave key.

<button type="button"
        class="pdfcrowd-websave pdfcrowd-websave-style pdfcrowd-remove"
        data-key="demo"
        data-config="webSaveConfig">
  Save as PDF
</button>

<dialog id="pdf-settings" class="pdfcrowd-remove"
        aria-labelledby="pdf-settings-title">
  <form method="dialog">
    <h2 id="pdf-settings-title">PDF settings</h2>
    <p>
      <label for="pdf-page-size">Page size</label>
      <select id="pdf-page-size" autofocus>
        <option value="A4">A4</option>
        <option value="Letter">Letter</option>
        <option value="A3">A3</option>
        <option value="A5">A5</option>
      </select>
    </p>
    <p>
      <label for="pdf-filename">Filename</label>
      <input id="pdf-filename" type="text" value="document.pdf">
    </p>
    <button type="submit" value="download">Download PDF</button>
    <button type="submit" value="cancel">Cancel</button>
  </form>
</dialog>

Connect the dialog to WebSave

Place this script after the HTML code above. The button's data-config="webSaveConfig" tells WebSave to use the settings in window.webSaveConfig, including the function that opens the dialog.

<script>
  const pdfDialog = document.getElementById('pdf-settings');

  function choosePdfSettings(cfg) {
    if (pdfDialog.open) {
      return true;
    }

    return new Promise((resolve) => {
      pdfDialog.returnValue = 'cancel';

      pdfDialog.addEventListener('close', () => {
        if (pdfDialog.returnValue !== 'download') {
          resolve(true); // Cancel the conversion.
          return;
        }

        cfg.apiSettings = {
          ...cfg.apiSettings,
          page_size: document.getElementById('pdf-page-size').value
        };
        cfg.fileName = document.getElementById('pdf-filename').value.trim()
          || 'document.pdf';

        resolve(false); // Continue with the chosen settings.
      }, { once: true });

      pdfDialog.showModal();
    });
  }

  window.webSaveConfig = {
    conversionMode: 'content',
    onBeforeConversion: choosePdfSettings
  };
</script>
<script src="https://edge.pdfcrowd.com/websave/1.3.0/websave.min.js" async></script>

Clicking Download PDF applies the values and lets WebSave convert the page. This example uses content mode, which sends the page's current HTML to PDFCrowd. You can use the same callback with URL mode instead.

Cancel and Escape close the dialog without creating a PDF. Before each opening, the code resets returnValue to 'cancel' because Escape leaves that value unchanged.

The { once: true } option removes the close handler after it runs, so handlers from earlier openings do not run again.

The form keeps the visitor's choices while the page stays loaded. If the filename is blank, the download uses document.pdf. Other settings in cfg.apiSettings stay unchanged.

Adapt the settings to your page

To offer more PDF options, add fields to the dialog and read their values in the code that runs when Download PDF is clicked. For example, a dropdown for portrait or landscape would set cfg.apiSettings.orientation to portrait or landscape. The HTML to PDF HTTP reference lists the parameter names and accepted values used in apiSettings.