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

Deleting pages from PDF seems simple, but there are important considerations around index management and data safety. Here's how to build a browser-based PDF page deletion tool with Vue 3 and pdf-lib.

The challenge: Index management

When deleting multiple pages, the indices shift. If you delete page 2 first, what was page 3 becomes page 2. This can lead to deleting the wrong pages if not handled correctly.

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 pagesToDelete = ref<number[]>([])
const deleting = ref(false)
const result = ref<Uint8Array | null>(null)

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

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

  // Validate and sort indices (delete from back to front)
  const validIndices = pagesToDelete.value
    .filter(index => index >= 0 && index < totalPages)
    .sort((a, b) => b - a) // Descending order

  for (const index of validIndices) {
    pdf.removePage(index)
  }

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

Key implementation details

1. Index validation

Ensure indices are within bounds:

const validIndices = pagesToDelete.value
  .filter(index => index >= 0 && index < totalPages)

2. Delete from back to front

Prevent index shift issues:

.sort((a, b) => b - a) // Descending order

3. User interface

Provide a visual page selector:

<div class="page-grid">
  <div
    v-for="(page, index) in totalPages"
    :key="index"
    :class="['page-item', { deleted: pagesToDelete.includes(index) }]"
    @click="togglePage(index)"
  >
    {{ index + 1 }}
  </div>
</div>

4. Batch operations

Support selecting multiple pages:

function togglePage(index: number) {
  const pos = pagesToDelete.value.indexOf(index)
  if (pos >= 0) {
    pagesToDelete.value.splice(pos, 1)
  } else {
    pagesToDelete.value.push(index)
  }
}