Create Form (pdf-lib)

Create a new PDF document with form fields using pdf-lib

by Hopding

HTML

<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>

  <body>
    <p>Click the button to create a PDF document with form fields using <code>pdf-lib</code></p>
    <button onclick="createForm()">Create PDF</button>
    <p class="small">(Your browser will download the resulting file)</p>
  </body>

  <script>
    const { PDFDocument } = PDFLib

    async function createForm() {
      // Create a new PDFDocument
      const pdfDoc = await PDFDocument.create()

      // Add a blank page to the document
      const page = pdfDoc.addPage([550, 750])

      // Get the form so we can add fields to it
      const form = pdfDoc.getForm()

      // Add the superhero text field and description
      page.drawText('Enter your favorite superhero:', { x: 50, y: 700, size: 20 })

      const superheroField = form.createTextField('favorite.superhero')
      superheroField.setText('One Punch Man')
      superheroField.addToPage(page, { x: 55, y: 640 })

      // Add the rocket radio group, labels, and description
      page.drawText('Select your favorite rocket:', { x: 50, y: 600, size: 20 })

      page.drawText('Falcon Heavy', { x: 120, y: 560, size: 18 })
      page.drawText('Saturn IV', { x: 120, y: 500, size: 18 })
      page.drawText('Delta IV Heavy', { x: 340, y: 560, size: 18 })
      page.drawText('Space Launch System', { x: 340, y: 500, size: 18 })

      const rocketField = form.createRadioGroup('favorite.rocket')
      rocketField.addOptionToPage('Falcon Heavy', page, { x: 55, y: 540 })
      rocketField.addOptionToPage('Saturn IV', page, { x: 55, y: 480 })
      rocketField.addOptionToPage('Delta IV Heavy', page, { x: 275, y: 540 })
      rocketField.addOptionToPage('Space Launch System', page, { x: 275, y: 480 })
      rocketField.select('Saturn IV')

      // Add the gundam check boxes, labels, and description
      page.drawText('Select...

CSS

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

p {
  font-family: helvetica;
  font-size: 24px;
  text-align: center;
  margin: 25px;
}

.small {
  font-family: helvetica;
  font-size: 18px;
  text-align: center;
  margin: 25px;
}

button {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
}