DEV Community: sunshey

How to Sign PDF Files in the Browser with Vue 3 and pdf-lib

sunshey — Tue, 08 Sep 2026 12:49:53 +0000

Signing PDFs in the browser involves capturing user input and embedding it into the PDF document. Here's how to build a browser-based PDF signing tool with Vue 3 and pdf-lib.

The challenge: Signature capture and placement

PDF signing requires:

Capturing handwritten signatures via canvas
Converting signatures to images
Positioning signatures on specific pages
Preserving signature appearance and quality

The stack

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

The core implementation

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

const file = ref<File | null>(null)
const signatureImage = ref<string | null>(null)
const isDrawing = ref(false)
const signing = ref(false)
const result = ref<Uint8Array | null>(null)

const canvasRef = ref<HTMLCanvasElement | null>(null)
let ctx: CanvasRenderingContext2D | null = null

function startDrawing(e: MouseEvent | TouchEvent) {
  isDrawing.value = true
  draw(e)
}

function stopDrawing() {
  isDrawing.value = false
}

function draw(e: MouseEvent | TouchEvent) {
  if (!isDrawing.value || !ctx) return

  const canvas = canvasRef.value!
  const rect = canvas.getBoundingClientRect()

  let x, y
  if (e instanceof MouseEvent) {
    x = e.clientX - rect.left
    y = e.clientY - rect.top
  } else {
    x = e.touches[0].clientX - rect.left
    y = e.touches[0].clientY - rect.top
  }

  ctx.lineTo(x, y)
  ctx.stroke()
}

function clearCanvas() {
  if (ctx && canvasRef.value) {
    ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height)
  }
}

async function signPdf() {
  if (!file.value || !signatureImage.value) return
  signing.value = true

  // Convert canvas to image data URL
  const canvas = canvasRef.value!
  signatureImage.value = canvas.toDataURL('image/png')

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await PDFDocument.load(arrayBuffer)
  const pages = pdf.getPages()
  const page = pages[0]

  const signatureBytes = await fetch(signatureImage.value)
    .then(res => res.arrayBuffer())

  const pngImage = await pdf.embedPng(signatureBytes)

  page.drawImage(pngImage, {
    x: 50,
    y: 100,
    width: 200,
    height: 60,
  })

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

Key implementation details

1. Canvas signature capture

Use Canvas API to capture handwritten signatures:

const canvas = document.createElement('canvas')
canvas.width = 400
canvas.height = 150
const ctx = canvas.getContext('2d')!

ctx.strokeStyle = '#000'
ctx.lineWidth = 2
ctx.lineCap = 'round'

2. Touch and mouse events

Support both mouse and touch input:

canvas.addEventListener('mousedown', startDrawing)
canvas.addEventListener('mousemove', draw)
canvas.addEventListener('mouseup', stopDrawing)
canvas.addEventListener('mouseout', stopDrawing)

// Touch events
canvas.addEventListener('touchstart', startDrawing)
canvas.addEventListener('touchmove', draw)
canvas.addEventListener('touchend', stopDrawing)

3. Signature to image conversion

Convert canvas drawing to PNG for embedding:

const signatureDataUrl = canvas.toDataURL('image/png')
const response = await fetch(signatureDataUrl)
const arrayBuffer = await response.arrayBuffer()
const pngImage = await pdf.embedPng(arrayBuffer)

4. Positioning the signature

Place signature at specific coordinates:

page.drawImage(pngImage, {
  x: 50,    // Left margin
  y: 100,   // Bottom position
  width: 200,
  height: 60,
})

Limitations

No real-time preview

Can't show signature placement before applying.

Solution: Use a separate preview canvas.

Limited signature styles

Basic drawing only; no fonts or styles.

Solution: Support image upload for more options.

Mobile compatibility

Touch events need careful handling.

Solution: Test on multiple devices.

Summary

Building a browser-based PDF signing tool involves:

Creating a canvas for signature drawing
Capturing user input (mouse/touch)
Converting signature to image
Embedding in PDF at specified position

Try it at en.sotool.top/sign-pdf.

How to Convert Images to PDF in the Browser with Vue 3

sunshey — Mon, 07 Sep 2026 12:42:36 +0000

Combining images into PDFs is a common need, but handling multiple formats and maintaining quality requires careful implementation.

Here's how to build a browser-based image to PDF converter with Vue 3.

The challenge: Multiple formats, one output

Images come in various formats (JPG, PNG, WebP), but PDF only supports specific image types. Converting between them requires:

Format detection and normalization
Quality preservation
Layout management
Memory optimization

The stack

Vue 3 with Composition API
pdf-lib for PDF generation
Canvas API for image processing
Vite for bundling

The core implementation

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

const files = ref<File[]>([])
const converting = ref(false)
const result = ref<Blob | null>(null)

async function convertToPdf() {
  if (files.value.length === 0) return
  converting.value = true

  const pdfDoc = await PDFDocument.create()

  for (const file of files.value) {
    const arrayBuffer = await file.arrayBuffer()

    let imageBytes: Uint8Array
    let imageType: 'jpg' | 'png'

    if (file.type === 'image/jpeg') {
      imageBytes = arrayBuffer
      imageType = 'jpg'
    } else if (file.type === 'image/png') {
      imageBytes = arrayBuffer
      imageType = 'png'
    } else {
      // Convert to JPEG using Canvas
      imageBytes = await convertToJpeg(arrayBuffer, file.type)
      imageType = 'jpg'
    }

    // Add page (A4 size)
    const page = pdfDoc.addPage([612, 792])

    // Embed and draw image
    const img = imageType === 'jpg' 
      ? await pdfDoc.embedJpg(imageBytes)
      : await pdfDoc.embedPng(imageBytes)

    page.drawImage(img, {
      x: 0, y: 0,
      width: page.getWidth(),
      height: page.getHeight()
    })
  }

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

// Convert any image format to JPEG
async function convertToJpeg(arrayBuffer: ArrayBuffer, mimeType: string): Promise<Uint8Array> {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')!

  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0)
      canvas.toBlob((blob) => {
        if (blob) {
          const reader = new FileReader()
          reader.onload = () => resolve(new Uint8Array(reader.result as ArrayBuffer))
          reader.readAsArrayBuffer(blob)
        }
      }, 'image/jpeg', 0.95)
    }
    img.src = URL.createObjectURL(new Blob([arrayBuffer]))
  })
}
</script>

Key implementation details

1. Format detection

Check file type and handle accordingly:

if (file.type === 'image/jpeg') {
  // Direct embedding
} else if (file.type === 'image/png') {
  // Direct embedding
} else {
  // Convert via Canvas
}

2. Canvas conversion

For unsupported formats, use Canvas to convert:

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
canvas.toBlob((blob) => { /* convert to bytes */ }, 'image/jpeg', 0.95)

3. Image sizing

Handle different image ratios:

function fitImage(imgWidth: number, imgHeight: number, pageWidth: number, pageHeight: number) {
  const scale = Math.min(pageWidth / imgWidth, pageHeight / imgHeight)
  return {
    width: imgWidth * scale,
    height: imgHeight * scale
  }
}

4. Memory management

Process images in batches to avoid memory issues:

const BATCH_SIZE = 20
for (let i = 0; i < files.value.length; i += BATCH_SIZE) {
  const batch = files.value.slice(i, i + BATCH_SIZE)
  await processBatch(batch, pdfDoc)
}

Limitations

HEIC support

HEIC images require additional decoding libraries.

Solution: Prompt users to convert HEIC to JPG first.

Large files

Very large images may cause memory issues.

Solution: Implement image resizing or chunked processing.

WebP compatibility

WebP support varies across PDF readers.

Solution: Convert WebP to JPG for maximum compatibility.

Summary

Building a browser-based image to PDF converter involves:

Detecting image formats
Normalizing to supported types
Embedding in PDF pages
Managing memory for large batches

Try it at en.sotool.top/image-to-pdf.

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

sunshey — Sun, 06 Sep 2026 08:40:21 +0000

Removing blank pages from PDFs in the browser requires image analysis and page content detection. Here's how to build a browser-based blank page removal tool with Vue 3 and pdf-lib.

The challenge: Detecting blank pages

Blank page detection involves:

Analyzing each page's visual content
Distinguishing between truly blank and near-blank pages
Handling different types of "blank" pages (white, faint, hidden content)
Providing accurate detection with minimal false positives

The stack

Vue 3 with Composition API
pdf-lib for PDF manipulation
Canvas API for page rendering and analysis
Vite for bundling

The core implementation

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

const file = ref<File | null>(null)
const blankPages = ref<number[]>([])
const removing = ref(false)
const result = ref<Uint8Array | null>(null)

// Detect blank pages using Canvas rendering
async function detectBlankPages(): Promise<number[]> {
  if (!file.value) return []

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await PDFDocument.load(arrayBuffer)
  const pages = pdf.getPages()
  const blankIndices: number[] = []

  for (let i = 0; i < pages.length; i++) {
    const page = pages[i]
    const isEmpty = await isPageBlank(page)
    if (isEmpty) {
      blankIndices.push(i)
    }
  }

  return blankIndices
}

// Check if a page is blank by rendering and analyzing
async function isPageBlank(page: any): Promise<boolean> {
  // Render page to canvas
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')!

  // Get page dimensions and render
  const width = page.getWidth()
  const height = page.getHeight()
  canvas.width = width
  canvas.height = height

  // Render page content (using pdf.js for rendering)
  // Then analyze pixel data for blankness

  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  const pixels = imageData.data

  // Count non-white pixels
  let nonWhitePixels = 0
  const totalPixels = pixels.length / 4
  const threshold = 240 // Pixel value threshold for "white"

  for (let i = 0; i < pixels.length; i += 4) {
    const r = pixels[i]
    const g = pixels[i + 1]
    const b = pixels[i + 2]

    // Check if pixel is white or near-white
    if (r < threshold || g < threshold || b < threshold) {
      nonWhitePixels++
    }
  }

  // Consider page blank if less than 1% non-white pixels
  return (nonWhitePixels / totalPixels) < 0.01
}

async function removeBlankPages() {
  if (!file.value || blankPages.value.length === 0) return
  removing.value = true

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

  // Remove blank pages in reverse order to maintain indices
  const sortedBlankPages = [...blankPages.value].sort((a, b) => b - a)
  for (const index of sortedBlankPages) {
    pages[index].detach()
  }

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

Key implementation details

1. Canvas-based page analysis

Render each page to canvas and analyze pixel data:

const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
const pixels = imageData.data

// Count non-white pixels
for (let i = 0; i < pixels.length; i += 4) {
  if (r < threshold || g < threshold || b < threshold) {
    nonWhitePixels++
  }
}

2. Blank detection threshold

Adjust sensitivity based on document type:

const isBlank = (nonWhitePixels / totalPixels) < blankThreshold
// blankThreshold: 0.01 = 1% non-white pixels

3. Safe page removal

Remove pages in reverse order to maintain correct indices:

const sortedBlankPages = [...blankPages.value].sort((a, b) => b - a)
for (const index of sortedBlankPages) {
  pages[index].detach()
}

4. Progress feedback

Show detection progress for large PDFs:

const progress = computed(() => {
  if (!pages.value.length) return 0
  return Math.round((blankPages.value.length / pages.value.length) * 100)
})

Limitations

Rendering quality

Canvas rendering may not capture all page content accurately.

Solution: Use high-quality rendering settings and multiple detection methods.

Hidden content

Some "blank" pages may have hidden text or images.

Solution: Use advanced detection with multiple analysis methods.

Performance

Large PDFs with many pages may take time to analyze.

Solution: Process pages in batches or use Web Workers.

Summary

Building a browser-based blank page removal tool involves:

Rendering each page to canvas
Analyzing pixel data for blankness
Collecting blank page indices
Removing pages in reverse order
Saving and downloading the cleaned PDF

Try it at en.sotool.top/remove-blank-pages.

How to Crop PDF Margins in the Browser with Vue 3 and pdf-lib

sunshey — Sat, 05 Sep 2026 12:30:42 +0000

Cropping PDF margins in the browser requires careful handling of page dimensions and crop boxes. Here's how to build a browser-based PDF crop tool with Vue 3 and pdf-lib.

The challenge: Managing crop boxes

PDF cropping involves:

Setting the crop box (visible area) for each page
Calculating margin offsets from page dimensions
Supporting different crop presets (A4, Letter, custom)
Preserving content while removing white space

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, PDFFont, rgb, StandardFonts } from 'pdf-lib'

type CropMode = 'uniform' | 'custom' | 'preset'

const file = ref<File | null>(null)
const cropMode = ref<CropMode>('uniform')
const margins = ref({ top: 50, bottom: 50, left: 50, right: 50 })
const preset = ref<'a4' | 'letter' | 'custom'>('a4')
const cropping = ref(false)
const result = ref<Uint8Array | null>(null)

async function cropPdf() {
  if (!file.value) return
  cropping.value = true

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

  for (const page of pages) {
    const width = page.getWidth()
    const height = page.getHeight()

    // Calculate crop box
    const cropX = margins.value.left
    const cropY = height - margins.value.top
    const cropWidth = width - margins.value.left - margins.value.right
    const cropHeight = height - margins.value.top - margins.value.bottom

    page.setCropBox(cropX, cropY, cropWidth, cropHeight)
  }

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

Key implementation details

1. Crop box calculation

The crop box defines the visible area of each page:

const cropX = margins.left
const cropY = height - margins.top
const cropWidth = width - margins.left - margins.right
const cropHeight = height - margins.top - margins.bottom

page.setCropBox(cropX, cropY, cropWidth, cropHeight)

2. Unit conversion

Convert between points and other units:

const pointsToInches = (points: number) => points / 72
const inchesToPoints = (inches: number) => inches * 72

3. Preset margins

Common paper size presets:

const presets: Record<string, { top: number; bottom: number; left: number; right: number }> = {
  a4: { top: 72, bottom: 72, left: 72, right: 72 },  // 1 inch
  letter: { top: 72, bottom: 72, left: 72, right: 72 },
  narrow: { top: 36, bottom: 36, left: 36, right: 36 },  // 0.5 inch
}

4. Preview generation

Generate a thumbnail preview of the cropped result:

function generatePreview(): string {
  // Use canvas to render a preview
  // This requires pdf.js for rendering
}

Limitations

No real-time preview

pdf-lib doesn't support real-time preview without rendering.

Solution: Generate static previews or use pdf.js for rendering.

Crop box vs. media box

Changing the crop box doesn't remove content; it just changes the visible area.

Solution: Use pdf-lib's trim or crop methods for actual content removal.

Large files

Very large PDFs may cause memory issues.

Solution: Process in smaller batches or use Web Workers.

Summary

Building a browser-based PDF crop tool involves:

Loading the PDF with pdf-lib
Calculating crop box dimensions
Setting the crop box for each page
Saving and downloading the cropped PDF

Try it at en.sotool.top/crop-pdf.

How to Add Page Numbers to PDF in the Browser with Vue 3 and pdf-lib

sunshey — Fri, 04 Sep 2026 12:27:53 +0000

Adding page numbers to PDFs in the browser involves positioning text correctly and handling different page layouts. Here's how to build a browser-based PDF page numbering tool with Vue 3 and pdf-lib.

The challenge: Positioning and formatting

Page number implementation requires:

Calculating correct X/Y coordinates for different positions
Supporting various formats (1, 2, 3 or 1 of 10, Page 1, etc.)
Handling different page sizes (A4, Letter, etc.)
Applying consistent styling across all pages

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

type Position = 'top-left' | 'top-center' | 'top-right' | 
               'bottom-left' | 'bottom-center' | 'bottom-right'

const file = ref<File | null>(null)
const position = ref<Position>('bottom-center')
const format = ref<'simple' | 'of-total' | 'page-prefix'>('simple')
const fontSize = ref(12)
const startingNumber = ref(1)
const numbering = ref(false)
const result = ref<Uint8Array | null>(null)

async function addPageNumbers() {
  if (!file.value) return
  numbering.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await PDFDocument.load(arrayBuffer)
  const pages = pdf.getPages()
  const font = await pdf.embedFont(StandardFonts.Helvetica)

  const totalPages = pages.length
  const margin = 50

  for (let i = 0; i < totalPages; i++) {
    const page = pages[i]
    const { width, height } = page.getSize()
    const pageNum = i + startingNumber.value

    let text = format.value === 'simple' 
      ? String(pageNum)
      : format.value === 'of-total'
      ? `${pageNum} / ${totalPages}`
      : `Page ${pageNum}`

    let x: number
    let y: number

    switch (position.value) {
      case 'top-left':
        x = margin
        y = height - margin - fontSize.value
        break
      case 'top-center':
        x = (width - 50) / 2
        y = height - margin - fontSize.value
        break
      case 'top-right':
        x = width - margin - 50
        y = height - margin - fontSize.value
        break
      case 'bottom-left':
        x = margin
        y = margin
        break
      case 'bottom-center':
        x = (width - 50) / 2
        y = margin
        break
      case 'bottom-right':
        x = width - margin - 50
        y = margin
        break
    }

    page.drawText(text, {
      x,
      y,
      size: fontSize.value,
      font,
      color: rgb(0, 0, 0),
    })
  }

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

Key implementation details

1. Position calculation

Calculate coordinates based on page dimensions and margins:

const margin = 50
switch (position) {
  case 'bottom-center':
    x = (width - textWidth) / 2
    y = margin
    break
  // ... other positions
}

2. Format options

Support different numbering formats:

const text = format === 'simple' 
  ? String(pageNum)
  : format === 'of-total'
  ? `${pageNum} / ${totalPages}`
  : `Page ${pageNum}`

3. Starting number

Allow customization of the starting page number:

const pageNum = i + startingNumber.value

4. Font embedding

Always embed fonts for consistent rendering:

const font = await pdf.embedFont(StandardFonts.Helvetica)

Limitations

No preview without rendering

pdf-lib doesn't provide real-time preview of page numbers.

Solution: Show a static preview or render thumbnails separately.

Limited formatting options

Basic text positioning only; no headers/footers with images.

Solution: Use desktop software for complex formatting.

Page size variations

Different page sizes require position adjustments.

Solution: Calculate positions dynamically based on page dimensions.

Summary

Building a browser-based PDF page numbering tool involves:

Loading the PDF with pdf-lib
Calculating position coordinates for each page
Drawing page numbers with the correct format
Saving and downloading the numbered PDF

Try it at en.sotool.top/page-numbers.

How to Decrypt PDF Files in the Browser with Vue 3 and pdf-lib

sunshey — Thu, 03 Sep 2026 13:09:18 +0000

Decrypting PDFs in the browser requires handling password authentication and supporting different encryption methods. Here's how to build a browser-based PDF decryption tool with Vue 3 and pdf-lib.

The challenge: Password handling and encryption methods

PDF decryption involves:

Accepting and validating password input
Supporting different encryption levels (40-bit, 128-bit, 256-bit)
Handling both owner and user passwords
Providing clear error messages for failed attempts

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 password = ref('')
const decrypting = ref(false)
const result = ref<Uint8Array | null>(null)
const error = ref('')

async function decryptPdf() {
  if (!file.value || !password.value) {
    error.value = 'Please upload a PDF and enter the password'
    return
  }

  decrypting.value = true
  error.value = ''

  try {
    const arrayBuffer = await file.value.arrayBuffer()

    // Try to load with the provided password
    const pdf = await PDFDocument.load(arrayBuffer, {
      password: password.value,
      ignoreEncryption: false,
    })

    // If we got here, decryption succeeded
    // Remove encryption by saving without password
    result.value = await pdf.save({
      encryption: undefined,
    })

  } catch (e: any) {
    if (e.message?.includes('password') || e.message?.includes('decrypt')) {
      error.value = 'Incorrect password. Please try again.'
    } else {
      error.value = `Failed to decrypt: ${e.message}`
    }
  } finally {
    decrypting.value = false
  }
}
</script>

Key implementation details

1. Password input validation

Validate password before attempting decryption:

if (!password.value.trim()) {
  error.value = 'Password is required'
  return
}

2. Error handling for wrong passwords

Distinguish between wrong password and other errors:

try {
  const pdf = await PDFDocument.load(arrayBuffer, {
    password: password.value,
  })
  // Success
} catch (e) {
  if (e.message?.toLowerCase().includes('password')) {
    error.value = 'Incorrect password'
  } else {
    error.value = 'Failed to process file'
  }
}

3. Removing encryption

After successful decryption, save without encryption to create an unprotected PDF:

const decryptedPdf = await PDFDocument.load(arrayBuffer, {
  password: password.value,
})

const decrypted = await decryptedPdf.save({
  encryption: undefined, // Remove all encryption
})

4. Loading states and UX

Provide clear feedback during decryption:

const decrypting = ref(false)

async function decryptPdf() {
  decrypting.value = true
  try {
    // ... decryption logic
  } finally {
    decrypting.value = false
  }
}

Limitations

No password recovery

The tool cannot recover forgotten passwords; it can only remove encryption when the correct password is known.

Solution: Only use this tool when you know the password or have permission to access the document.

Strong encryption support

Very strong encryption (256-bit with complex permissions) may not be supported by browser-based libraries.

Solution: Use desktop software like Adobe Acrobat for strong encryption.

Multiple password types

PDFs may have both an "owner password" (for permissions) and a "user password" (for opening). This tool focuses on removing permission restrictions.

Solution: Understand the type of password protection before attempting decryption.

Summary

Building a browser-based PDF decryption tool involves:

Accepting the encrypted PDF and password
Attempting to load the PDF with the provided password
Saving the PDF without encryption if successful
Providing clear error messages for failures

Try it at en.sotool.top/decrypt.

How to Encrypt PDF Files in the Browser with Vue 3 and pdf-lib

sunshey — Wed, 02 Sep 2026 13:45:31 +0000

Encrypting PDFs in the browser requires careful handling of passwords and encryption standards. Here's how to build a browser-based PDF encryption tool with Vue 3 and pdf-lib.

The challenge: Password management and security

PDF encryption involves:

Generating secure encryption keys from passwords
Supporting different encryption levels (128-bit, 256-bit)
Setting document permissions (print, copy, modify)
Ensuring compatibility with PDF readers

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

const file = ref<File | null>(null)
const password = ref('')
const confirmPassowrd = ref('')
const encryptionLevel = ref<128 | 256>(256)
const encrypting = ref(false)
const result = ref<Uint8Array | null>(null)

async function encryptPdf() {
  if (!file.value || !password.value) return
  if (password.value !== confirmPassowrd.value) {
    alert('Passwords do not match')
    return
  }

  encrypting.value = true

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

  const encryptionOptions: EncryptionOptions = {
    ownerPassword: password.value,
    userPassword: password.value,
    permissions: {
      printing: 'highResolution',
      modifying: false,
      copying: false,
      annotating: false,
      fillingForms: false,
      contentAccessibility: false,
      documentAssembly: false,
    },
    encryption: encryptionLevel.value === 256 ? 'AES_256' : 'AES_128',
  }

  result.value = await pdf.save({
    encryption: encryptionOptions,
  })

  encrypting.value = false
}
</script>

Key implementation details

1. Password validation

Ensure passwords match and meet minimum requirements:

if (password.value !== confirmPassowrd.value) {
  throw new Error('Passwords do not match')
}
if (password.value.length < 8) {
  throw new Error('Password must be at least 8 characters')
}

2. Encryption level selection

pdf-lib supports both 128-bit and 256-bit encryption:

const encryption = encryptionLevel.value === 256 
  ? 'AES_256' 
  : 'AES_128'

3. Permission settings

Control what recipients can do with the encrypted PDF:

permissions: {
  printing: 'highResolution',  // Allow high-res printing
  modifying: false,            // Prevent modifications
  copying: false,              // Prevent text extraction
  annotating: false,           // Prevent annotations
  fillingForms: false,         // Prevent form filling
  contentAccessibility: false, // Prevent screen reader access
  documentAssembly: false,     // Prevent document assembly
}

4. Password strength feedback

Provide real-time feedback on password strength:

const passwordStrength = computed(() => {
  const pwd = password.value
  let strength = 0
  if (pwd.length >= 8) strength++
  if (/[A-Z]/.test(pwd)) strength++
  if (/[a-z]/.test(pwd)) strength++
  if (/[0-9]/.test(pwd)) strength++
  if (/[^A-Za-z0-9]/.test(pwd)) strength++
  return strength
})

Limitations

No password recovery

If the password is lost, the PDF cannot be decrypted.

Solution: Always store passwords securely and provide clear warnings.

Browser memory

Very large PDFs may cause memory issues during encryption.

Solution: Process in smaller batches or use Web Workers.

Compatibility

Some older PDF readers don't support 256-bit encryption.

Solution: Offer 128-bit as a fallback option.

Summary

Building a browser-based PDF encryption tool involves:

Loading the PDF with pdf-lib
Validating password strength and confirmation
Applying encryption with desired permissions
Saving and downloading the encrypted PDF

Try it at en.sotool.top/encrypt.

How to Add Watermarks to PDF Files in the Browser with Vue 3 and pdf-lib

sunshey — Tue, 01 Sep 2026 12:51:16 +0000

Adding watermarks to PDFs in the browser involves positioning, opacity control, and handling both text and image watermarks. Here's how to build a browser-based PDF watermark tool with Vue 3 and pdf-lib.

The challenge: Positioning and opacity

Watermark implementation requires:

Drawing text or images on each page
Controlling opacity for subtle background effects
Supporting rotation and positioning
Handling both text and image watermarks

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

const file = ref<File | null>(null)
const watermarkText = ref('CONFIDENTIAL')
const opacity = ref(0.2)
const rotation = ref(45)
const watermarking = ref(false)
const result = ref<Uint8Array | null>(null)

async function addWatermark() {
  if (!file.value) return
  watermarking.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await PDFDocument.load(arrayBuffer)
  const pages = pdf.getPages()
  const font = await pdf.embedFont(StandardFonts.Helvetica)

  for (const page of pages) {
    const { width, height } = page.getSize()

    page.drawText(watermarkText.value, {
      x: width / 2 - 100,
      y: height / 2,
      size: 50,
      font,
      color: rgb(0.5, 0.5, 0.5),
      opacity: opacity.value,
      rotate: { type: 'degrees', angle: rotation.value },
    })
  }

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

Key implementation details

1. Text watermark

Use pdf-lib's drawText with opacity and rotation:

page.drawText(text, {
  x: width / 2 - textWidth / 2,
  y: height / 2,
  size: 50,
  font,
  color: rgb(0.5, 0.5, 0.5),
  opacity: 0.2,
  rotate: { type: 'degrees', angle: 45 },
})

2. Image watermark

For image watermarks, embed and draw the image:

const imageData = await file.arrayBuffer()
const image = await pdf.embedPng(imageData)
const { width, height } = page.getSize()

page.drawImage(image, {
  x: 0,
  y: 0,
  width: width * 0.5,
  height: height * 0.5,
  opacity: opacity.value,
})

3. Multi-page application

Apply watermark to all pages or specific pages:

const pages = pdf.getPages()
for (const page of pages) {
  // Apply watermark to each page
}

4. Opacity control

pdf-lib supports opacity in the 0-1 range:

opacity: Number(opacity.value) // 0.0 to 1.0

Limitations

No real-time preview

pdf-lib doesn't support real-time preview without rendering.

Solution: Show a static preview or render thumbnails separately.

Limited positioning options

Basic text positioning is supported, but complex layouts may need more.

Solution: Calculate positions based on page dimensions.

Large files

Very large PDFs may cause memory issues.

Solution: Process in smaller batches or use Web Workers.

Summary

Building a browser-based PDF watermark tool involves:

Loading the PDF with pdf-lib
Drawing text or images on each page
Controlling opacity and rotation
Saving and downloading the watermarked PDF

Try it at en.sotool.top/watermark.

How to Split PDF Files in the Browser with Vue 3 and pdf-lib

sunshey — Mon, 31 Aug 2026 11:56:43 +0000

Splitting PDF files in the browser requires careful handling of page ranges and memory management. Here's how to build a browser-based PDF split tool with Vue 3 and pdf-lib.

The challenge: Managing page ranges

When splitting PDFs, you need to:

Support multiple split modes (by range, by count, by selection)
Handle large PDFs without memory issues
Provide clear preview of split results
Preserve document structure where possible

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 splitMode = ref<'range' | 'count' | 'custom'>('range')
const splitRanges = ref<{ start: number; end: number }[]>([])
const splitting = ref(false)
const results = ref<Array<{ name: string; data: Uint8Array }>>([])

async function splitPdf() {
  if (!file.value) return
  splitting.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const sourcePdf = await PDFDocument.load(arrayBuffer)
  const totalPages = sourcePdf.getPageCount()
  results.value = []

  for (const range of splitRanges.value) {
    const newPdf = await PDFDocument.create()
    const indices = Array.from(
      { length: range.end - range.start + 1 },
      (_, i) => range.start + i
    )
    const pages = await newPdf.copyPages(sourcePdf, indices)
    pages.forEach(page => newPdf.addPage(page))

    results.value.push({
      name: `split_${range.start + 1}-${range.end + 1}.pdf`,
      data: await newPdf.save(),
    })
  }

  splitting.value = false
}
</script>

Key implementation details

1. Page index conversion

pdf-lib uses 0-based indexing, but users think in 1-based:

const indices = Array.from(
  { length: range.end - range.start + 1 },
  (_, i) => range.start + i  // Convert 1-based to 0-based
)

2. Copying pages between PDFs

const pages = await newPdf.copyPages(sourcePdf, indices)
pages.forEach(page => newPdf.addPage(page))

3. Multiple output files

Store results as named Uint8Array pairs:

results.value.push({
  name: `split_${start}-${end}.pdf`,
  data: await newPdf.save(),
})

4. Memory management

Process pages sequentially to avoid memory issues:

for (const range of splitRanges.value) {
  const newPdf = await PDFDocument.create()
  // ... process range ...
  results.value.push({ name, data })
}

Limitations

No undo

Once split, original pages are distributed across files.

Solution: Always keep the original PDF.

Large files

Very large PDFs may cause memory issues when loading all pages.

Solution: Process in smaller batches.

Password-protected PDFs

Encrypted PDFs cannot be split without the password.

Solution: Remove encryption first.

Summary

Building a browser-based PDF split tool involves:

Loading the source PDF with pdf-lib
Validating page ranges (1-based to 0-based)
Copying pages to new PDFDocument instances
Returning multiple download links

Try it at en.sotool.top/split.

How to Compress PDF Files in the Browser with Vue 3 and pdf-lib

sunshey — Fri, 28 Aug 2026 11:24:49 +0000

Compressing PDF files in the browser requires careful balancing of file size reduction and quality preservation. Here's how to build a browser-based PDF compression tool with Vue 3 and pdf-lib.

The challenge: Quality vs. Size

PDF compression involves trade-offs:

Reducing image quality to shrink file size
Removing unnecessary metadata
Subsetting or removing fonts
Optimizing vector graphics

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 quality = ref<'low' | 'medium' | 'high'>('medium')
const compressing = ref(false)
const result = ref<Uint8Array | null>(null)
const originalSize = ref(0)
const compressedSize = ref(0)

async function compressPdf() {
  if (!file.value) return
  compressing.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  originalSize.value = arrayBuffer.byteLength

  const pdf = await PDFDocument.load(arrayBuffer, {
    ignoreEncryption: true,
  })

  // Remove unnecessary metadata
  pdf.setTitle('')
  pdf.setAuthor('')
  pdf.setSubject('')
  pdf.setKeywords([])
  pdf.setProducer('')
  pdf.setCreator('')

  // Compress embedded images by re-encoding
  const pages = pdf.getPages()
  for (const page of pages) {
    const width = page.getWidth()
    const height = page.getHeight()
    // Trigger image compression during save
    page.setSize(width, height)
  }

  const options = {
    useObjectStreams: true,
    addDefaultPage: false,
  }

  result.value = await pdf.save(options)
  compressedSize.value = result.value.byteLength
  compressing.value = false
}

const compressionRatio = computed(() => {
  if (!originalSize.value || !compressedSize.value) return 0
  return Math.round((1 - compressedSize.value / originalSize.value) * 100)
})
</script>

Key implementation details

1. Metadata cleanup

Removing metadata reduces file size without affecting content:

pdf.setTitle('')
pdf.setAuthor('')
pdf.setSubject('')
pdf.setKeywords([])
pdf.setProducer('')
pdf.setCreator('')

2. Object streams

Enable object streams for better compression:

const options = { useObjectStreams: true }
const compressed = await pdf.save(options)

3. Quality settings

Adjust compression aggressiveness based on user preference:

async function compressWithQuality(arrayBuffer: ArrayBuffer, level: 'low' | 'medium' | 'high'): Promise<Uint8Array> {
  const pdf = await PDFDocument.load(arrayBuffer, { ignoreEncryption: true })

  // Remove metadata
  pdf.setTitle('')
  pdf.setAuthor('')
  pdf.setSubject('')
  pdf.setKeywords([])
  pdf.setProducer('')
  pdf.setCreator('')

  const options = { useObjectStreams: level !== 'low' }
  return await pdf.save(options)
}

4. Progress feedback

Show compression ratio in real-time:

const compressionRatio = computed(() => {
  if (!originalSize.value || !compressedSize.value) return 0
  return Math.round((1 - compressedSize.value / originalSize.value) * 100)
})

Limitations

No image re-encoding

pdf-lib doesn't re-encode embedded images for maximum compression.

Solution: For image-heavy PDFs, consider using a dedicated compression tool or desktop software.

Font subsetting

pdf-lib doesn't subset fonts automatically.

Solution: This is handled at the browser level by the PDF viewer's rendering engine.

Large files

Very large PDFs may cause memory issues.

Solution: Process in smaller batches or use Web Workers.

Summary

Building a browser-based PDF compression tool involves:

Loading the PDF with pdf-lib
Removing unnecessary metadata
Enabling object streams for better compression
Showing compression ratio to the user

Try it at en.sotool.top/compress.

How to Merge PDF Files in the Browser with Vue 3 and pdf-lib

sunshey — Thu, 27 Aug 2026 12:44:52 +0000

Combining multiple PDFs into one seems simple, but there are important considerations around file ordering and memory management. Here's how to build a browser-based PDF merge tool with Vue 3 and pdf-lib.

The challenge: Managing multiple documents

When merging PDFs, you need to:

Load multiple PDF files in the browser
Display thumbnails for ordering
Merge page streams without losing content
Handle large files without crashing

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 files = ref<File[]>([])
const merging = ref(false)
const result = ref<Uint8Array | null>(null)

async function mergePdfs() {
  if (files.value.length === 0) return
  merging.value = true

  const mergedPdf = await PDFDocument.create()

  for (const file of files.value) {
    const arrayBuffer = await file.arrayBuffer()
    const pdf = await PDFDocument.load(arrayBuffer)
    const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices())
    pages.forEach(page => mergedPdf.addPage(page))
  }

  result.value = await mergedPdf.save()
  merging.value = false
}

function reorderFiles(fromIndex: number, toIndex: number) {
  const updated = [...files.value]
  const [removed] = updated.splice(fromIndex, 1)
  updated.splice(toIndex, 0, removed)
  files.value = updated
}
</script>

Key implementation details

1. Loading multiple PDFs

Use the File API to read each file as an ArrayBuffer:

const arrayBuffer = await file.arrayBuffer()
const pdf = await PDFDocument.load(arrayBuffer)

2. Copying pages between PDFs

pdf-lib requires explicit page copying:

const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices())
pages.forEach(page => mergedPdf.addPage(page))

3. Drag-and-drop reordering

Implement a simple index-based reorder:

function reorderFiles(fromIndex: number, toIndex: number) {
  const updated = [...files.value]
  const [removed] = updated.splice(fromIndex, 1)
  updated.splice(toIndex, 0, removed)
  files.value = updated
}

4. Memory management

For large files, process sequentially:

for (const file of files.value) {
  const pdf = await PDFDocument.load(await file.arrayBuffer())
  const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices())
  pages.forEach(page => mergedPdf.addPage(page))
}

Limitations

No undo

Once merged, files cannot be separated.

Solution: Always keep backups of original files.

Large files

Very large PDFs may cause memory issues in the browser.

Solution: Process files in smaller batches or use Web Workers.

Password-protected PDFs

Encrypted PDFs cannot be merged without the password.

Solution: Remove encryption first.

Summary

Building a browser-based PDF merge tool involves:

Loading multiple PDFs with the File API
Copying pages between PDFDocument instances
Providing drag-and-drop reordering
Saving and downloading the merged result

Try it at en.sotool.top/merge.

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

sunshey — Wed, 26 Aug 2026 13:43:09 +0000

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

The challenge: Selective page rotation

When rotating PDF pages, you need to:

Display page thumbnails with current rotation state
Allow users to select specific pages
Apply rotation without affecting other pages
Handle the case where a page is already rotated 90° and needs another 90°

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

Key implementation details

1. Rotation state management

Use a Map to track which pages have non-zero rotation:

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

This keeps the state lightweight — only modified pages are stored.

2. Cumulative rotation

PDF-lib stores rotation as an angle. Adding rotations is straightforward:

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

3. Visual feedback

Show rotation state in the thumbnail:

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

4. Undo support

Since pdf-lib doesn't support undo, offer a "reset all" option:

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

Limitations

No undo

Once rotated, pages cannot be reverted without the original file.

Solution: Always keep a backup of the original PDF.

Large files

Very large PDFs may cause memory issues when loading thumbnails.

Solution: Load thumbnails lazily or use Web Workers for rendering.

Summary

Building a browser-based PDF rotation tool involves:

Loading the PDF with pdf-lib
Displaying page thumbnails with rotation state
Applying rotation to selected pages only
Saving and downloading the modified PDF

Try it at en.sotool.top/rotate.