DEV Community: sunshey

How to Convert PDF to Word in the Browser with Vue 3 and pdf-lib

sunshey — Thu, 20 Aug 2026 12:15:44 +0000

Converting PDF to Word seems straightforward, but the reality is more complex. PDF stores text as character coordinates, while Word uses structured paragraphs. Bridging this gap requires careful text extraction and order reconstruction.

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

The challenge: PDF vs Word

PDF is a presentation format — text is positioned precisely on the page. Word is an editing format — text flows in paragraphs with styles. Converting between them means:

Extracting text from PDF coordinates
Reconstructing reading order
Generating structured DOCX output

The stack

Vue 3 with Composition API
pdf-lib for PDF parsing
docx for Word document generation
Vite for bundling

The core implementation

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

const file = ref<File | null>(null)
const processing = ref(false)
const result = ref<Blob | null>(null)

async function convertPdfToWord() {
  if (!file.value) return
  processing.value = true

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

  const allChunks: TextChunk[] = []

  for (const page of pages) {
    const textContent = await page.getTextContent()

    for (const item of textContent.items) {
      allChunks.push({
        text: item.text,
        x: item.transform[4],
        y: item.transform[5],
        size: item.size
      })
    }
  }

  // Sort by reading order
  const sorted = sortByReadingOrder(allChunks)

  // Generate DOCX
  const doc = new Document({
    sections: [{
      properties: {},
      children: sorted.map(chunk => 
        new Paragraph({
          children: [new TextRun(chunk.text)]
        })
      )
    }]
  })

  const blob = await doc.pack()
  result.value = blob
  processing.value = false
}

interface TextChunk {
  text: string
  x: number
  y: number
  size: number
}

function sortByReadingOrder(chunks: TextChunk[]): TextChunk[] {
  return chunks.sort((a, b) => {
    if (Math.abs(a.y - b.y) > 5) {
      return b.y - a.y  // Top to bottom
    }
    return a.x - b.x    // Left to right
  })
}
</script>

Key implementation details

1. Text extraction from PDF

pdf-lib's getTextContent() returns an array of text items with position and size:

const textContent = await page.getTextContent()
for (const item of textContent.items) {
  console.log(item.text, item.transform[4], item.transform[5])
}

2. Reading order reconstruction

PDF stores text in drawing order, not reading order. We sort by:

Y coordinate (descending): Top to bottom
X coordinate (ascending): Left to right

function sortByReadingOrder(chunks: TextChunk[]): TextChunk[] {
  return chunks.sort((a, b) => {
    if (Math.abs(a.y - b.y) > 5) {
      return b.y - a.y
    }
    return a.x - b.x
  })
}

3. DOCX generation

The docx library creates Word documents programmatically:

const doc = new Document({
  sections: [{
    children: chunks.map(chunk => 
      new Paragraph({ children: [new TextRun(chunk.text)] })
    )
  }]
})

4. Handling edge cases

Empty text: Skip items with empty text
Overlapping text: Detect and handle overlapping character positions
Multi-column: Group by X coordinate ranges for column detection

function detectColumns(chunks: TextChunk[], threshold = 100): TextChunk[][] {
  const xs = chunks.map(c => c.x)
  const min = Math.min(...xs)
  const max = Math.max(...xs)
  const range = max - min

  return Array.from({ length: Math.ceil(range / threshold) }, (_, i) =>
    chunks.filter(c => c.x >= min + i * threshold && c.x < min + (i + 1) * threshold)
  ).filter(col => col.length > 0)
}

Limitations

Scanned PDFs

Scanned PDFs are images, not text. pdf-lib can't extract text from images.

Solution: Detect empty text content and show error message.

Complex layouts

Multi-column, tables, and floating text are hard to reconstruct accurately.

Solution: Simple layout detection and graceful degradation.

Font encoding

Custom fonts may not map correctly to Word fonts.

Solution: Use standard font fallbacks.

Summary

Building a browser-based PDF to Word converter involves:

Loading PDF with pdf-lib
Extracting text and coordinates
Sorting by reading order
Generating DOCX with docx library
Handling edge cases (scanned PDFs, complex layouts)

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

How to Fix Duplex Scan Page Order in the Browser with Vue 3 and pdf-lib

sunshey — Wed, 19 Aug 2026 14:22:04 +0000

Scanning documents double-sided is convenient, but the resulting PDF often has scrambled page order. The front pages are in sequence (1, 2, 3...), but the back pages are reversed (N, N-1, N-2...). Fixing this manually is tedious.

Here's how to build a browser-based duplex scan reorder tool with Vue 3 and pdf-lib.

The duplex scanning problem

Most scanners work in two passes for double-sided documents:

Front pass: Pages 1, 2, 3... N (normal order)
Back pass: Pages N, N-1, N-2... 1 (reversed order)

The resulting PDF combines both: 1, 2, 3... N, N, N-1, N-2... 1

We need to detect the segment boundary, reverse the back segment, and merge 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 scanMode = ref<'single' | 'two'>('single')
const processing = ref(false)
const result = ref<Uint8Array | null>(null)

async function reorderDuplexScan() {
  if (!file.value) return
  processing.value = true

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

  // Detect segment boundary by rotation or heuristics
  const frontPages: number[] = []
  const backPages: number[] = []

  let inFront = true
  for (let i = 0; i < totalPages; i++) {
    const page = pdf.getPage(i)
    const rotation = page.getRotation().angle

    // Back pages are often rotated 180°
    if (rotation === 180 && inFront) {
      inFront = false
    }

    if (inFront) {
      frontPages.push(i)
    } else {
      backPages.push(i)
    }
  }

  // Reverse the back pages
  backPages.reverse()

  // Merge: front + reversed back
  const indices = [...frontPages, ...backPages]

  const newPdf = await PDFDocument.create()
  const [pages] = await newPdf.copyPages(pdf, indices)
  pages.forEach(p => newPdf.addPage(p))

  result.value = await newPdf.save()
  processing.value = false
}
</script>

Key implementation details

1. Segment detection

Detecting where the front segment ends and the back segment begins is crucial. Common approaches:

Rotation detection: Back pages are often rotated 180°
Content analysis: Detect page content changes
Manual segmentation: Let the user specify the boundary

// Heuristic: Find the first page with 180° rotation
function findSegmentBoundary(pdf: PDFDocument): number {
  for (let i = 0; i < pdf.getPageCount(); i++) {
    const rotation = pdf.getPage(i).getRotation().angle
    if (rotation === 180) return i
  }
  // Fallback: split in half
  return Math.floor(pdf.getPageCount() / 2)
}

2. Two-file merge mode

When users have separate front and back PDFs:

async function mergeTwoFiles(
  frontPdf: Uint8Array,
  backPdf: Uint8Array
): Promise<Uint8Array> {
  const front = await PDFDocument.load(frontPdf)
  const back = await PDFDocument.load(backPdf)

  const result = await PDFDocument.create()

  const frontCount = front.getPageCount()
  const backCount = back.getPageCount()
  const maxCount = Math.max(frontCount, backCount)

  // Interleave pages
  for (let i = 0; i < maxCount; i++) {
    if (i < frontCount) {
      const [page] = await result.copyPages(front, [i])
      result.addPage(page)
    }
    if (i < backCount) {
      const [page] = await result.copyPages(back, [i])
      result.addPage(page)
    }
  }

  return await result.save()
}

3. Handling edge cases

Odd page counts: If front has more pages than back, handle gracefully
Missing pages: Some pages might be blank or damaged
Mixed orientations: Pages might have different sizes

// Handle mismatched counts
const safeCount = Math.min(frontCount, backCount)
const extraFront = frontCount - safeCount
const extraBack = backCount - safeCount

// Add extra pages from the longer segment
for (let i = safeCount; i < frontCount; i++) {
  const [page] = await result.copyPages(front, [i])
  result.addPage(page)
}

Summary

Building a duplex scan reorder tool involves:

Loading the scanned PDF
Detecting segment boundaries (front vs back)
Reversing the back segment
Merging segments into correct order
Handling edge cases (odd counts, missing pages)

Try it at en.sotool.top/duplex-scan-reorder.

How to Build a Duplex Print Helper in the Browser with Vue 3 and pdf-lib

sunshey — Tue, 18 Aug 2026 13:57:17 +0000

Preparing a PDF for duplex (double-sided) printing seems simple — just separate odd and even pages. But getting the page order right for manual flipping is surprisingly tricky. If you print odd pages 1, 3, 5... and then even pages 2, 4, 6..., the pages won't bind correctly. The even pages need to be in reverse order so they align properly when flipped.

Here's how to build a browser-based duplex print helper with Vue 3 and pdf-lib.

The page ordering problem

For long-edge binding (book-style):

Front side	Back side
1, 3, 5, 7, 9...	8, 6, 4, 2 (reversed)

The even pages must be reversed because when you flip the stack, page 2 should be on the back of page 1, page 4 on the back of page 3, and so on.

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 bindingMode = ref<'long' | 'short'>('long')
const addBlankPage = ref(false)
const preparing = ref(false)
const result = ref<{ odd: Uint8Array; even: Uint8Array } | null>(null)

async function prepareDuplex() {
  if (!file.value) return
  preparing.value = true

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

  // Add blank page if needed for even count
  let effectivePages = totalPages
  if (addBlankPage.value && totalPages % 2 === 1) {
    const blankPage = pdf.addPage([pdf.getPage(0).getWidth(), pdf.getPage(0).getHeight()])
    effectivePages = totalPages + 1
  }

  // Separate odd and even pages
  const oddIndices: number[] = []
  const evenIndices: number[] = []

  for (let i = 0; i < effectivePages; i++) {
    if (i % 2 === 0) {
      oddIndices.push(i) // 0, 2, 4... = pages 1, 3, 5...
    } else {
      evenIndices.push(i) // 1, 3, 5... = pages 2, 4, 6...
    }
  }

  // For long-edge binding, reverse even pages
  if (bindingMode.value === 'long') {
    evenIndices.reverse()
  }

  // Create odd PDF
  const oddPdf = await PDFDocument.create()
  const [oddPages] = await oddPdf.copyPages(pdf, oddIndices)
  oddPages.forEach(page => oddPdf.addPage(page))
  const oddBytes = await oddPdf.save()

  // Create even PDF
  const evenPdf = await PDFDocument.create()
  const [evenPages] = await evenPdf.copyPages(pdf, evenIndices)
  evenPages.forEach(page => evenPdf.addPage(page))
  const evenBytes = await evenPdf.save()

  // Package as ZIP
  result.value = { odd: oddBytes, even: evenBytes }
  preparing.value = false
}
</script>

Key implementation details

1. Page index vs. page number

pdf-lib uses 0-based indexing internally, but users think in 1-based page numbers. The conversion:

Index 0 = Page 1 (odd)
Index 1 = Page 2 (even)
Index 2 = Page 3 (odd)
etc.

for (let i = 0; i < effectivePages; i++) {
  if (i % 2 === 0) {
    oddIndices.push(i)  // Pages 1, 3, 5...
  } else {
    evenIndices.push(i) // Pages 2, 4, 6...
  }
}

2. Reversing even pages

For long-edge binding, the even pages must be in reverse order:

// Original: [1, 3, 5, 7] → Pages 2, 4, 6, 8
// Reversed: [7, 5, 3, 1] → Pages 8, 6, 4, 2
evenIndices.reverse()

This ensures that when you print odd pages, flip the stack, and print even pages, the binding is correct.

3. Blank page handling

If the total page count is odd, add a blank page at the end:

if (addBlankPage.value && totalPages % 2 === 1) {
  const blankPage = pdf.addPage([width, height])
  effectivePages = totalPages + 1
}

4. ZIP packaging

Use JSZip to package both PDFs:

async function createZip(odd: Uint8Array, even: Uint8Array): Promise<Blob> {
  const zip = new JSZip()
  zip.file('odd-pages.pdf', odd)
  zip.file('even-pages.pdf', even)
  return await zip.generateAsync({ type: 'blob' })
}

Summary

Building a browser-based duplex print helper involves:

Loading the PDF and counting pages
Separating pages into odd and even groups
Reversing even pages for long-edge binding
Optionally adding a blank page for odd counts
Packaging as a ZIP with two PDFs

Try it at en.sotool.top/duplex-print-helper.

PDF Privacy Cleanup with Vue 3 and pdf-lib: Metadata, Annotations, Links & Inspection

sunshey — Mon, 17 Aug 2026 12:55:57 +0000

After building four separate privacy tools — Remove Metadata, Remove Annotations, Remove Links, and Privacy Inspector — I realized users need a unified workflow. Instead of running each tool separately, a comprehensive cleanup guide helps users understand the full privacy landscape and take action in the right order.

This post walks through the combined implementation and the recommended cleanup pipeline.

The cleanup pipeline

The correct order matters:

Inspect → Remove Metadata → Remove Annotations → Remove Links → Re-inspect

Inspect first to see what's hidden
Remove Metadata — strip document properties
Remove Annotations — clean review markup
Remove Links — strip hyperlinks
Re-inspect — verify nothing was missed

The stack

Vue 3 with Composition API
pdf-lib for PDF manipulation
PDF.js for text extraction and hidden content detection
Vite for bundling

Implementation overview

Each cleanup operation is a separate function that can be chained:

interface CleanupResult {
  metadata: DocumentMetadata
  annotationsRemoved: number
  linksRemoved: number
  javascriptRemoved: boolean
  hiddenTextRemoved: number
  riskScore: number
}

async function cleanupPdf(
  arrayBuffer: ArrayBuffer,
  options: CleanupOptions
): Promise<CleanupResult> {
  const pdf = await PDFDocument.load(arrayBuffer, {
    ignoreEncryption: true,
    updateMetadata: false,
  })

  const result: CleanupResult = {
    metadata: extractMetadata(pdf),
    annotationsRemoved: 0,
    linksRemoved: 0,
    javascriptRemoved: false,
    hiddenTextRemoved: 0,
    riskScore: 0,
  }

  // Step 1: Remove metadata
  if (options.removeMetadata) {
    pdf.setTitle('')
    pdf.setAuthor('')
    pdf.setSubject('')
    pdf.setKeywords([])
    pdf.setCreator('')
    pdf.setProducer('')
    result.metadata = extractMetadata(pdf)
  }

  // Step 2: Remove annotations
  if (options.removeAnnotations) {
    result.annotationsRemoved = await removeAnnotations(pdf)
  }

  // Step 3: Remove links
  if (options.removeLinks) {
    result.linksRemoved = await removeLinks(pdf)
  }

  // Step 4: Remove JavaScript
  if (options.removeJavaScript) {
    result.javascriptRemoved = await removeJavaScript(pdf)
  }

  // Save and return
  const cleaned = await pdf.save()
  result.riskScore = calculateRiskScore(result)
  return result
}

Key implementation details

1. Metadata removal

Simple — set each field to empty string:

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

2. Annotation removal with widget preservation

The key challenge is distinguishing widget annotations (form fields) from markup annotations:

async function removeAnnotations(pdf: PDFDocument): Promise<number> {
  let count = 0
  const pages = pdf.getPages()

  for (const page of pages) {
    const annots = page.node.lookup(PDFName.of('Annots'))
    if (!annots || !(annots instanceof PDFArray)) continue

    const kept = PDFArray.withContext(page.doc.context)
    const existing = annots.asArray()

    for (const annotRef of existing) {
      const annot = page.doc.context.lookup(annotRef)
      if (!(annot instanceof PDFDict)) {
        kept.push(annotRef)
        continue
      }

      const subtype = annot.get(PDFName.of('Subtype'))
      if (subtype === PDFName.of('Widget')) {
        kept.push(annotRef) // Keep form fields
      } else {
        count++ // Remove everything else
      }
    }

    if (kept.size() === 0) {
      page.node.delete(PDFName.of('Annots'))
    } else {
      page.node.set(PDFName.of('Annots'), kept)
    }
  }

  return count
}

3. Link removal

Links are also annotations with Subtype: /Link:

async function removeLinks(pdf: PDFDocument): Promise<number> {
  let count = 0
  const pages = pdf.getPages()

  for (const page of pages) {
    const annots = page.node.lookup(PDFName.of('Annots'))
    if (!annots || !(annots instanceof PDFArray)) continue

    const kept = PDFArray.withContext(page.doc.context)
    const existing = annots.asArray()

    for (const annotRef of existing) {
      const annot = page.doc.context.lookup(annotRef)
      if (!(annot instanceof PDFDict)) {
        kept.push(annotRef)
        continue
      }

      const subtype = annot.get(PDFName.of('Subtype'))
      if (subtype === PDFName.of('Link')) {
        count++
        continue // Skip — don't add to kept
      }

      kept.push(annotRef)
    }

    if (kept.size() === 0) {
      page.node.delete(PDFName.of('Annots'))
    } else {
      page.node.set(PDFName.of('Annots'), kept)
    }
  }

  return count
}

4. JavaScript detection and removal

JavaScript in PDFs is the highest privacy risk. It can execute on open and exfiltrate data:

async function removeJavaScript(pdf: PDFDocument): Promise<boolean> {
  // Check for JS in the PDF structure
  const pages = pdf.getPages()
  for (const page of pages) {
    const annots = page.node.lookup(PDFName.of('Annots'))
    if (!annots || !(annots instanceof PDFArray)) continue

    const annots_array = annots.asArray()
    for (const annotRef of annots_array) {
      const annot = page.doc.context.lookup(annotRef)
      if (!(annot instanceof PDFDict)) continue

      const action = annot.get(PDFName.of('A'))
      if (action instanceof PDFDict) {
        const s = action.get(PDFName.of('S'))
        if (s === PDFName.of('JavaScript')) {
          // Remove the annotation
          const kept = PDFArray.withContext(page.doc.context)
          for (const ref of annots_array) {
            if (ref !== annotRef) kept.push(ref)
          }
          page.node.set(PDFName.of('Annots'), kept)
          return true
        }
      }
    }
  }
  return false
}

Summary

Building a comprehensive PDF privacy cleanup pipeline involves:

Inspecting the document first (Privacy Inspector)
Removing metadata (simple field clearing)
Removing annotations while preserving form widgets (whitelist approach)
Removing links (filter by subtype)
Detecting and removing JavaScript (highest priority)
Re-inspecting to verify

Each operation is independent and can be combined. The full pipeline runs in the browser — your documents never leave your device. Try the cleanup tools at en.sotool.top.

How to Convert HEIC to PDF in the Browser with Vue 3 and Canvas

sunshey — Fri, 14 Aug 2026 11:32:10 +0000

Converting HEIC (High Efficiency Image Container) files to PDF seems straightforward — decode the image, embed it in a PDF. But HEIC adds complexity: browser support varies, EXIF orientation handling is tricky, and batch processing requires careful memory management.

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

The challenge

HEIC is not universally supported. While Safari and modern Chrome/Firefox support it natively, the support is inconsistent:

Safari: Full HEIC support
Chrome: HEIC support behind a flag (or in latest versions)
Firefox: Limited HEIC support
Mobile browsers: Varies by OS and version

The conversion approach must handle these variations gracefully.

The stack

Vue 3 with Composition API
HTML5 Canvas API for image decoding and rendering
jsPDF for PDF generation
Vite for bundling

The core implementation

<script setup lang="ts">
import { ref } from 'vue'
import jsPDF from 'jspdf'

const files = ref<File[]>([])
const converting = ref(false)
const progress = ref(0)
const progressTotal = ref(0)

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

  const pdf = new jsPDF({
    orientation: 'portrait',
    unit: 'mm',
    format: 'a4',
  })

  progressTotal.value = files.value.length

  for (let i = 0; i < files.value.length; i++) {
    progress.value = i + 1
    const file = files.value[i]

    try {
      // Decode HEIC using createImageBitmap (browser native)
      const bitmap = await createImageBitmap(file)

      // Handle EXIF orientation
      const orientedCanvas = await applyExifOrientation(bitmap, file)
      const imageData = orientedCanvas.toDataURL('image/jpeg', 0.92)

      // Add to PDF
      const pageWidth = pdf.internal.pageSize.getWidth()
      const pageHeight = pdf.internal.pageSize.getHeight()
      const imgWidth = orientedCanvas.width
      const imgHeight = orientedCanvas.height

      // Fit image to page while maintaining aspect ratio
      const ratio = Math.min(
        pageWidth / imgWidth,
        pageHeight / imgHeight
      )
      const drawWidth = imgWidth * ratio
      const drawHeight = imgHeight * ratio
      const x = (pageWidth - drawWidth) / 2
      const y = (pageHeight - drawHeight) / 2

      if (i > 0) pdf.addPage()
      pdf.addImage(imageData, 'JPEG', x, y, drawWidth, drawHeight)

    } catch (err) {
      console.error(`Failed to process ${file.name}:`, err)
    }
  }

  const pdfBlob = pdf.output('blob')
  downloadBlob(pdfBlob, 'heic-photos.pdf')
  converting.value = false
}

// Handle EXIF orientation from HEIC files
async function applyExifOrientation(
  bitmap: ImageBitmap,
  file: File
): Promise<HTMLCanvasElement> {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')!

  // Read EXIF orientation
  const orientation = await readExifOrientation(file)

  // Set canvas size based on orientation
  if (orientation === 6 || orientation === 8) {
    // Rotate 90° CW or CCW
    canvas.width = bitmap.height
    canvas.height = bitmap.width
  } else {
    canvas.width = bitmap.width
    canvas.height = bitmap.height
  }

  // Apply rotation
  ctx.translate(canvas.width / 2, canvas.height / 2)
  if (orientation === 6) ctx.rotate(Math.PI / 2)
  else if (orientation === 8) ctx.rotate(-Math.PI / 2)
  else if (orientation === 3 || orientation === 4) ctx.rotate(Math.PI)
  else if (orientation === 5) {
    ctx.rotate(Math.PI / 2)
    ctx.scale(1, -1)
  }
  else if (orientation === 7) {
    ctx.rotate(-Math.PI / 2)
    ctx.scale(1, -1)
  }
  else if (orientation === 2) ctx.scale(-1, 1)
  else if (orientation === 4) ctx.scale(1, -1)

  ctx.drawImage(bitmap, -bitmap.width / 2, -bitmap.height / 2)
  return canvas
}

// Read EXIF orientation from file
async function readExifOrientation(file: File): Promise<number> {
  const buffer = await file.slice(0, 65536).arrayBuffer()
  const view = new DataView(buffer)

  // Check for JPEG/EXIF header
  if (view.getUint16(0) !== 0xFFD8) return 1 // Not JPEG, no orientation

  // Find SOF0 marker and read orientation
  let offset = 2
  while (offset < buffer.byteLength) {
    const marker = view.getUint16(offset)
    if (marker === 0xFFE1) {
      // APP1 marker - look for EXIF
      const exifOffset = offset + 2 + 4 // Skip marker + "Exif\0\0"
      if (view.getUint16(exifOffset) === 0x4949) {
        // Intel byte order
        const ifdOffset = view.getUint32(exifOffset + 4)
        const orientation = view.getUint16(exifOffset + ifdOffset + 27)
        return orientation || 1
      }
    }
    offset += 2
  }
  return 1
}
</script>

Key implementation details

1. Browser HEIC support detection

Not all browsers support HEIC. Detect support and provide a fallback:

function isHeicSupported(): boolean {
  const img = new Image()
  return img.decode instanceof Function && 
         createImageBitmap instanceof Function
}

If HEIC is not supported, suggest the user convert to JPG first using a browser-based image converter.

2. Memory management for batch processing

Processing many large HEIC files can exhaust browser memory. Key strategies:

Process files sequentially, not in parallel
Release bitmaps after each conversion
Show progress to prevent timeout perceptions

// Sequential processing with memory cleanup
for (let i = 0; i < files.value.length; i++) {
  const bitmap = await createImageBitmap(files.value[i])
  // ... process ...
  bitmap.close() // Release GPU memory
}

3. EXIF orientation handling

HEIC files from iPhones store orientation in EXIF data. Without reading and applying this orientation, photos may appear rotated incorrectly in the PDF. The applyExifOrientation function reads EXIF and applies the correct rotation before rendering.

4. Image quality settings

The conversion uses JPEG compression at 92% quality:

const imageData = canvas.toDataURL('image/jpeg', 0.92)

This balances file size and quality. For print-quality output, increase to 0.95-0.98. For web submission, 0.85-0.90 may be sufficient.

5. Multi-page PDF generation

jsPDF handles multi-page PDFs automatically with pdf.addPage(). Each HEIC file becomes one page. For multiple images per page, calculate grid positions and use pdf.image() with coordinates.

Summary

Building a browser-based HEIC-to-PDF converter involves:

Detecting browser HEIC support
Decoding HEIC using createImageBitmap
Reading and applying EXIF orientation
Rendering to canvas and converting to JPEG
Embedding into a multi-page PDF with jsPDF
Managing memory for batch processing

The result: iPhone photos converted to universally compatible PDFs, processed entirely locally. Try it at en.sotool.top/heic-to-pdf.

How to Build a PDF Privacy Inspector in the Browser with Vue 3 and pdf-lib

sunshey — Thu, 13 Aug 2026 12:40:21 +0000

Every PDF carries hidden information — metadata, embedded files, JavaScript, invisible text, tracking links. When you receive a PDF from an unknown source or prepare to share your own document, you need to know what's inside.

Building a browser-based PDF privacy inspector involves extracting and categorizing all hidden information from a PDF without uploading it anywhere. Here's how to do it with Vue 3 and pdf-lib.

The approach

The inspector reads the PDF structure and extracts information from multiple layers:

Document info dictionary — standard metadata (author, title, creator, etc.)
XMP metadata — extended metadata including camera settings, GPS, editing history
Embedded files — attachments stored within the PDF
JavaScript — embedded scripts that execute on open
Links and actions — URI actions, GoTo actions, embedded URLs
Form data — filled form fields with personal information
Custom properties — non-standard metadata fields

The stack

Vue 3 with Composition API
pdf-lib for PDF structure analysis
PDF.js for content-level analysis (hidden text, images)
Vite for bundling

The core implementation

<script setup lang="ts">
import { ref } from 'vue'
import { PDFDocument } from 'pdf-lib'
import * as pdfjsLib from 'pdfjs-dist'

const file = ref<File | null>(null)
const report = ref<PrivacyReport | null>(null)
const inspecting = ref(false)

interface PrivacyReport {
  fileName: string
  fileSize: number
  fileSizeFormatted: string
  pageCount: number
  isEncrypted: boolean
  hasPassword: boolean
  metadata: DocumentMetadata
  xmpMetadata: Record<string, string>
  embeddedFiles: EmbeddedFileInfo[]
  hasJavaScript: boolean
  javascriptSources: string[]
  linkCount: number
  linkUrls: string[]
  formFields: FormFieldInfo[]
  hiddenTextCount: number
  fontCount: number
  imageCount: number
  riskScore: number
  riskLevel: 'low' | 'medium' | 'high' | 'critical'
  recommendations: string[]
}

async function inspectPdf() {
  if (!file.value) return
  inspecting.value = true

  try {
    const arrayBuffer = await file.value.arrayBuffer()
    const pdf = await PDFDocument.load(arrayBuffer, {
      ignoreEncryption: true,
      updateMetadata: false,
    })

    const pdfJsDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
    const report: PrivacyReport = {
      fileName: file.value.name,
      fileSize: file.value.size,
      fileSizeFormatted: formatFileSize(file.value.size),
      pageCount: pdf.getPageCount(),
      isEncrypted: pdf.isEncrypted(),
      hasPassword: false,
      metadata: extractMetadata(pdf),
      xmpMetadata: await extractXMP(arrayBuffer),
      embeddedFiles: await extractEmbeddedFiles(pdf),
      hasJavaScript: await checkJavaScript(pdf),
      javascriptSources: [],
      linkCount: 0,
      linkUrls: [],
      formFields: await extractFormFields(pdf),
      hiddenTextCount: await countHiddenText(pdfJsDoc),
      fontCount: 0,
      imageCount: 0,
      riskScore: 0,
      riskLevel: 'low',
      recommendations: [],
    }

    // Calculate risk score and level
    report.riskScore = calculateRiskScore(report)
    report.riskLevel = determineRiskLevel(report.riskScore)
    report.recommendations = generateRecommendations(report)

    report.value = report
  } catch (e) {
    console.error('Inspection failed:', e)
  } finally {
    inspecting.value = false
  }
}

function extractMetadata(pdf: PDFDocument): DocumentMetadata {
  return {
    title: pdf.getTitle() || '(not set)',
    author: pdf.getAuthor() || '(not set)',
    subject: pdf.getSubject() || '(not set)',
    keywords: pdf.getKeywords() || '(not set)',
    creator: pdf.getCreator() || '(not set)',
    producer: pdf.getProducer() || '(not set)',
    creationDate: pdf.getCreationDate()?.toISOString() || '(not set)',
    modificationDate: pdf.getModificationDate()?.toISOString() || '(not set)',
  }
}
</script>

Key implementation details

1. XMP metadata extraction

XMP metadata is stored as an XML stream within the PDF. We extract it directly from the PDF's binary data:

async function extractXMP(arrayBuffer: ArrayBuffer): Promise<Record<string, string>> {
  const xmpData: Record<string, string> = {}
  const uint8Array = new Uint8Array(arrayBuffer)
  const text = new TextDecoder('utf-8').decode(uint8Array)

  // Look for XMP packet
  const xmpMatch = text.match(/<x:xmpmeta[^>]*>([\s\S]*?)<\/x:xmpmeta>/)
  if (xmpMatch) {
    const xmpXml = xmpMatch[1]
    // Parse XMP tags
    const fields = ['dc:title', 'dc:creator', 'dc:description', 
                    'pdf:Author', 'pdf:Keywords', 'pdf:Producer',
                    'xmp:CreatorTool', 'xmp:CreateDate', 'xmp:ModifyDate']
    for (const field of fields) {
      const match = xmpXml.match(new RegExp(`<${field}[^>]*>([^<]+)</${field}>`))
      if (match) xmpData[field] = match[1].trim()
    }
  }

  return xmpData
}

2. JavaScript detection

PDFs can embed JavaScript that executes when opened. This is the highest privacy risk:

async function checkJavaScript(pdf: PDFDocument): Promise<boolean> {
  // Check for JS in the PDF structure
  const pages = pdf.getPages()
  for (const page of pages) {
    const annotations = page.node.Annots()
    if (annotations) {
      const annots = annotations.asArray()
      for (const annotRef of annots) {
        const annot = page.doc.context.lookup(annotRef)
        if (annot instanceof PDFDict) {
          const subtype = annot.get(PDFName.of('Subtype'))
          const action = annot.get(PDFName.of('A'))
          if (action instanceof PDFDict) {
            const s = action.get(PDFName.of('S'))
            if (s === PDFName.of('JavaScript')) {
              return true
            }
          }
        }
      }
    }
  }
  return false
}

3. Hidden text detection

Invisible text (zero opacity, white-on-white) is commonly used for tracking:

async function countHiddenText(pdfJsDoc: pdfjsLib.DocumentProxy): Promise<number> {
  let hiddenCount = 0
  for (let i = 1; i <= pdfJsDoc.numPages; i++) {
    const page = await pdfJsDoc.getPage(i)
    const textContent = await page.getTextContent()

    for (const item of textContent.items) {
      if ('str' in item) {
        const str = item.str.trim()
        if (str.length > 0) {
          // Check if the text is invisible (zero height or zero opacity)
          const transform = item.transform
          const fontSize = Math.abs(transform[3]) // Y-scale component
          if (fontSize < 0.1 || str.length === 0) {
            hiddenCount++
          }
        }
      }
    }
  }
  return hiddenCount
}

4. Risk scoring

A simple scoring system helps users quickly understand the privacy profile:

function calculateRiskScore(report: PrivacyReport): number {
  let score = 0

  // Metadata risks
  if (report.metadata.author !== '(not set)') score += 1
  if (report.metadata.creator !== '(not set)') score += 1
  if (report.metadata.producer !== '(not set)') score += 1

  // Critical risks
  if (report.hasJavaScript) score += 5
  if (report.hiddenTextCount > 0) score += report.hiddenTextCount * 2
  if (report.embeddedFiles.length > 0) score += report.embeddedFiles.length * 3

  // Link risks
  if (report.linkCount > 0) score += Math.min(report.linkCount, 10)

  return Math.min(score, 20) // Cap at 20
}

function determineRiskLevel(score: number): 'low' | 'medium' | 'high' | 'critical' {
  if (score >= 15) return 'critical'
  if (score >= 10) return 'high'
  if (score >= 5) return 'medium'
  return 'low'
}

Summary

Building a browser-based PDF privacy inspector involves:

Extracting document-level metadata from the PDF info dictionary
Parsing XMP metadata for extended information
Detecting embedded JavaScript (highest risk)
Finding hidden/invisible text
Listing embedded files and links
Analyzing form field data
Calculating a risk score with recommendations

The result: a comprehensive privacy report that shows exactly what information your PDF is carrying. Try it at en.sotool.top/pdf-privacy-inspector.

How to Split PDF by Text Content in the Browser with Vue 3 and pdf-lib

sunshey — Wed, 12 Aug 2026 12:47:59 +0000

Splitting a PDF by text content is one of the most powerful but least intuitive PDF operations. Unlike splitting by page count (math), bookmarks (tree traversal), or blank pages (pixel analysis), text-based splitting requires understanding the semantic content of each page.

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

The approach

The core idea is simple: scan each page for a target string, and when found, cut the document there. But implementing it correctly requires handling:

Text extraction from PDF pages
String matching (exact, case-insensitive, regex)
Split point calculation (which page to start the new file)
Multiple matches (how to handle repeated keywords)

The stack

Vue 3 with Composition API
PDF.js for text extraction
pdf-lib for PDF manipulation
Vite for bundling

The core implementation

<script setup lang="ts">
import { ref } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import { PDFDocument } from 'pdf-lib'

const file = ref<File | null>(null)
const searchText = ref<string>('')
const splitMode = ref<'before' | 'after' | 'exact'>('before')
const caseSensitive = ref(false)
const splitting = ref(false)
const matchPages = ref<number[]>([])

async function extractText(page: pdfjsLib.PageProxy): Promise<string> {
  const textContent = await page.getTextContent()
  return textContent.items
    .map(item => ('str' in item ? item.str : ''))
    .join(' ')
    .trim()
}

async function findMatches(text: string, pattern: string): Promise<number[]> {
  const flags = caseSensitive.value ? 'g' : 'gi'
  const regex = new RegExp(pattern, flags)
  const matches: number[] = []
  let match

  while ((match = regex.exec(text)) !== null) {
    matches.push(match.index)
  }

  return matches
}

async function splitByText() {
  if (!file.value || !searchText.value) return
  splitting.value = true

  const arrayBuffer = await file.value.arrayBuffer()
  const pdfJsDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
  const pdfLibDoc = await PDFDocument.load(arrayBuffer)

  const totalPages = pdfJsDoc.numPages
  const lowerSearch = caseSensitive.value 
    ? searchText.value 
    : searchText.value.toLowerCase()

  // Step 1: Find all matching pages
  const matchPageIndices: number[] = []

  for (let i = 1; i <= totalPages; i++) {
    const page = await pdfJsDoc.getPage(i)
    const text = await extractText(page)
    const searchTarget = caseSensitive.value ? text : text.toLowerCase()

    if (searchTarget.includes(lowerSearch)) {
      matchPageIndices.push(i - 1) // 0-based
    }
  }

  matchPages.value = matchPageIndices.map(p => p + 1) // 1-based for display

  if (matchPageIndices.length === 0) {
    splitting.value = false
    return // No matches found
  }

  // Step 2: Determine split boundaries
  const boundaries: number[] = []

  for (const matchIdx of matchPageIndices) {
    switch (splitMode.value) {
      case 'before':
        boundaries.push(matchIdx)
        break
      case 'after':
        boundaries.push(matchIdx + 1)
        break
      case 'exact':
        boundaries.push(matchIdx)
        break
    }
  }

  // Add start and end
  boundaries.unshift(0)
  if (boundaries[boundaries.length - 1] !== totalPages) {
    boundaries.push(totalPages)
  }

  // Step 3: Create split files
  const results: Record<string, Uint8Array> = {}

  for (let i = 0; i < boundaries.length - 1; i++) {
    const start = boundaries[i]
    const end = boundaries[i + 1]

    const newPdf = await PDFDocument.create()
    const pageIndices = Array.from(
      { length: end - start },
      (_, j) => start + j
    )

    const [copiedPages] = await newPdf.copyPages(pdfLibDoc, pageIndices)
    copiedPages.forEach(page => newPdf.addPage(page))

    const filename = `section-${i + 1}.pdf`
    results[filename] = await newPdf.save()
  }

  // Package as ZIP
  const zip = await createZip(results)
  downloadZip(zip, 'split-by-text.zip')
  splitting.value = false
}
</script>

Key implementation details

1. Text extraction with PDF.js

PDF.js provides page.getTextContent() which returns all text items on a page:

const textContent = await page.getTextContent()
const text = textContent.items
  .map(item => ('str' in item ? item.str : ''))
  .join(' ')

Note: str may not exist for all items (e.g., special characters). The type guard 'str' in item handles this.

2. Case sensitivity

PDF text extraction preserves original case. To support case-insensitive search:

const lowerSearch = caseSensitive.value 
  ? searchText.value 
  : searchText.value.toLowerCase()
const searchTarget = caseSensitive.value ? text : text.toLowerCase()

3. Split mode logic

The split mode determines where the boundary falls relative to the match:

switch (splitMode) {
  case 'before':
    // New section starts at the matching page
    boundary = matchPageIndex
    break
  case 'after':
    // New section starts after the matching page
    boundary = matchPageIndex + 1
    break
  case 'exact':
    // Same as 'before' for page-level splitting
    boundary = matchPageIndex
    break
}

4. Multiple matches on the same page

If the search text appears multiple times on the same page, we only care about the page boundary, not the position within the page. For intra-page splitting, a more complex approach (rendering and cutting at the text position) would be needed.

5. Edge case: match on last page

If the search text appears on the last page, the "after" mode would create an empty final section. Handle this:

// Don't create empty sections
if (end > start) {
  // Create the file
}

Summary

Building a browser-based text-based PDF splitter involves:

Extracting text from each page using PDF.js
Searching for the target string (with case sensitivity options)
Determining split boundaries based on the chosen mode
Creating a new PDF for each section using pdf-lib
Packaging all outputs as a ZIP

The result: a merged document split into logical sections based on text content. Try it at en.sotool.top/split-by-text.

How to Split PDF at Blank Pages in the Browser with Vue 3 and pdf-lib

sunshey — Tue, 11 Aug 2026 12:33:12 +0000

Splitting a PDF at blank pages is a practical operation for documents that use blank pages as section dividers. Unlike splitting by page count (which cuts at arbitrary points) or by bookmarks (which requires a structured outline), blank-page splitting respects the document's physical structure.

Here's how to build a browser-based blank-page splitter with Vue 3 and pdf-lib.

The blank page detection challenge

Detecting blank pages is deceptively difficult. A page might appear blank to the eye but contain:

Invisible text (zero-opacity, white-on-white)
Empty content streams with metadata
Faint watermarks or background graphics
Single-pixel transparent pixels

A single heuristic would produce false positives or false negatives. The solution: multiple independent checks.

The stack

Vue 3 with Composition API
PDF.js (pdfjs-dist) for page rendering and content analysis
pdf-lib for PDF manipulation
Vite for bundling

The core implementation

<script setup lang="ts">
import { ref } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'
import { PDFDocument } from 'pdf-lib'

const file = ref<File | null>(null)
const blankPages = ref<number[]>([])
const splitting = ref(false)
const progress = ref(0)
const progressTotal = ref(0)

// Multi-heuristic blank page detection
async function isBlankPage(
  pdfPage: pdfjsLib.PageProxy,
  tolerance: number = 2
): Promise<boolean> {
  const viewport = pdfPage.getViewport({ scale: 1 })

  // Heuristic 1: Pixel analysis
  const canvas = document.createElement('canvas')
  canvas.width = viewport.width
  canvas.height = viewport.height
  const ctx = canvas.getContext('2d', { willReadFrequently: true })!

  await pdfPage.render({ canvasContext: ctx, viewport }).promise
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
  const data = imageData.data

  let nonWhitePixels = 0
  const totalPixels = data.length / 4

  for (let i = 0; i < data.length; i += 4) {
    const r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3]
    // Skip fully transparent pixels
    if (a < 10) continue
    // Count non-white/non-black pixels
    if (r > tolerance && g > tolerance && b > tolerance &&
        !(r < 256 - tolerance && g < 256 - tolerance && b < 256 - tolerance)) {
      nonWhitePixels++
    }
  }

  const pixelRatio = nonWhitePixels / totalPixels
  if (pixelRatio > 0.01) return false // More than 1% non-white pixels

  // Heuristic 2: Text content check
  try {
    const textContent = await pdfPage.getTextContent()
    const hasText = textContent.items.some(
      item => ('str' in item) && item.str.trim().length > 0
    )
    if (hasText) return false
  } catch {
    // Text extraction failed — skip this heuristic
  }

  // Heuristic 3: Image count
  try {
    const ops = await pdfPage.getOperatorList()
    const imageCount = ops.fnArray.filter(
      fn => fn === pdfjsLib.OPS.paintImageXObject ||
            fn === pdfjsLib.OPS.paintInlineImageXObject
    ).length
    if (imageCount > 0) return false
  } catch {
    // Skip if operator list unavailable
  }

  // All heuristics passed — page is blank
  return true
}

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

  const arrayBuffer = await file.value.arrayBuffer()
  const pdfJsDoc = await pdfjsLib.getDocument({ data: arrayBuffer }).promise
  const pdfLibDoc = await PDFDocument.load(arrayBuffer)

  const totalPages = pdfJsDoc.numPages
  progressTotal.value = totalPages

  // Step 1: Detect blank pages
  const blankIndices: number[] = []
  for (let i = 1; i <= totalPages; i++) {
    progress.value = i
    const page = await pdfJsDoc.getPage(i)
    if (await isBlankPage(page)) {
      blankIndices.push(i - 1) // 0-based index
    }
  }

  blankPages.value = blankIndices

  if (blankIndices.length === 0) {
    splitting.value = false
    return // No blank pages found
  }

  // Step 2: Split at blank pages
  const boundaries = [0, ...blankIndices, totalPages]
  const results: Record<string, Uint8Array> = {}

  for (let i = 0; i < boundaries.length - 1; i++) {
    const start = boundaries[i]
    const end = boundaries[i + 1]

    const newPdf = await PDFDocument.create()
    const pageIndices = Array.from(
      { length: end - start },
      (_, j) => start + j
    )

    const [copiedPages] = await newPdf.copyPages(pdfLibDoc, pageIndices)
    copiedPages.forEach(page => newPdf.addPage(page))

    const filename = `section-${i + 1}.pdf`
    results[filename] = await newPdf.save()
  }

  // Package as ZIP
  const zip = await createZip(results)
  downloadZip(zip, 'split-at-blank-pages.zip')
  splitting.value = false
}
</script>

Key implementation details

1. Multi-heuristic detection

Each heuristic independently checks for content. A page is only considered blank if all heuristics pass:

// If ANY heuristic finds content, the page is NOT blank
if (pixelRatio > 0.01) return false  // Has visible pixels
if (hasText) return false             // Has text
if (imageCount > 0) return false      // Has images
return true                           // All clear — it's blank

This conservative approach minimizes false positives (misidentifying content pages as blank).

2. Pixel tolerance

The tolerance parameter (default 2) controls how strict the blank detection is:

tolerance = 0: Only perfectly white (255,255,255) pixels count as blank
tolerance = 2: Near-white pixels (253-255) also count as blank
Higher values: More aggressive blank detection

For most documents, tolerance = 2 works well. It accounts for JPEG compression artifacts and scanner noise while still catching truly blank pages.

3. Boundary calculation

The split boundaries are computed from blank page indices:

const boundaries = [0, ...blankIndices, totalPages]
// Example: blank pages at indices [3, 7, 12] in a 15-page PDF
// boundaries = [0, 3, 7, 12, 15]
// Sections: [0-3), [3-7), [7-12), [12-15)
// → 4 sections

Note that the blank pages themselves are included in the preceding section (not excluded). If you want blank pages to be excluded, adjust the boundaries:

const boundaries = [0, ...blankIndices.map(i => i + 1), totalPages]
// Blank page at index 3 → section ends at page 4 (exclusive)

4. Performance consideration

Rendering every page to a canvas for pixel analysis is expensive for large PDFs. For 100+ page documents:

Use scale: 0.5 for faster rendering (lower resolution is sufficient for blank detection)
Show a progress indicator
Consider a "quick scan" mode that only uses text/image heuristics (no rendering)

5. Edge case: consecutive blank pages

If two or more blank pages appear consecutively, they create an empty section. Handle this:

Option A: Skip empty sections (don't create a file)
Option B: Merge consecutive blank pages into a single separator
Option C: Include empty sections (user choice)

The tool should let the user choose the behavior.

Summary

Building a browser-based blank-page splitter involves:

Rendering each page to detect blank pages (multi-heuristic)
Computing split boundaries from blank page indices
Extracting page ranges between boundaries
Packaging all sections as a ZIP

The multi-heuristic approach ensures reliable blank page detection even for tricky cases like invisible text or faint watermarks. Try it at en.sotool.top/split-at-blank-pages.

How to Split PDF by File Size in the Browser with Vue 3 and pdf-lib

sunshey — Mon, 10 Aug 2026 13:00:49 +0000

Splitting a PDF by file size is one of the most practical but technically tricky operations. Unlike splitting by page count (simple math) or bookmarks (tree traversal), size-based splitting requires estimating and controlling the output size of each chunk — and PDFs don't have a simple "size per page" property.

Here's how to build a browser-based PDF splitter that respects file size constraints.

The challenge

PDFs are notoriously unpredictable in terms of size. Two PDFs with the same number of pages can differ by 10x in file size depending on:

Image resolution and compression
Font embedding
Color space (RGB vs. CMYK)
Content complexity (vector graphics vs. scanned images)

This means you can't calculate split points with simple arithmetic. You need to estimate, test, and adjust.

The stack

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

The core implementation

The approach is greedy accumulation with size estimation:

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

const file = ref<File | null>(null)
const targetSizeMB = ref<number>(10)
const compression = ref<'none' | 'low' | 'high'>('low')
const splitting = ref(false)
const progress = ref(0)
const progressTotal = ref(0)
const results = ref<Record<string, Uint8Array>>({})

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

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await PDFDocument.load(arrayBuffer)
  const totalPages = pdf.getPageCount()
  const targetBytes = targetSizeMB.value * 1024 * 1024

  const outputFiles: Array<{ name: string; data: Uint8Array }> = []
  let currentPdf = await PDFDocument.create()
  let currentSize = 0
  let pageNum = 0

  for (let i = 0; i < totalPages; i++) {
    progressTotal.value = totalPages
    progress.value = i + 1

    // Try adding this page
    try {
      const [copiedPage] = await currentPdf.copyPages(pdf, [i])
      currentPdf.addPage(copiedPage)

      // Estimate size by saving
      const estimated = await currentPdf.save({ 
        compress: compression.value !== 'none',
        updateMetadata: false,
      })
      currentSize = estimated.byteLength

      // If we'd exceed target and this isn't the last page, close current file
      if (currentSize >= targetBytes && i < totalPages - 1) {
        outputFiles.push({
          name: `part-${pageNum + 1}.pdf`,
          data: await currentPdf.save({ compress: true }),
        })
        pageNum++
        currentPdf = await PDFDocument.create()
        currentSize = 0
        // Retry adding this page to the new file
        i-- // Re-process this page in the new file
        continue
      }
    } catch {
      // Page couldn't be copied — skip it
      console.warn(`Page ${i + 1} skipped due to error`)
    }
  }

  // Don't forget the last file
  if (currentSize > 0) {
    outputFiles.push({
      name: `part-${pageNum + 1}.pdf`,
      data: await currentPdf.save({ compress: true }),
    })
  }

  results.value = Object.fromEntries(
    outputFiles.map(f => [f.name, f.data])
  )
  splitting.value = false
}
</script>

Key implementation details

1. Why incremental save for estimation?

PDF.js and pdf-lib don't provide a reliable "what will this page contribute to file size?" API. The most accurate estimation is to actually save the PDF and check the byte length. This is done incrementally:

const estimated = await currentPdf.save()
currentSize = estimated.byteLength

This is slow for large documents (each save is O(pages²) in the worst case), but it's accurate. For better performance with very large PDFs, you could use a sampling approach: save every 5th page to estimate, then adjust.

2. The retry logic

When a page would push the current file over the size limit, we close the current file and re-process the same page in a new file:

if (currentSize >= targetBytes && i < totalPages - 1) {
  outputFiles.push(...)
  currentPdf = await PDFDocument.create()
  currentSize = 0
  i-- // Re-process this page
  continue
}

This ensures no page is lost — even if it doesn't fit in the target size on its own, it goes into its own file.

3. Compression settings

pdf-lib supports compression when saving:

await pdf.save({ compress: true })   // Compress streams (JPEG for images)
await pdf.save({ compress: false })  // Keep original compression

Higher compression reduces file size but may reduce image quality. Let the user choose:

None: No additional compression (fastest, largest files)
Low: Mild compression (good balance)
High: Aggressive compression (smallest files, lower quality)

4. Progress indication

Since size estimation requires incremental saves, large PDFs can take time. Show progress:

progress.value = i + 1  // Current page being processed
progressTotal.value = totalPages

5. Edge case: single page exceeds target

If even a single page exceeds the target size (e.g., a full-page high-resolution scanned image), the algorithm will still create a file for it. The user should be warned that some files may exceed the target size.

Summary

Building a browser-based "split by file size" tool involves:

Loading the PDF and setting a target size
Greedily accumulating pages into output files
Estimating file size via incremental saves
Closing files and starting new ones when targets are exceeded
Packaging all outputs as a ZIP

The result: a large PDF split into chunks that respect your size constraints. Try it at en.sotool.top/split-by-size.

How to Split a PDF Every N Pages in the Browser with Vue 3 and pdf-lib

sunshey — Sun, 09 Aug 2026 02:58:57 +0000

Splitting a PDF at regular intervals is one of the simplest yet most useful operations. Whether you're extracting individual pages from a presentation, dividing a compiled report into sections, or preparing files for batch processing, splitting every N pages is a recurring need.

Unlike bookmark-based splitting (which respects document structure) or size-based splitting (which equalizes file sizes), interval-based splitting uses a pure mathematical rule: every N pages becomes one file.

Here's how to build it with Vue 3 and pdf-lib.

The core logic

The splitting is essentially integer division with remainder handling:

files = ceil(totalPages / N)
file[i] contains pages from (i * N) to min((i + 1) * N, totalPages)

The stack

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

The implementation

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

const file = ref<File | null>(null)
const interval = ref<number>(4)
const splitting = ref(false)
const results = ref<Record<string, Uint8Array>>({})

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

  const arrayBuffer = await file.value.arrayBuffer()
  const pdf = await PDFDocument.load(arrayBuffer)
  const totalPages = pdf.getPageCount()
  const n = interval.value
  const fileCount = Math.ceil(totalPages / n)

  const results: Record<string, Uint8Array> = {}

  for (let i = 0; i < fileCount; i++) {
    const startIdx = i * n
    const endIdx = Math.min((i + 1) * n, totalPages)
    const pageIndices = Array.from(
      { length: endIdx - startIdx },
      (_, j) => startIdx + j
    )

    const newPdf = await PDFDocument.create()
    const [copiedPages] = await newPdf.copyPages(pdf, pageIndices)
    copiedPages.forEach(page => newPdf.addPage(page))

    const filename = `pages-${startIdx + 1}-${endIdx}.pdf`
    results[filename] = await newPdf.save()
  }

  // Package as ZIP and download
  const zip = await createZip(results)
  downloadZip(zip, `split-every-${n}-pages.zip`)
  splitting.value = false
}
</script>

Key details

1. Page index handling

pdf-lib uses 0-based page indices internally, but users think in 1-based terms. The filename uses 1-based numbering for clarity:

const filename = `pages-${startIdx + 1}-${endIdx}.pdf`
// Pages 0-3 (0-based) → "pages-1-4.pdf" (user-friendly)

2. Last file edge case

When totalPages isn't divisible by N, the last file naturally has fewer pages:

// 25 pages, interval = 4
// File 1: pages 1-4
// File 2: pages 5-8
// File 3: pages 9-12
// File 4: pages 13-16
// File 5: pages 17-20
// File 6: pages 21-24
// File 7: pages 25-25 (only 1 page)

This is correct behavior — the rule is "every N pages," not "all files must have N pages."

3. Batch file generation

For documents with many split files (e.g., 100 pages split by 1 = 100 files), generating and downloading individually would be overwhelming. Always package as a ZIP:

async function createZip(files: Record<string, Uint8Array>): Promise<Blob> {
  const zip = new JSZip()
  for (const [name, data] of Object.entries(files)) {
    zip.file(name, data)
  }
  return await zip.generateAsync({ type: 'blob' })
}

4. Progress indication

Splitting large documents takes time in the browser. Show a progress indicator:

const progress = ref(0)
const progressTotal = ref(0)

// Inside the loop:
progressTotal.value = fileCount
for (let i = 0; i < fileCount; i++) {
  // ... split ...
  progress.value = i + 1
}

When to use this vs. other split methods

Method	Best when	Example
Every N pages	Regular interval pattern	Every 10 pages = one section
By Bookmarks	Document has chapter structure	Chapter-by-chapter split
By Page Range	You know exact page boundaries	Pages 1-5, 6-20, 21-end
By Size	Equal file sizes needed	5MB per file
By Blank Pages	Sections separated by blank pages	Manual or automated separators

Summary

Building a browser-based "split every N pages" tool involves:

Loading the PDF and getting total page count
Computing the number of output files: ceil(totalPages / N)
For each file, extracting the correct page range with copyPages()
Packaging all outputs as a ZIP
Downloading the result

The logic is simple arithmetic, but the UX matters — clear filename conventions, progress indication, and ZIP packaging make it feel polished. Try it at en.sotool.top/split-every-n-pages.

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

sunshey — Sat, 08 Aug 2026 12:03:53 +0000

Splitting a PDF into separate files is a common need — distribute chapters, email specific sections, organize by topic. But manual splitting (specifying page ranges for each section) is tedious when your document has 20+ chapters. If the PDF has bookmarks, you can automate the entire process.

Here's how to build a browser-based "Split by Bookmarks" tool with Vue 3 and pdf-lib.

The bookmark structure

PDF bookmarks are stored in the document outline (/Outlines dictionary). Each bookmark entry contains:

Title: Display text (e.g., "Chapter 1: Introduction")
Destination: A reference to the target page
Left/Right: Sibling bookmark references
First/Last: Child bookmark references (for nested structures)

The outline is a binary tree — each bookmark can have children, creating a hierarchical TOC.

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 bookmarks = ref<BookmarkNode[]>([])
const splitDepth = ref<number>(1) // 1 = top-level only
const splitting = ref(false)
const results = ref<Record<string, Uint8Array>>({})

interface BookmarkNode {
  title: string
  page: number
  children: BookmarkNode[]
}

// Recursively traverse the outline tree
function extractBookmarks(node: PDFIndirectObject, depth: number = 0): BookmarkNode[] {
  const title = node.getTitle?.() ?? 'Untitled'
  const destination = node.getDestination()
  const page = destination?.pageIndex ?? 0

  const children: BookmarkNode[] = []
  let child = node.getFirstChild()
  while (child) {
    children.push(...extractBookmarks(child, depth + 1))
    child = node.getNextSibling()
  }

  return [{ title, page, children }]
}

// Group bookmarks by split depth
function groupByDepth(bookmarks: BookmarkNode[], maxDepth: number): Map<number, BookmarkNode[]> {
  const groups = new Map<number, BookmarkNode[]>()

  function traverse(nodes: BookmarkNode[], currentDepth: number) {
    for (const node of nodes) {
      if (currentDepth <= maxDepth) {
        if (!groups.has(currentDepth)) groups.set(currentDepth, [])
        groups.get(currentDepth)!.push(node)
      }
      traverse(node.children, currentDepth + 1)
    }
  }

  traverse(bookmarks, 0)
  return groups
}

// Split PDF based on bookmark groups
async function splitPdf() {
  if (!file.value) return
  splitting.value = true

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

  // Extract bookmark tree
  const bookmarkList = extractBookmarks(outline)
  bookmarks.value = bookmarkList

  // Group by selected depth
  const groups = groupByDepth(bookmarkList, splitDepth.value)
  const splits = Array.from(groups.values()).flat()

  // Create split files
  const results: Record<string, Uint8Array> = {}
  const pageCount = pdf.getPageCount()

  for (let i = 0; i < splits.length; i++) {
    const startPage = splits[i].page
    const endPage = i < splits.length - 1 
      ? splits[i + 1].page 
      : pageCount

    const newPdf = await PDFDocument.create()
    const [copiedPages] = await newPdf.copyPages(pdf, 
      Array.from({ length: endPage - startPage }, (_, j) => startPage + j)
    )
    copiedPages.forEach(page => newPdf.addPage(page))

    // Clean up the title for filename
    const filename = splits[i].title
      .replace(/[<>:"/\\|?*\x00-\x1f]/g, '-')
      .trim()
      .substring(0, 100)

    results[filename] = await newPdf.save()
  }

  // Package as ZIP
  const zip = await createZip(results)
  downloadZip(zip, 'split-by-bookmarks.zip')
  splitting.value = false
}
</script>

Key implementation details

1. Recursive bookmark traversal

The PDF outline is a tree, not a flat list. We traverse it recursively to collect all bookmarks:

function extractBookmarks(node: PDFIndirectObject): BookmarkNode[] {
  const title = node.getTitle()
  const destination = node.getDestination()
  const page = destination?.pageIndex ?? 0

  const children: BookmarkNode[] = []
  let child = node.getFirstChild()
  while (child) {
    children.push(...extractBookmarks(child))
    child = child.getNextSibling()
  }

  return [{ title, page, children }]
}

2. Grouping by split depth

To support "top-level only" vs. "all levels" splitting, we group bookmarks by their depth in the tree:

function groupByDepth(bookmarks: BookmarkNode[], maxDepth: number): Map<number, BookmarkNode[]> {
  const groups = new Map<number, BookmarkNode[]>()

  function traverse(nodes: BookmarkNode[], depth: number) {
    for (const node of nodes) {
      if (depth <= maxDepth) {
        if (!groups.has(depth)) groups.set(depth, [])
        groups.get(depth)!.push(node)
      }
      traverse(node.children, depth + 1)
    }
  }

  traverse(bookmarks, 0)
  return groups
}

3. Creating split PDFs

For each group of bookmarks, we create a new PDF containing the pages between consecutive bookmarks:

for (let i = 0; i < splits.length; i++) {
  const startPage = splits[i].page
  const endPage = i < splits.length - 1 
    ? splits[i + 1].page 
    : pageCount

  const newPdf = await PDFDocument.create()
  const pageIndices = Array.from(
    { length: endPage - startPage }, 
    (_, j) => startPage + j
  )
  const [copiedPages] = await newPdf.copyPages(pdf, pageIndices)
  copiedPages.forEach(page => newPdf.addPage(page))

  results[filename] = await newPdf.save()
}

4. ZIP packaging

Browser-based ZIP creation uses the JSZip library:

async function createZip(files: Record<string, Uint8Array>): Promise<Blob> {
  const zip = new JSZip()
  for (const [name, data] of Object.entries(files)) {
    zip.file(`${name}.pdf`, data)
  }
  return await zip.generateAsync({ type: 'blob' })
}

Edge cases

No bookmarks: If the PDF has no outline, show a clear error message suggesting "Split by Page Range" instead.
Shallow bookmarks: A PDF with only one level of bookmarks (no children) works fine — it just produces fewer, larger files.
Bookmark page references are 0-indexed: pdf-lib uses 0-based page indexing, but we display 1-based numbers to users.
Duplicate titles: If multiple bookmarks have the same title (e.g., "Appendix"), the ZIP filenames will conflict. The tool should append a number to disambiguate.
Very large documents: Splitting a 500-page PDF into 50 files may take time in the browser. Show a progress indicator.

Summary

Building a browser-based "Split by Bookmarks" tool involves:

Loading the PDF and extracting the outline tree
Recursively traversing bookmarks to build a structured list
Grouping bookmarks by split depth (all levels vs. top-level only)
Creating a new PDF for each group using copyPages()
Packaging all outputs as a ZIP file

The result: a large document split into logical chapters, respecting the author's original structure. Try it at en.sotool.top/split-by-bookmarks.

How to Repair Corrupted PDFs in the Browser with Vue 3 and pdf-lib

sunshey — Fri, 07 Aug 2026 12:38:30 +0000

A corrupted PDF is one of the most frustrating file problems. You have important content inside, but the document won't open, opens with garbled text, or shows missing pages. The file might be damaged from a bad download, a converter error, or a storage glitch.

Recovering content from a broken PDF doesn't require complex forensic tools. Often, the individual pages are still readable — it's the document's structure (cross-reference tables, object streams) that's damaged. By extracting pages one by one into a fresh PDF, we can bypass the structural corruption.

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

The repair strategy

The core insight: PDF structure and page content are somewhat independent. A PDF can have a broken cross-reference table or missing trailer objects, but the actual page content streams may still be perfectly readable.

The repair approach:

Load the damaged PDF and attempt to read each page
For each successfully read page, copy it to a new PDF document
Discard unreadable pages (they're lost anyway)
Save the new document

This is fundamentally different from "fixing" the original PDF. We're extracting what we can and rebuilding from the ground up.

The stack

Vue 3 with Composition API
pdf-lib for PDF reading and page extraction
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 totalPages = ref(0)
const recoveredPages = ref(0)
const repairing = ref(false)
const result = ref<Uint8Array | null>(null)
const error = ref<string | null>(null)

async function repairPdf() {
  if (!file.value) return
  repairing.value = true
  error.value = null

  try {
    const arrayBuffer = await file.value.arrayBuffer()
    const damaged = await PDFDocument.load(arrayBuffer, {
      ignoreEncryption: true,
      updateMetadata: false,
    })

    totalPages.value = damaged.getPageCount()
    const resultPdf = await PDFDocument.create()
    let recovered = 0

    for (let i = 0; i < totalPages.value; i++) {
      try {
        const [copiedPage] = await resultPdf.copyPages(damaged, [i])
        resultPdf.addPage(copiedPage)
        recovered++
      } catch (pageError) {
        // This page couldn't be copied — skip it
        console.warn(`Page ${i + 1} could not be recovered`)
      }
    }

    recoveredPages.value = recovered

    if (recovered === 0) {
      throw new Error('Could not recover any pages from this PDF. The file may be too corrupted.')
    }

    const repaired = await resultPdf.save()
    result.value = repaired
  } catch (e: unknown) {
    const msg = e instanceof Error ? e.message : 'Unknown error during repair'
    error.value = msg
  } finally {
    repairing.value = false
  }
}
</script>

Key implementation details

1. Error handling per page

The try/catch inside the page loop is critical. Some pages in a corrupted PDF may be readable while others are not. We can't abort the entire repair because of one bad page — we skip it and continue.

for (let i = 0; i < totalPages.value; i++) {
  try {
    const [copiedPage] = await resultPdf.copyPages(damaged, [i])
    resultPdf.addPage(copiedPage)
    recovered++
  } catch (pageError) {
    // Page i failed — skip and continue
  }
}

2. `ignoreEncryption` flag

When loading a potentially damaged PDF, we set ignoreEncryption: true. This prevents pdf-lib from failing early if it encounters an encryption dictionary it can't process. If the PDF is password-protected, we'll still need the password — but this flag helps when encryption metadata itself is corrupted.

3. `updateMetadata: false`

We also set updateMetadata: false to prevent pdf-lib from modifying the metadata during loading. A damaged PDF might have corrupted metadata that could cause issues during save — skipping metadata updates reduces the chance of save-time errors.

4. What `copyPages` actually does

pdf-lib.copyPages() reads each source page's content stream and copies it to the destination document. It doesn't just copy a reference — it performs a deep copy of the page's content. This means:

Text content is copied character by character
Images are decompressed and re-embedded
Graphics operators are serialized to the new document
Page dimensions are preserved

If any of these operations fail for a specific page, the try/catch around it catches the error and we move to the next page.

5. Partial recovery is valid

A common misconception: if the repair only recovers 5 out of 10 pages, the tool "failed." In reality, recovering 5 readable pages from a corrupted 10-page PDF is a 50% success rate — far better than getting zero pages from a failed opening attempt.

The UI should clearly communicate partial recovery:

Show "Recovered 5 of 10 pages"
Don't hide the fact that some pages were lost
Let the user decide if partial recovery is acceptable

Edge cases

Completely unreadable file: If PDFDocument.load() fails entirely, the corruption is too severe for browser-based recovery. Show a clear error and suggest professional recovery tools.
All pages fail: If the load succeeds but every copyPages call fails, the pages exist in the document structure but their content streams are corrupted. No recovery is possible with this approach.
Password-protected PDF: If the PDF is encrypted and no password is provided, PDFDocument.load() will throw. This is expected — you can't repair what you can't open.
Very large files: PDFs with hundreds of pages or high-resolution images may cause memory issues in the browser. The tool should handle this gracefully with appropriate error messages.

Summary

Building a browser-based PDF repair tool involves:

Loading the damaged PDF with error-tolerant settings
Iterating pages with per-page error handling
Copying each readable page to a fresh PDF document
Saving the rebuilt document
Communicating partial recovery clearly

The result: a potentially salvageable copy of a corrupted PDF, processed entirely in the browser. Try it at en.sotool.top/pdf-repair-lite.