How to Delete Pages from PDF in the Browser with Vue 3 and pdf-lib

Removing pages from a PDF requires careful handling of PDF page indices and structure.

Here's how to build a browser-based PDF page deletion tool with Vue 3 and pdf-lib.

The challenge: Safe page removal

PDF page deletion involves:

Loading the source PDF
Identifying which pages to keep
Creating a new PDF without the deleted pages
Preserving PDF structure and metadata

The stack

Vue 3 with Composition API
pdf-lib for PDF manipulation
Vite for bundling

The core implementation

<script setup lang="ts">
import { ref } from 'vue'
import { PDFDocument } from 'pdf-lib'

const file = ref<File | null>(null)
const pages = ref<any[]>([])
const deleting = ref(false)
const result = ref<Uint8Array | null>(null)
const deleteIndices = ref<Set<number>>(new Set())

async function handleFile(e: Event) {
  const input = e.target as HTMLInputElement
  if (!input.files?.[0]) return
  file.value = input.files[0]

  const arrayBuffer = await file.value.arrayBuffer()
  const pdfDoc = await PDFDocument.load(arrayBuffer)

  pages.value = Array.from({ length: pdfDoc.getPageCount() }, (_, i) => ({
    index: i,
    number: i + 1,
    deleted: false
  }))
}

function toggleDelete(index: number) {
  const newDeleted = new Set(deleteIndices.value)
  if (newDeleted.has(index)) {
    newDeleted.delete(index)
  } else {
    newDeleted.add(index)
  }
  deleteIndices.value = newDeleted
}

async function deletePages() {
  if (!file.value || deleteIndices.value.size === 0) return
  deleting.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdfDoc = await PDFDocument.load(arrayBuffer)
  const totalPages = pdfDoc.getPageCount()

  // Create new PDF with only kept pages
  const newPdf = await PDFDocument.create()
  const pagesToKeep = Array.from({ length: totalPages }, (_, i) => i)
    .filter(i => !deleteIndices.value.has(i))

  if (pagesToKeep.length > 0) {
    const copiedPages = await newPdf.copyPages(pdfDoc, pagesToKeep)
    copiedPages.forEach(page => newPdf.addPage(page))
  }

  result.value = await newPdf.save()
  deleting.value = false
}
</script>

Key implementation details

1. Tracking deleted pages

Use a Set to track which page indices are marked for deletion:

const deleteIndices = ref<Set<number>>(new Set())

2. Creating filtered page list

Build a list of pages to keep, excluding deleted indices:

const pagesToKeep = Array.from({ length: totalPages }, (_, i) => i)
  .filter(i => !deleteIndices.value.has(i))

3. Copying pages to new PDF

pdf-lib's copyPages creates a new PDF with only the specified pages:

const copiedPages = await newPdf.copyPages(pdfDoc, pagesToKeep)
copiedPages.forEach(page => newPdf.addPage(page))

Limitations

No undo after download

Once downloaded, deleted pages cannot be recovered.

Solution: Always keep a backup of the original PDF.

Single file only

This implementation handles one PDF at a time.

Solution: Batch process multiple files sequentially.

Memory constraints

Large PDFs with many pages may exhaust browser memory.

Solution: Process in smaller batches for very large files.

Summary

Building a browser-based PDF page deletion tool involves:

Using pdf-lib to load and analyze PDFs
Providing an intuitive page selection UI
Creating a new PDF without deleted pages
Offering download and preview functionality

Try it at en.sotool.top/delete-pages.