DEV Community

sunshey
sunshey

Posted on

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

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:

  1. Accepting and validating password input
  2. Supporting different encryption levels (40-bit, 128-bit, 256-bit)
  3. Handling both owner and user passwords
  4. 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>
Enter fullscreen mode Exit fullscreen mode

Key implementation details

1. Password input validation

Validate password before attempting decryption:

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

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'
  }
}
Enter fullscreen mode Exit fullscreen mode

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
})
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

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

Try it at en.sotool.top/decrypt.

Top comments (0)