Copy Pages (pdf-lib)

Copy pages from existing documents with pdf-lib.

by Rapha Souza

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 copy pages from existing documents with <code>pdf-lib</code></p>
    <button onclick="copyPages()">Create PDF</button>
    <p class="small">(Your browser will download the resulting file)</p>
  </body>

  <script>
    const { PDFDocument } = PDFLib

    async function copyPages() {
			// Fetch first existing PDF document
      const url1 = 'https://pdf-lib.js.org/assets/with_update_sections.pdf'
      const firstDonorPdfBytes = await fetch(url1).then(res => res.arrayBuffer())
      
			// Fetch second existing PDF document
      const url2 = 'https://pdf-lib.js.org/assets/with_large_page_count.pdf'
      const secondDonorPdfBytes = await fetch(url2).then(res => res.arrayBuffer())

      // Load a PDFDocument from each of the existing PDFs
      const firstDonorPdfDoc = await PDFDocument.load(firstDonorPdfBytes)
      const secondDonorPdfDoc = await PDFDocument.load(secondDonorPdfBytes)
      
      // Create a new PDFDocument
      const pdfDoc = await PDFDocument.create();

      // Copy the 1st page from the first donor document, and 
      // the 743rd page from the second donor document
      const [firstDonorPage] = await pdfDoc.copyPages(firstDonorPdfDoc, [0])
      const [secondDonorPage] = await pdfDoc.copyPages(secondDonorPdfDoc, [742])

      // Add the first copied page
      
       const page = pdfDoc.addPage(firstDonorPage)

      // Insert the second copied page to index 0, so it will be the 
      // first page in `pdfDoc`
      pdfDoc.insertPage(0, secondDonorPage)
        const helveticaFont = await pdfDoc.embedFont(StandardFonts.Helvetica)
       
  var dataAtual = new Date()
  var mesPtBR = new Intl.DateTimeFormat('pt-BR', { day: 'numeric', month: 'long', year: 'numeric' }).format(dataAtual);
  var horaAtual =...

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;
}