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

Rotating PDF pages requires careful handling of PDF page transformations to preserve content quality and layout.

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

The challenge: Preserving content during rotation

PDF rotation involves:

1. Reading each page's existing transformation matrix
2. Applying a 90°/180°/270° rotation transform
3. Adjusting page dimensions (width ↔ height swap for 90°/270°)
4. Preserving all content without distortion

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, degrees } from 'pdf-lib'

const file = ref<File | null>(null)
const rotating = ref(false)
const result = ref<Uint8Array | null>(null)
const angle = ref(90)

async function rotatePdf() {
  if (!file.value) return
  rotating.value = true

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

  for (const page of pages) {
    const currentRotation = page.getRotation().angle
    page.setRotation(degrees(currentRotation + angle.value))

    // Swap dimensions for 90°/270° rotations
    if (angle.value === 90 || angle.value === 270) {
      const { width, height } = page.getSize()
      page.setSize(height, width)
    }
  }

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

function downloadResult() {
  if (!result.value) return
  const blob = new Blob([result.value], { type: 'application/pdf' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'rotated.pdf'
  a.click()
}
</script>

Key implementation details

1. Rotation with pdf-lib

pdf-lib handles rotation through the page's rotation property:

page.setRotation(degrees(currentRotation + angle.value))

The degrees() utility converts numeric degrees to pdf-lib's internal format.

2. Dimension swapping

When rotating 90° or 270°, width and height must be swapped:

if (angle.value === 90 || angle.value === 270) {
  const { width, height } = page.getSize()
  page.setSize(height, width)
}

3. Cumulative rotation

Rotations are cumulative — each rotation adds to the existing angle:

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

This means rotating 90° twice equals 180°, which is correct behavior.

Limitations

Selective page rotation

pdf-lib's setRotation rotates all pages equally by default.

Solution: Loop through pages and conditionally apply rotation based on page index.

Content overflow

Some PDFs have content positioned near edges that may be clipped after rotation.

Solution: Add padding or use page.drawRectangle to ensure content stays visible.

Complex PDFs

PDFs with forms, annotations, or embedded files may lose some functionality after rotation.

Solution: Test with your specific PDFs and fall back to desktop software for complex documents.

Summary

Building a browser-based PDF rotation tool involves:

1. Using pdf-lib to load and modify PDFs
2. Applying rotation transforms to each page
3. Swapping dimensions for 90°/270° rotations
4. Saving and downloading the result

Try it at en.sotool.top/rotate.