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

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

const file = ref<File | null>(null)
const pageRotations = ref<Map<number, number>>(new Map())
const rotating = ref(false)
const result = ref<Uint8Array | null>(null)

async function rotatePages(degrees: number) {
  if (!file.value) return
  rotating.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await PDFDocument.load(arrayBuffer)
  const pages = pdf.getPages()

  for (const [pageIndex, rotation] of pageRotations.value) {
    const page = pages[pageIndex]
    const currentRotation = page.getRotation().angle
    page.setRotation(PDFRotation.degrees(currentRotation + rotation))
  }

  result.value = await pdf.save()
  rotating.value = false
}

function toggleRotation(pageIndex: number) {
  const current = pageRotations.value.get(pageIndex) || 0
  const newRotation = (current + 90) % 360
  const updated = new Map(pageRotations.value)
  if (newRotation === 0) {
    updated.delete(pageIndex)
  } else {
    updated.set(pageIndex, newRotation)
  }
  pageRotations.value = updated
}
</script>

const pageRotations = ref<Map<number, number>>(new Map())

const currentRotation = page.getRotation().angle
page.setRotation(PDFRotation.degrees(currentRotation + rotation))

<div
  v-for="(page, index) in totalPages"
  :key="index"
  :class="['page-item', { rotated: pageRotations.has(index) }]"
  @click="toggleRotation(index)"
>
  <img :src="thumbnails[index]" />
  <span v-if="pageRotations.has(index)" class="rotation-badge">
    {{ pageRotations.get(index) }}°
  </span>
</div>

function resetAll() {
  pageRotations.value = new Map()
}