DEV Community: sunshey

How to Build a PDF Upload Checker with Vue 3 and pdf-lib

sunshey — Fri, 03 Jul 2026 11:38:29 +0000

Upload rejection messages are frustrating. The user sees "File too large" or "Upload failed" only after submitting a PDF to a portal. A better experience is to check the file locally first, then explain exactly what is wrong before the user ever clicks submit.

This post walks through a PDF Upload Checker built with Vue 3 and pdf-lib. It runs entirely in the browser, so files are never sent to a server.

Why check before upload?

PDFs can fail for reasons that are not obvious from the file icon:

The file is 5.1 MB on a portal that limits uploads to 5 MB
The PDF is encrypted or password-protected
Mixed page sizes confuse a layout system
Form fields make the document behave strangely in online readers
Metadata leaks author names or creation software
JavaScript or launch actions trigger security warnings

A checker that reads the PDF locally can catch these issues in seconds.

The stack

Vue 3 with Composition API
pdf-lib for PDF structure analysis
Native FileReader / ArrayBuffer for local file access

Minimal implementation

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

const file = ref<File | null>(null)
const checks = ref<any[]>([])
const loading = ref(false)

const uploadLimits = [
  { value: '25', label: 'Email / Gmail - 25 MB' },
  { value: '10', label: 'Common web form - 10 MB' },
  { value: '5', label: 'Strict portal - 5 MB' },
  { value: '2', label: 'Tiny portal - 2 MB' },
]

const selectedLimit = ref('10')

async function handleFile(selected: File) {
  file.value = selected
  loading.value = true
  checks.value = []

  try {
    const bytes = await selected.arrayBuffer()
    const pdf = await PDFDocument.load(bytes, { ignoreEncryption: true, updateMetadata: false })
    checks.value = analyzePdf(selected, pdf, Number(selectedLimit.value))
  } catch (e) {
    checks.value = [{
      key: 'readable',
      severity: 'fail',
      title: 'PDF could not be read',
      description: 'The file may be corrupted, encrypted in an unsupported way, or not a valid PDF.',
    }]
  } finally {
    loading.value = false
  }
}

function analyzePdf(file: File, pdf: PDFDocument, limitMb: number) {
  const sizeMb = file.size / (1024 * 1024)
  const pages = pdf.getPageCount()
  const pageSizes = pdf.getPages().map(p => {
    const { width, height } = p.getSize()
    return `${Math.round(width)}x${Math.round(height)}`
  })
  const uniqueSizes = new Set(pageSizes)
  const formFields = pdf.getForm()?.getFields()?.length ?? 0

  return [
    checkFileSize(sizeMb, limitMb),
    checkEncryption(pdf),
    checkPageCount(pages),
    checkFormFields(formFields),
    checkPageSizes(uniqueSizes.size),
  ]
}

function checkFileSize(sizeMb: number, limitMb: number) {
  if (sizeMb > limitMb) {
    return {
      key: 'file_size',
      severity: 'fail',
      title: 'Over the upload limit',
      description: `The file is ${sizeMb.toFixed(1)} MB, which is above the ${limitMb} MB limit.`,
    }
  }
  if (sizeMb > limitMb * 0.8) {
    return {
      key: 'file_size',
      severity: 'warn',
      title: 'Close to the limit',
      description: `The file uses more than 80% of the ${limitMb} MB limit. Compressing lowers rejection risk.`,
    }
  }
  return {
    key: 'file_size',
    severity: 'pass',
    title: 'File size within limit',
    description: `The file is below the ${limitMb} MB limit.`,
  }
}

function checkEncryption(pdf: PDFDocument) {
  const encrypted = pdf.isEncrypted || false
  return encrypted
    ? {
        key: 'encryption',
        severity: 'fail',
        title: 'Encrypted or protected PDF',
        description: 'Many portals reject password-protected or encrypted PDFs.',
      }
    : {
        key: 'encryption',
        severity: 'pass',
        title: 'No encryption detected',
        description: 'No encryption marker was detected in the file.',
      }
}

function checkPageCount(pages: number) {
  return {
    key: 'page_count',
    severity: pages < 1 ? 'fail' : 'pass',
    title: 'Page count',
    description: pages < 1 ? 'No pages were found in the PDF.' : `${pages} pages detected.`,
  }
}

function checkFormFields(count: number) {
  return count > 0
    ? {
        key: 'form_fields',
        severity: 'warn',
        title: 'Editable form fields',
        description: 'Form fields may display differently or be rejected by online readers. Consider flattening.',
      }
    : {
        key: 'form_fields',
        severity: 'pass',
        title: 'No form fields detected',
        description: 'The PDF contains no editable form fields.',
      }
}

function checkPageSizes(uniqueCount: number) {
  return uniqueCount > 1
    ? {
        key: 'page_sizes',
        severity: 'warn',
        title: 'Mixed page sizes',
        description: 'Different page sizes can confuse layout systems. Consider resizing to a single size.',
      }
    : {
        key: 'page_sizes',
        severity: 'pass',
        title: 'Consistent page size',
        description: 'All pages appear to be the same size.',
      }
}
</script>

The key is PDFDocument.load(bytes, { ignoreEncryption: true, updateMetadata: false }). This lets you read basic structure even for some encrypted files, without triggering full decryption.

Scanning raw bytes for risky features

Some PDF features are not exposed cleanly by pdf-lib. You can scan the raw bytes for markers such as JavaScript, launch actions, embedded files, and external links:

function scanRawFlags(bytes: ArrayBuffer) {
  const text = new TextDecoder().decode(bytes)
  return {
    javascript: /\/JS\b|\\/JavaScript\b/i.test(text),
    launchAction: /\\/Launch\b/i.test(text),
    openAction: /\\/OpenAction\b/i.test(text),
    embeddedFiles: /\\/EmbeddedFiles\b/i.test(text),
    externalLinks: /\\/URI\b|\\/URI\s*\(/i.test(text),
    xmpMetadata: /\\/Type\\/Metadata|\\/Metadata\b/i.test(text),
  }
}

This is not a full security audit, but it is good enough for a quick upload-readiness check.

UX tips from a live tool

At en.sotool.top/pdf-upload-checker, we learned a few things from real users:

Preset upload limits reduce confusion. Users do not always know the exact MB limit. Giving them common presets makes the tool faster to use.
Severity matters more than detail. Pass/warn/fail badges let users scan the report quickly. Full paragraph explanations come second.
Link to the fix. When a check fails, show a button to the matching tool. A user who finds the file too large should be one click away from compression.
Keep it local. Privacy-sensitive users trust the tool more when they know the file never leaves their browser.

Tracking the funnel

We use GA4 custom events to understand how the checker is used:

onFileUpload(file)
onToolAction('check-upload', { limit_mb: selectedLimit.value })
onToolCompleted('upload-checker', { status: overallStatus })
onToolAction('recommendation', { key: 'compress' })

This shows whether users are finding actionable problems and following the recommended fixes.

Going further

For a simple upload checker, pdf-lib plus raw-byte scanning is enough. If you need deep security analysis, full metadata parsing, or PDF/A validation, you will want a server-side library or a dedicated compliance tool.

Want to see the full source? The site is built in public at github.com/sunshey/pdf-tool.

If you need desktop-grade PDF editing — batch processing, advanced metadata cleaning, or compliance workflows — check out Wondershare PDFelement.

How to Convert PDF Pages to Images with Vue 3 and PDF.js

sunshey — Thu, 02 Jul 2026 13:45:48 +0000

Rendering PDF pages as images in the browser sounds like a server-side job, but it is not. With PDF.js and a <canvas> element, you can convert each page to a PNG or JPEG entirely on the client side. No upload, no backend processing, and full control over resolution.

This post walks through a minimal but production-ready implementation you can drop into a Vue 3 project.

Why client-side?

Traditional PDF-to-image services upload your file, render it on a server, and send back images. That works, but it introduces latency, bandwidth costs, and privacy risk. A browser-based converter:

Keeps files on the user's device
Works offline after the app loads
Avoids server-side rendering entirely

The stack

Vue 3 with Composition API
PDF.js (pdfjs-dist) for rendering
HTML5 Canvas for image generation
JSZip for packaging multiple images
Vite for bundling

Minimal implementation

<script setup lang="ts">
import { ref } from 'vue'
import * as pdfjs from 'pdfjs-dist'
import JSZip from 'jszip'

pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js'

const file = ref<File | null>(null)
const converting = ref(false)
const images = ref<string[]>([])
const format = ref<'png' | 'jpeg'>('png')
const dpi = ref(150)

async function handleFileUpload(selected: File) {
  file.value = selected
}

async function convertToImages() {
  if (!file.value) return

  converting.value = true
  images.value = []

  try {
    const arrayBuffer = await file.value.arrayBuffer()
    const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise

    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      const page = await pdf.getPage(pageNum)
      const viewport = page.getViewport({ scale: dpi.value / 72 })

      const canvas = document.createElement('canvas')
      const ctx = canvas.getContext('2d')
      if (!ctx) continue

      canvas.width = viewport.width
      canvas.height = viewport.height

      await page.render({ canvasContext: ctx, viewport }).promise

      const dataUrl = canvas.toDataURL(
        format.value === 'png' ? 'image/png' : 'image/jpeg',
        0.92
      )
      images.value.push(dataUrl)
    }
  } finally {
    converting.value = false
  }
}

async function downloadZip() {
  const zip = new JSZip()
  images.value.forEach((dataUrl, i) => {
    const base64 = dataUrl.split(',')[1]
    zip.file(`page-${i + 1}.${format.value}`, base64, { base64: true })
  })

  const blob = await zip.generateAsync({ type: 'blob' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'pdf-pages.zip'
  a.click()
  URL.revokeObjectURL(url)
}
</script>

The key is page.getViewport({ scale: dpi.value / 72 }). PDF.js uses 72 DPI as its base scale, so dividing your target DPI by 72 gives the correct canvas size for the resolution you want.

Handling large files

Browser memory is the main constraint. For a production tool, add two limits:

const MAX_SIZE = 100 * 1024 * 1024 // 100 MB
const MAX_PAGES = 200

Validate before loading into PDF.js. High-DPI rendering of large pages can produce very large canvases, so you may also want to cap the maximum pixel dimensions.

UX tips from a live tool

At en.sotool.top/pdf-to-image, we learned a few things from real users:

Let users choose format and DPI. Some want PNG transparency, others want small JPEGs. Some need 300 DPI for print.
Show page previews. Users want to confirm the conversion looks right before downloading.
Offer a ZIP download. Individual image downloads are tedious for multi-page documents.
Separate "completed" from "downloaded." Track both events separately so you can measure drop-off between processing success and the actual save.

Tracking the funnel

We use GA4 custom events:

onFileUpload(file)
onActionClick('convert-to-image')
onCompleted({ output_format: format.value, dpi: dpi.value })
onDownload({ file_count: images.value.length })

This lets us see exactly where users drop off: upload, action click, completion, or download.

Going further

For simple PDF-to-image conversion, PDF.js plus Canvas is enough. If you need OCR, batch automation, or direct editable text export, you'll want a server-side component or a desktop tool.

Want to see the full source? The site is built in public at github.com/sunshey/pdf-tool (replace with your actual repo if different).

If you need desktop-grade PDF editing — OCR, batch conversion, or advanced export formats — check out Wondershare PDFelement.

How I Merge PDFs in the Browser with Vue 3 and pdf-lib

sunshey — Wed, 01 Jul 2026 13:33:26 +0000

Merging PDFs on the server is straightforward. Upload the files, run a command-line tool, send the result back. But that means your users’ documents touch your infrastructure — and your infrastructure now needs storage, virus scanning, and deletion queues.

I wanted something simpler for en.sotool.top: pick files in the browser, reorder them visually, and download one merged PDF. No server involved.

Here’s how I built it with Vue 3, pdf-lib, and a little Canvas trickery for thumbnails.

Why Client-Side?

The main reason is privacy. Contracts, invoices, tax documents — users don’t want them on a stranger’s server. Client-side merging also means:

No upload bandwidth limits
No file size caps from your server
No storage to clean up
Works offline after the page loads

The trade-off is that very large files are limited by the user’s device RAM. For typical office documents, that’s fine.

The Stack

Vue 3 — UI, drag-and-drop state, file handling
pdf-lib — Load, copy pages, and save the merged PDF
Native File API + DragEvents — File selection and reordering
Canvas — Page thumbnails for the visual reorder UI

npm install pdf-lib

Loading Multiple PDFs

The first step is reading each uploaded file into an ArrayBuffer, then loading it with pdf-lib.

import { PDFDocument } from 'pdf-lib'

async function loadPdfFile(file: File) {
  const arrayBuffer = await file.arrayBuffer()
  const pdfDoc = await PDFDocument.load(arrayBuffer)
  return pdfDoc
}

I keep a reactive list of loaded documents plus metadata: original file name, page count, and an array of page objects for the UI.

import { ref } from 'vue'

interface DocumentItem {
  id: string
  name: string
  pageCount: number
  pdfDoc: PDFDocument
}

const documents = ref<DocumentItem[]>([])

async function addFiles(fileList: FileList) {
  for (const file of Array.from(fileList)) {
    const pdfDoc = await loadPdfFile(file)
    documents.value.push({
      id: crypto.randomUUID(),
      name: file.name,
      pageCount: pdfDoc.getPageCount(),
      pdfDoc,
    })
  }
}

Reordering Pages Visually

The simplest merge just appends all pages in file order. But users often need to rearrange pages — move page 3 before page 1, pull a page from file B into file A, etc.

I flatten every document into a single list of page objects:

interface PageItem {
  id: string
  docId: string
  pageIndex: number
  thumbnail: string
}

const pages = ref<PageItem[]>([])

async function buildPageList() {
  pages.value = []
  for (const doc of documents.value) {
    for (let i = 0; i < doc.pageCount; i++) {
      const thumbnail = await renderThumbnail(doc.pdfDoc, i)
      pages.value.push({
        id: `${doc.id}-${i}`,
        docId: doc.id,
        pageIndex: i,
        thumbnail,
      })
    }
  }
}

For thumbnails, I render a low-resolution PNG of each page using Canvas. In production, I use pdfjs-dist for rendering because pdf-lib can manipulate PDFs but cannot rasterize them. The thumbnail is just for the UI; the merge itself uses pdf-lib.

The reorder UI is a standard Vue draggable list:

<script setup lang="ts">
import { VueDraggableNext } from 'vue-draggable-next'

const pages = ref<PageItem[]>([])
</script>

<template>
  <VueDraggableNext v-model="pages" item-key="id">
    <div
      v-for="page in pages"
      :key="page.id"
      class="page-card"
    >
      <img :src="page.thumbnail" :alt="`Page ${page.pageIndex + 1}`" />
      <span>Page {{ page.pageIndex + 1 }}</span>
    </div>
  </VueDraggableNext>
</template>

Merging the PDFs

Once the user is happy with the order, create a new blank PDF and copy pages from the source documents in the chosen order.

async function mergePdfs() {
  const mergedPdf = await PDFDocument.create()

  for (const page of pages.value) {
    const sourceDoc = documents.value.find(d => d.id === page.docId)!.pdfDoc
    const [copiedPage] = await mergedPdf.copyPages(sourceDoc, [page.pageIndex])
    mergedPdf.addPage(copiedPage)
  }

  const mergedBytes = await mergedPdf.save()
  downloadBlob(
    new Blob([mergedBytes], { type: 'application/pdf' }),
    'merged.pdf'
  )
}

copyPages is the key API. It copies a page from a source document into the target document without re-rendering, so quality is preserved.

Downloading the Result

A small helper triggers the browser download:

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  document.body.appendChild(a)
  a.click()
  a.remove()
  URL.revokeObjectURL(url)
}

Lessons Learned

1. Don’t load the same file twice in a shared mutable state
If a user uploads the same PDF twice, you get two separate PDFDocument instances. That’s fine, but treat each upload as immutable. If you edit one in place, the other won’t reflect it.

2. Page sizes can differ
One PDF might be Letter, another A4, another landscape slide. pdf-lib preserves each page’s original size. Don’t assume a uniform canvas size when rendering thumbnails.

3. Memory matters
Loading a 50MB scanned PDF into memory creates a large PDFDocument. For heavy usage, offer a "clear all" button so users can free memory between merges.

4. Keep the source File object if you need restart
PDFDocument.load() consumes the ArrayBuffer. If you want to let users remove files and start over, keep the original File object around or reload from it.

5. PDFs with forms may flatten
If your source PDFs have fillable form fields, copyPages keeps the visual content but the form fields may be flattened in the merged output. Test with your target documents.

Try It

The merge tool is live at en.sotool.top/merge.

Free, no signup, and nothing uploads to a server.

Full source code is on GitHub. The merge logic lives in src/views/Merge.vue.

Want More Advanced PDF Features?

If you need OCR, form editing, digital signatures, or batch processing beyond what a browser tool can do, Wondershare PDFelement is a solid desktop option. It keeps everything local and adds professional tools on top.

This post contains affiliate links.

Have you built client-side PDF tools? What did you use — pdf-lib, PDF.js, or something else?

How I Built a Browser-Based PDF to Word Converter with Vue 3, pdf.js, and docx

sunshey — Tue, 30 Jun 2026 13:22:13 +0000

Converting a PDF to a Word document is one of those tasks that sounds simple until you try to do it privately. Most converters upload your file to a server, process it, and send it back. That works, but it means trusting someone else with your document.

I wanted a converter that runs entirely in the browser. The result is en.sotool.top/pdf-to-word/. Here's how I built it.

The Goal

Extract selectable text from a PDF and package it into a .docx file, without ever sending the PDF to a server.

The scope is intentionally narrow:

Text-only output
No layout preservation
No image extraction
No OCR for scanned PDFs

This covers a lot of real use cases — contracts, reports, essays, meeting notes — while staying fast and private.

The Stack

Vue 3 — UI and state management
pdfjs-dist — Extract text from each PDF page
docx — Generate .docx files in the browser
File API + Blob — Read input and trigger downloads

npm install pdfjs-dist docx

Loading the PDF

pdfjs-dist needs a worker. I point it to a CDN worker file to avoid bundling the large worker binary.

import * as pdfjs from 'pdfjs-dist'

pdfjs.GlobalWorkerOptions.workerSrc =
  `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`

Then load the document from a file:

async function extractText(file: File) {
  const arrayBuffer = await file.arrayBuffer()
  const pdf = await pdfjs.getDocument({ data: arrayBuffer }).promise
  return pdf
}

Extracting Text Page by Page

pdfjs-dist gives you a TextItem array per page. I collect the text and split it into paragraphs.

const pdf = await extractText(file)
const paragraphs: string[] = []

for (let i = 1; i <= pdf.numPages; i++) {
  const page = await pdf.getPage(i)
  const content = await page.getTextContent()
  const text = content.items
    .filter((item: any) => 'str' in item)
    .map((item: any) => item.str)
    .join(' ')

  if (text.trim()) {
    paragraphs.push(...text.split(/\n{2,}/).filter(p => p.trim()))
  }
}

The result is an array of paragraph strings. We lose exact layout, but the text content is preserved.

Building the DOCX File

The docx library lets you create a Word-compatible document without a backend.

import { Document, Paragraph, Packer } from 'docx'

const doc = new Document({
  sections: [{
    properties: {},
    children: paragraphs.map(text => new Paragraph({ text })),
  }],
})

const blob = await Packer.toBlob(doc)

Packer.toBlob() returns a Blob that you can download with a simple anchor element.

Downloading the Result

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}

UI Considerations

Set expectations early. We show a clear message that conversion is text-only and that scanned PDFs won't work.

Preview first three pages. Users can see the extracted text before downloading, which builds trust and lets them catch problems early.

Affiliate guidance for complex needs. If a user needs layout preservation, images, or OCR, we recommend a desktop tool. We use a CJ Affiliate link for Wondershare PDFelement with rel="noopener sponsored".

Lessons Learned

Text extraction is easy; layout preservation is hard. Trying to keep columns, tables, and images in a pure browser tool quickly becomes a research project. Text-only is a pragmatic cutoff.

Scanned PDFs are the biggest support burden. Users expect any "PDF to Word" tool to handle scanned documents. We detect low or zero text content and show a specific message explaining the limitation.

Preview reduces disappointment. Letting users see the first few pages of extracted text before downloading prevents the "this output is broken" reaction.

Worker source matters. Bundling pdf.worker.js adds significant chunk size. Pointing to a CDN version keeps the initial bundle smaller.

Try It

The tool is live at en.sotool.top/pdf-to-word/.

Free, no signup, no upload. Full source is on GitHub.

Need Full Formatting?

For complex documents with tables, images, or scanned pages, a desktop tool is still the better option. Wondershare PDFelement converts PDFs to Word while preserving formatting and includes OCR.

This post contains affiliate links.

Have you built document conversion tools in the browser? What trade-offs did you make?

How I Compress PDFs in the Browser with Vue 3 and pdf-lib

sunshey — Mon, 29 Jun 2026 14:14:03 +0000

Compressing a PDF sounds trivial. Drag a file, pick a level, get a smaller one back. But building it client-side — in the browser, no server — has a few subtleties worth documenting.

I built en.sotool.top/compress/ to handle this. Here's how it works under the hood with Vue 3 and pdf-lib.

Why Client-Side Compression?

PDFs often contain sensitive information. Contracts, financial statements, medical records. Compressing a file on a server means trusting someone else with your document.

Client-side compression gives you:

No upload bandwidth or size limits
Instant processing — the file never leaves your device
Works offline after the page loads
Zero quality loss beyond what you explicitly choose
No server costs to maintain

The tradeoff? You're limited by what the browser can do. For compression, pdf-lib can rewrite the PDF with compressed images and stripped metadata, which covers most real-world cases.

The Stack

Vue 3 — UI and state management
pdf-lib — Load, modify, and save PDFs
HTML Canvas — Re-encode images at lower quality
File API — Read the uploaded PDF

npm install pdf-lib

Loading the PDF

First, read the file into an ArrayBuffer and load it with pdf-lib.

import { PDFDocument } from 'pdf-lib'

const pdfFile = ref<File | null>(null)
const compressionLevel = ref<'low' | 'medium' | 'high'>('medium')
const processing = ref(false)
const originalSize = ref(0)
const compressedSize = ref(0)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
  originalSize.value = files[0].size
}

Mapping Compression Levels to Quality

Three user-facing levels map to different image quality and resize targets:

function getCompressionSettings(level: string) {
  switch (level) {
    case 'low':
      return { jpegQuality: 0.9, maxWidth: 2048 }
    case 'medium':
      return { jpegQuality: 0.7, maxWidth: 1400 }
    case 'high':
      return { jpegQuality: 0.45, maxWidth: 1024 }
    default:
      return { jpegQuality: 0.7, maxWidth: 1400 }
  }
}

The key insight: image quality is where 90% of PDF size comes from. Text, fonts, and metadata contribute, but a single high-res photo in a PDF can be 5–50MB. Rescaling and re-encoding images is the big win.

Compressing Images with Canvas

The core trick: extract each image from the PDF, draw it onto a Canvas at a smaller size or lower quality, then embed it back.

async function compressImageBytes(
  imageBytes: Uint8Array,
  quality: number,
  maxWidth: number
): Promise<Uint8Array> {
  const blob = new Blob([imageBytes])
  const bitmap = await createImageBitmap(blob)

  // Scale down only if the image exceeds maxWidth
  const scale = Math.min(1, maxWidth / bitmap.width)
  const width = Math.floor(bitmap.width * scale)
  const height = Math.floor(bitmap.height * scale)

  const canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height

  const ctx = canvas.getContext('2d')!
  ctx.drawImage(bitmap, 0, 0, width, height)

  // Re-encode as JPEG at the target quality
  const compressedBlob = await new Promise<Blob>((resolve) => {
    canvas.toBlob((b) => resolve(b!), 'image/jpeg', quality)
  })

  return new Uint8Array(await compressedBlob.arrayBuffer())
}

A few things worth noting:

createImageBitmap decodes the image efficiently in the browser, off the main thread when possible
We scale down only if the image exceeds maxWidth — preserving aspect ratio
JPEG quality lets the user pick their compression level
We convert to JPEG regardless of original format. PNG images in PDFs are usually photos that benefit from lossy compression

Walking the PDF to Find Images

pdf-lib doesn't have a high-level "compress all images" API. You need to walk each page's resources and look for image operators.

async function compressPdfImages(
  pdfDoc: PDFDocument,
  quality: number,
  maxWidth: number
): Promise<void> {
  const pages = pdfDoc.getPages()

  for (const page of pages) {
    const resources = page.node.Resources()
    if (!resources) continue

    const xObject = resources.lookupMaybe('XObject')
    if (!xObject) continue

    for (const [, ref] of Object.entries(xObject.dict)) {
      const obj = xObject.lookupMaybe(ref)
      if (!(obj instanceof PDFStream)) continue

      const subtype = obj.getMaybe('Subtype')?.asString()
      if (subtype !== 'Image') continue

      const width = obj.get('Width').asNumber()
      const height = obj.get('Height').asNumber()
      const originalBytes = obj.getContents()

      const compressedBytes = await compressImageBytes(
        originalBytes, quality, maxWidth
      )

      // Embed the compressed image back
      let embeddedImage
      try {
        embeddedImage = await pdfDoc.embedJpg(compressedBytes)
      } catch {
        // If JPEG fails, try PNG
        embeddedImage = await pdfDoc.embedPng(compressedBytes)
      }

      // Replace the original image reference
      xObject.set(ref, embeddedImage.ref)
    }
  }
}

This is a simplified version. Production code handles:

PNG images — Some PDFs embed PNGs; we need to detect format
CMYK color spaces — Common in scanned documents from printers
Image masks — Transparency overlays that complicate replacement
Tiled images — Large images split across multiple stream objects

Saving the Compressed PDF

const pdfBytes = await pdfDoc.save({
  useObjectStreams: true,
  addDefaultPage: false,
})

Two options matter here:

useObjectStreams: true — Packs objects more efficiently, reducing file size by 5–15%
addDefaultPage: false — Prevents pdf-lib from adding an empty page if the input had none

The UI: Before/After Comparison

Users need to trust the result. Showing before/after file size is critical:

<script setup>
import { ref } from 'vue'

const file = ref(null)
const level = ref<'low' | 'medium' | 'high'>('medium')
const processing = ref(false)
const originalSize = ref(0)
const compressedSize = ref(0)

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

  try {
    const bytes = await file.value.arrayBuffer()
    const pdfDoc = await PDFDocument.load(bytes)

    const settings = getCompressionSettings(level.value)
    await compressPdfImages(pdfDoc, settings.jpegQuality, settings.maxWidth)

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

    originalSize.value = file.value.size
    compressedSize.value = compressed.byteLength

    downloadBlob(new Blob([compressed]), 'compressed.pdf')
  } catch (e) {
    console.error(e)
    alert('Compression failed. Check the file.')
  } finally {
    processing.value = false
  }
}

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}
</script>

<template>
  <div class="compression-ui">
    <input type="file" accept=".pdf" @change="handleFile" />

    <div class="levels">
      <button :class="{ active: level === 'low' }" @click="level = 'low'">
        Low — Best quality
      </button>
      <button :class="{ active: level === 'medium' }" @click="level = 'medium'">
        Medium — Recommended
      </button>
      <button :class="{ active: level === 'high' }" @click="level = 'high'">
        High — Smallest file
      </button>
    </div>

    <button @click="handleCompress" :disabled="processing || !file">
      {{ processing ? 'Compressing...' : 'Compress PDF' }}
    </button>

    <div v-if="originalSize && compressedSize" class="results">
      <span>{{ formatSize(originalSize) }}</span>
      <span>→</span>
      <span>{{ formatSize(compressedSize) }}</span>
      <span class="saved">({{ Math.round((1 - compressedSize / originalSize) * 100) }}% smaller)</span>
    </div>
  </div>
</template>

Lessons Learned

Image extraction is messy. PDFs store images in wild ways — rotated, inverted, with masks, in CMYK, split into tiles. Handling every case perfectly is harder than it sounds. The production code is roughly 3× longer than the simplified version above.

JPEG re-encoding is the big win. For scan-heavy PDFs, re-encoding images at 70% quality can cut file size by 80% with barely visible quality loss. This single technique handles 90% of compression requests.

Text-only PDFs don't compress much. If a PDF is mostly text and already optimized with object streams, there's little a browser tool can do. 5–10% reduction is realistic.

Always let users pick the balance. Different documents need different compression. A text-heavy report can handle aggressive compression. A portfolio with screenshots needs a lighter touch. Three presets cover most cases.

Show before/after size. Users need to trust the result. Showing the original and compressed file sizes side by side builds confidence.

Try It

The compression tool is live at en.sotool.top/compress/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The compression logic is in src/views/Compress.vue.

Want More Advanced PDF Tools?

If you need OCR, form editing, digital signatures, or batch processing hundreds of files, Wondershare PDFelement is a solid desktop option. It keeps everything local.

This post contains affiliate links.

Have you built client-side PDF tools? What did you use — pdf-lib, PDF.js, or something else?

How I Rotate PDFs in the Browser with Vue 3 and pdf-lib

sunshey — Sun, 28 Jun 2026 05:09:31 +0000

Rotating a PDF sounds like the simplest operation imaginable. Yet building it client-side has a few nuances worth documenting. Users expect to upload a file, pick an angle, and get a fixed PDF back — all without uploading their document to a server.

I built en.sotool.top/rotate/ to do exactly that. Here's how it works with Vue 3 and pdf-lib.

Why Client-Side Rotation?

PDFs often contain sensitive information. Scanned contracts, handwritten notes, receipts. Rotating a file on a server means trusting someone else with your document.

Client-side benefits:

No upload bandwidth or size limits
Instant rotation for normal files
Works offline after the page loads
Zero quality loss — rotation is a metadata change

The Stack

Vue 3 — UI and state
pdf-lib — Load, rotate, and save PDFs
File API — Read the uploaded file
lucide-vue-next — Icons

npm install pdf-lib

Loading the PDF

First, read the file and prepare it for rotation.

import { PDFDocument } from 'pdf-lib'

const pdfFile = ref<File | null>(null)
const angle = ref(90)
const processing = ref(false)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
}

The Rotation Angle Selector

Three preset angles: 90°, 180°, and 270°.

<div class="grid grid-cols-3 gap-3">
  <button
    v-for="deg in [90, 180, 270]"
    :key="deg"
    :class="angle === deg ? 'border-primary bg-primary/5 text-primary' : 'border-border text-text-muted'"
    @click="angle = deg"
  >
    {{ deg }}°
  </button>
</div>

The button highlights the selected angle. The user picks one and clicks rotate.

Performing the Rotation

This is the core logic. pdf-lib makes it surprisingly simple.

async function rotate() {
  if (!pdfFile.value) return

  processing.value = true
  try {
    const bytes = await pdfFile.value.arrayBuffer()
    const pdf = await PDFDocument.load(bytes)

    pdf.getPages().forEach(page => {
      page.setRotation(degrees(angle.value))
    })

    const blob = new Blob([await pdf.save()], { type: 'application/pdf' })
    downloadBlob(blob, 'rotated.pdf')
  } catch (e) {
    console.error(e)
    alert('Processing failed')
  } finally {
    processing.value = false
  }
}

The key is degrees() from pdf-lib. It converts degrees to radians internally. page.setRotation() modifies the page's /Rotate entry in the PDF dictionary.

Downloading the Result

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}

Lessons Learned

Rotation is a metadata change. Unlike compression or watermarking, rotation doesn't re-encode anything. The file size stays virtually identical because only the /Rotate entry in the PDF dictionary changes.

Rotate all pages at once. Our tool rotates every page with the same angle. This covers 95% of use cases — scanned documents, batch exports, etc. Supporting per-page rotation would require a more complex UI.

Handle the processing state. Even though rotation is fast, users might upload a 500 MB PDF. Show a loading indicator so they don't click twice.

No arbitrary angles. We support 90°, 180°, and 270°. For arbitrary angles (e.g., 45°), you'd need to re-render the page content, which is a much heavier operation.

Try It

The tool is live at en.sotool.top/rotate/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The rotation logic is in src/views/Rotate.vue.

Want More Advanced PDF Tools?

If you need to rotate individual pages, use arbitrary angles, or batch-process hundreds of files with OCR, Wondershare PDFelement is a solid desktop option.

This post contains affiliate links.

Have you built PDF manipulation tools in the browser? What edge cases did you run into?

How I Add Watermarks to PDFs in the Browser with Vue 3 and pdf-lib

sunshey — Sat, 27 Jun 2026 11:08:24 +0000

Adding a watermark to a PDF sounds simple — draw some text over every page, right? But doing it client-side with consistent positioning, rotation, and transparency across all pages is trickier than it looks.

I built en.sotool.top/watermark/ to handle text and image watermarks entirely in the browser. Here's how it works with Vue 3 and pdf-lib.

Why Client-Side?

PDFs often contain sensitive information. Draft contracts, internal policies, design mockups. Even a simple watermark tool should not force users to upload files to a server.

Client-side benefits:

No upload bandwidth or size limits
No server storage or cleanup
Instant processing for normal files
Works offline after the page loads

The tradeoff is that pdf-lib doesn't have a built-in "watermark" API. You have to draw text or images onto each page manually.

The Stack

Vue 3 — UI and state
pdf-lib — Load, manipulate, and save PDFs
HTML5 Canvas — Render text watermarks as images
File API — Read the uploaded file
lucide-vue-next — Icons

npm install pdf-lib

Loading the PDF

import { PDFDocument, rgb, degrees } from 'pdf-lib'

const pdfFile = ref<File | null>(null)
const totalPages = ref(0)
const watermarkText = ref('DRAFT')
const opacity = ref(0.2)
const fontSize = ref(72)
const angle = ref(-45)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
  const bytes = await files[0].arrayBuffer()
  const pdf = await PDFDocument.load(bytes)
  totalPages.value = pdf.getPageCount()
}

Rendering Text as a Watermark Image

pdf-lib doesn't have a drawWatermark method, so we render text as a PNG using Canvas, then embed it.

async function createWatermarkImage(text: string, size: number, color: string) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')!

  ctx.font = `bold ${size}px Arial, sans-serif`
  const metrics = ctx.measureText(text)
  const textW = metrics.width
  const textH = size * 1.2

  canvas.width = Math.ceil(textW)
  canvas.height = Math.ceil(textH)

  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.font = `bold ${size}px Arial, sans-serif`
  ctx.fillStyle = color
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(text, canvas.width / 2, canvas.height / 2)

  const blob = await new Promise<Blob | null>(resolve =>
    canvas.toBlob(resolve, 'image/png'),
  )
  if (!blob) throw new Error('Canvas to blob failed')
  return new Uint8Array(await blob.arrayBuffer())
}

Key detail: we use textAlign: 'center' and textBaseline: 'middle' so the text is perfectly centered in the canvas. This makes positioning on the PDF page much more predictable.

Applying the Watermark to Each Page

async function addWatermark() {
  if (!pdfFile.value) return

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

  const hex = hexToRgb(watermarkColor.value)
  const pngBytes = await createWatermarkImage(
    watermarkText.value,
    fontSize.value,
    `rgba(${hex.r}, ${hex.g}, ${hex.b}, ${opacity.value})`,
  )
  const watermarkImage = await pdf.embedPng(pngBytes)

  for (const page of pages) {
    const { width, height } = page.getSize()
    const imgDims = watermarkImage.scale(1)

    page.drawImage(watermarkImage, {
      x: (width - imgDims.width) / 2,
      y: (height - imgDims.height) / 2,
      width: imgDims.width,
      height: imgDims.height,
      rotate: degrees(angle.value),
      opacity: opacity.value,
    })
  }

  const blob = new Blob([await pdf.save()], { type: 'application/pdf' })
  downloadBlob(blob, 'watermarked.pdf')
}

The watermark is centered on each page and rotated by the user-specified angle (typically -45° for diagonal watermarks).

Image Watermarks

For logo watermarks, the user uploads a PNG and we skip the Canvas rendering step:

async function loadImageWatermark(file: File) {
  const bytes = new Uint8Array(await file.arrayBuffer())
  const pngImage = await pdf.embedPng(bytes)
  return pngImage
}

Transparent PNGs work best. Opaque images will cover the underlying content.

Lessons Learned

Canvas centering matters. Use textAlign: 'center' and textBaseline: 'middle' when rendering text to Canvas. Otherwise the watermark position on the PDF page will be offset.

Opacity is handled at the PDF level. pdf-lib supports an opacity property on drawImage, so we can set the watermark's transparency directly instead of relying on the Canvas alpha channel. This keeps the output file smaller.

Angle in degrees, not radians. pdf-lib's rotate expects a degrees() wrapped value, not a raw number. Forgetting to wrap it produces weird rotation angles.

Tile for large documents. For PDFs with many pages, consider tiling the watermark (multiple instances per page) rather than centering it once. The current implementation centers one watermark per page, which works well for most use cases.

Don't re-encode the PDF. Use copyPages or draw directly onto existing pages. Re-saving the entire PDF can increase file size unnecessarily.

Try It

The tool is live at en.sotool.top/watermark/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The watermark logic is in src/views/Watermark.vue.

Want More Advanced PDF Security?

If you need digital signatures, password protection, or batch watermarking across hundreds of files, Wondershare PDFelement is a solid desktop option.

This post contains affiliate links.

Have you built PDF manipulation tools in the browser? What rendering approach did you use?

How I Encrypt PDFs in the Browser with Vue 3 and @pdfsmaller/pdf-encrypt-lite

sunshey — Fri, 26 Jun 2026 13:01:19 +0000

Password protecting a PDF sounds trivial, but building it client-side has a few gotchas. Users expect to type a password, hit a button, and get a locked file. They don't expect their file to upload to a server.

I built en.sotool.top/encrypt/ to do exactly that. Here's how it works with Vue 3 and @pdfsmaller/pdf-encrypt-lite.

Why Client-Side Encryption?

PDFs often contain sensitive information. Contracts, financial statements, medical records. Password protecting a file on a server means trusting someone else with your password and your document.

Client-side benefits:

No upload bandwidth or size limits
Your password never leaves your device
Instant encryption for normal files
Works offline after the page loads

The tradeoff is that you need a library that can handle PDF encryption in the browser.

The Stack

Vue 3 — UI and state
@pdfsmaller/pdf-encrypt-lite — Browser-based PDF encryption
File API — Read the uploaded file
lucide-vue-next — Icons

npm install @pdfsmaller/pdf-encrypt-lite

The Encryption Library

@pdfsmaller/pdf-encrypt-lite is a lightweight wrapper around pdf-lib's encryption capabilities. It supports:

Open passwords (require password to open the file)
RC4 40-bit and RC4 128-bit encryption
AES-128 encryption (recommended for modern compatibility)
Permissions passwords (restrict printing, copying, editing)

For our use case, we only need open passwords.

Loading the PDF

First, read the file and prepare it for encryption.

import { encryptPDF } from '@pdfsmaller/pdf-encrypt-lite'

const pdfFile = ref<File | null>(null)
const userPassword = ref('')
const confirmPassword = ref('')
const processing = ref(false)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
}

Password Validation

We validate the password before encryption starts.

<input
  v-model="userPassword"
  type="password"
  placeholder="Set password to open the file"
  class="w-full text-sm border border-border rounded-lg px-4 py-3 bg-surface"
/>

<input
  v-model="confirmPassword"
  type="password"
  placeholder="Enter password again"
  :class="confirmPassword && confirmPassword !== userPassword ? 'border-red-400' : ''"
/>
<p v-if="confirmPassword && confirmPassword !== userPassword" class="text-xs text-danger">
  Passwords do not match
</p>

The button is disabled until the passwords match and the password is non-empty.

Performing the Encryption

async function encrypt() {
  if (!pdfFile.value) return
  if (!userPassword.value || userPassword.value !== confirmPassword.value) return

  processing.value = true
  try {
    const bytes = new Uint8Array(await pdfFile.value.arrayBuffer())
    const encrypted = await encryptPDF(bytes, userPassword.value, userPassword.value)
    const blob = new Blob([encrypted], { type: 'application/pdf' })
    downloadBlob(blob, 'encrypted.pdf')
  } catch (e) {
    console.error(e)
    alert('Encryption failed: ' + (e instanceof Error ? e.message : 'Unknown error'))
  } finally {
    processing.value = false
  }
}

The encryptPDF function takes the file bytes, the open password, and the permissions password. For open-password-only mode, we pass the same password for both.

Downloading the Result

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}

Lessons Learned

Don't store passwords in state longer than needed. After encryption, clear the password fields. Even though nothing is uploaded, leaving the password in ref state is unnecessary memory.

Validate passwords client-side. Check for empty strings, minimum length (we recommend 8+ characters), and match confirmation. This prevents a failed encryption attempt.

Use AES-128, not RC4-40. Older tools default to RC4 40-bit for compatibility, but AES-128 is the modern standard. The library handles this internally, but it's worth knowing.

Warn users not to forget their password. There is no "forgot password" mechanism because the password never reaches a server. Add a visible warning before the encrypt button.

Keep the UI simple. Password protection is a one-step operation. Don't overwhelm users with encryption algorithm settings. Let the library handle the details.

Try It

The tool is live at en.sotool.top/encrypt/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The encryption logic is in src/views/Encrypt.vue.

Want More Advanced PDF Security?

If you need granular permissions (restrict printing, allow copying), add digital signatures, or manage access for teams, Wondershare PDFelement is a solid desktop option.

This post contains affiliate links.

Have you built PDF security tools in the browser? What encryption approach did you use?

How I Split PDFs in the Browser with Vue 3 and pdf-lib

sunshey — Thu, 25 Jun 2026 12:37:35 +0000

Splitting a PDF is one of those features that sounds trivial until you try to build it. Users expect range input (1-3, 5, 7-9), a per-page option, multiple file downloads, and zero server involvement.

I built en.sotool.top/split/ to do exactly that. Here's how it works with Vue 3 and pdf-lib.

Why Client-Side?

PDFs often contain sensitive information. Contracts, medical records, financial statements. Even a "simple" splitting tool should not force users to upload files to a server.

Client-side benefits:

No upload bandwidth or size limits
No server storage or cleanup
Instant processing for normal files
Works offline after the page loads

The tradeoff is that everything has to run in the browser, which limits the libraries you can use.

The Stack

Vue 3 — UI and state
pdf-lib — Load, manipulate, and save PDFs
File API — Read the uploaded file
lucide-vue-next — Icons

npm install pdf-lib

Loading the PDF and Counting Pages

First, read the file into an ArrayBuffer and load it with pdf-lib.

import { PDFDocument } from 'pdf-lib'

const pdfFile = ref<File | null>(null)
const totalPages = ref(0)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
  const bytes = await files[0].arrayBuffer()
  const pdf = await PDFDocument.load(bytes)
  totalPages.value = pdf.getPageCount()
}

Now we know how many pages exist and can show the split UI.

Two Split Modes

I offer two ways to split: by range and per page.

Mode 1: Page Range Input

Users type something like 1-3, 5, 7-9. I parse it into groups of page indices.

function parseRanges(input: string, max: number): number[][] {
  const groups: number[][] = []
  const parts = input.split(',').map(s => s.trim())

  for (const part of parts) {
    if (part.includes('-')) {
      const [start, end] = part.split('-').map(Number)
      const pages = []
      for (let i = start; i <= end && i <= max; i++) {
        pages.push(i - 1)
      }
      if (pages.length) groups.push(pages)
    } else {
      const n = Number(part)
      if (n >= 1 && n <= max) groups.push([n - 1])
    }
  }

  return groups
}

This handles ranges, single pages, and mixed input. Page numbers are 1-based because that is what users expect. Internal indices are 0-based for pdf-lib.

Mode 2: Per Page

Save every page as its own PDF. This is useful when each page is effectively a separate document.

Splitting with pdf-lib

Once we know which pages go where, the logic is:

Load the original PDF
For each output group, create a new empty PDF
Copy the relevant pages
Save and download

async function splitPdf() {
  if (!pdfFile.value) return

  const bytes = await pdfFile.value.arrayBuffer()
  const pdf = await PDFDocument.load(bytes)
  const pageCount = pdf.getPageCount()

  if (splitMode.value === 'size') {
    for (let i = 0; i < pageCount; i++) {
      const newPdf = await PDFDocument.create()
      const [page] = await newPdf.copyPages(pdf, [i])
      newPdf.addPage(page)
      const blob = new Blob([await newPdf.save()], { type: 'application/pdf' })
      downloadBlob(blob, `page_${i + 1}.pdf`)
    }
  } else {
    const ranges = parseRanges(rangeInput.value, pageCount)
    for (let idx = 0; idx < ranges.length; idx++) {
      const newPdf = await PDFDocument.create()
      const pages = await newPdf.copyPages(pdf, ranges[idx])
      pages.forEach(p => newPdf.addPage(p))
      const blob = new Blob([await newPdf.save()], { type: 'application/pdf' })
      downloadBlob(blob, `split_${idx + 1}.pdf`)
    }
  }
}

copyPages preserves the content of the copied pages without re-rendering them, so quality stays intact.

Downloading the Result

A small helper to trigger a file download from a Blob.

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}

When splitting by range, this runs once per output group. When splitting per page, it runs once per page.

Lessons Learned

1-based indexing everywhere in the UI. Developers think in 0-based arrays. Users think in page numbers. Keep the internal logic 0-based but expose 1-based numbers everywhere the user sees.

Parse input defensively. Users will type 5 - 7, 5—7, or 5,6,7. Strip whitespace, handle dashes, ignore empty parts, and clamp to valid page numbers.

Allow multiple downloads. Splitting produces more than one file. Make sure your download helper works in a loop and does not block the browser.

Preserve quality with copyPages. Do not re-encode the entire PDF. Copy only the pages you need and let pdf-lib handle the rest.

Watch for browser pop-up blockers. Multiple automatic downloads can trigger the blocker. Some users may need to allow downloads from your domain.

Try It

The tool is live at en.sotool.top/split/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The split logic is in src/views/Split.vue.

Want More Advanced PDF Tools?

If you need OCR, form editing, digital signatures, or batch processing, Wondershare PDFelement is a solid desktop option. It keeps everything local.

This post contains affiliate links.

Have you built PDF manipulation tools in the browser? What edge cases did you run into?

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

sunshey — Wed, 24 Jun 2026 13:26:03 +0000

Adding page numbers to a PDF is one of those features that sounds trivial until you try to build it. Users expect to choose the position, set a start number, skip the cover page, and pick a color. And they expect it all to happen without uploading their document to a server.

I built en.sotool.top/page-numbers/ to do exactly that. Here's how it works with Vue 3 and pdf-lib.

Why Client-Side?

PDFs often contain sensitive information. Contracts, medical records, financial statements, research papers. Even a "simple" page numbering tool should not force users to upload files to a server.

Client-side benefits:

No upload bandwidth or size limits
No server storage or cleanup
Instant processing for normal files
Works offline after the page loads

The tradeoff is that everything has to run in the browser, which limits the libraries you can use.

The Stack

Vue 3 — UI and state
pdf-lib — Load, manipulate, and save PDFs
HTML5 Canvas — Render page numbers as PNG images
File API — Read the uploaded file
lucide-vue-next — Icons

npm install pdf-lib

Why Canvas-Rendered PNGs?

I considered three approaches:

page.drawText — Requires embedding a font. Standard fonts don't support Chinese, and embedding a CJK font adds 1–3 MB to the output.
SVG vectors — pdf-lib doesn't support direct SVG embedding. Converting SVG paths to PDF operations is complex.
Canvas → PNG — No font embedding, small output, consistent rendering. This is what I shipped.

The only downside is that page numbers are raster images, so extreme zoom shows slight pixelation. For normal reading and printing, it's not noticeable.

Loading the PDF

First, read the file into an ArrayBuffer and load it with pdf-lib.

import { PDFDocument } from 'pdf-lib'

const pdfFile = ref<File | null>(null)
const totalPages = ref(0)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
  const bytes = await files[0].arrayBuffer()
  const pdf = await PDFDocument.load(bytes, { ignoreEncryption: true })
  totalPages.value = pdf.getPageCount()
}

I use ignoreEncryption: true because some PDFs have permission passwords that prevent editing but not opening. Without this flag, those files throw on load.

Rendering the Page Number as a PNG

I render each number off-screen so it can be embedded as an image.

async function createPageNumberImage(
  numberValue: number,
  fontSizeValue: number,
  colorValue: string,
) {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')!

  ctx.font = `bold ${fontSizeValue}px "Microsoft YaHei", "PingFang SC", sans-serif`
  const text = String(numberValue)
  const metrics = ctx.measureText(text)
  const textW = metrics.width
  const textH = fontSizeValue * 1.2

  canvas.width = Math.ceil(textW)
  canvas.height = Math.ceil(textH)

  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.font = `bold ${fontSizeValue}px "Microsoft YaHei", "PingFang SC", sans-serif`
  const rgb = hexToRgb(colorValue)
  ctx.fillStyle = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`
  ctx.textAlign = 'left'
  ctx.textBaseline = 'top'
  ctx.fillText(text, 0, 0)

  const blob = await new Promise<Blob | null>(resolve =>
    canvas.toBlob(resolve, 'image/png'),
  )
  if (!blob) throw new Error('Canvas to blob failed')
  return new Uint8Array(await blob.arrayBuffer())
}

The font is set twice intentionally. The first time measures the text. After resizing the canvas, some browsers reset the context state, so the font is set again before drawing.

Positioning the Numbers

Page numbers sit at the bottom of the page. I support three positions.

function getPositionCoords(
  pos: string,
  pageW: number,
  pageH: number,
  textW: number,
  margin = 30,
) {
  switch (pos) {
    case 'bottom-left':
      return { x: margin, y: margin }
    case 'bottom-center':
      return { x: (pageW - textW) / 2, y: margin }
    case 'bottom-right':
      return { x: pageW - textW - margin, y: margin }
    default:
      return { x: (pageW - textW) / 2, y: margin }
  }
}

pdf-lib uses a coordinate system where the origin is the bottom-left corner, so y = margin places the image near the bottom edge.

Drawing Numbers onto Each Page

async function addPageNumbers() {
  if (!pdfFile.value) return

  const bytes = await pdfFile.value.arrayBuffer()
  const pdf = await PDFDocument.load(bytes, { ignoreEncryption: true })
  const pages = pdf.getPages()

  for (let i = 0; i < pages.length; i++) {
    if (skipCover.value && i === 0) continue

    const page = pages[i]
    const { width, height } = page.getSize()
    const pageNum = startNumber.value + i - (skipCover.value ? 1 : 0)

    const pngBytes = await createPageNumberImage(pageNum, fontSize.value, color.value)
    const pngImage = await pdf.embedPng(pngBytes)
    const imgDims = pngImage.scale(1)

    const coords = getPositionCoords(position.value, width, height, imgDims.width)
    page.drawImage(pngImage, {
      x: coords.x,
      y: coords.y,
      width: imgDims.width,
      height: imgDims.height,
    })
  }

  const blob = new Blob([await pdf.save()], { type: 'application/pdf' })
  downloadBlob(blob, 'pagenumbers.pdf')
}

The skipCover flag leaves the first page blank. The startNumber lets users begin from any integer, which is useful when continuing numbering across merged documents.

Lessons Learned

Set the font twice on canvas. After resizing, some browsers reset the context. Measure first, resize, then set the font again before drawing.

Use ignoreEncryption: true. Permission-protected PDFs are common. This flag lets you load them for harmless edits like adding page numbers.

Read each page's size individually. PDFs can mix A4, Letter, and landscape pages in one file. page.getSize() keeps placement correct everywhere.

Default to dark gray. #333333 is less harsh than pure black and looks more professional against body text.

Watch out for rotated pages. If a page is rotated 90 degrees, coordinates are still relative to the page's internal coordinate system. We haven't handled this automatically yet.

Try It

The tool is live at en.sotool.top/page-numbers/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The page-numbers logic is in src/views/PageNumbers.vue.

Want More Advanced PDF Tools?

If you need OCR, form editing, digital signatures, or batch processing, Wondershare PDFelement is a solid desktop option. It keeps everything local.

This post contains affiliate links.

Have you built PDF manipulation tools in the browser? What rendering approach did you use?

How I Delete PDF Pages in the Browser with Vue 3 and pdf-lib

sunshey — Tue, 23 Jun 2026 12:27:17 +0000

Deleting pages from a PDF is one of those features that sounds trivial until you try to build it. Users expect range input (1, 3, 5-7), a visual grid, instant feedback, and zero server involvement.

I built en.sotool.top/delete-pages/ to do exactly that. Here's how it works with Vue 3 and pdf-lib.

Why Client-Side?

PDFs often contain sensitive information. Contracts, medical records, financial statements. Even a "simple" page deletion tool should not force users to upload files to a server.

Client-side benefits:

No upload bandwidth or size limits
No server storage or cleanup
Instant processing for normal files
Works offline after the page loads

The tradeoff is that everything has to run in the browser, which limits the libraries you can use.

The Stack

Vue 3 — UI and state
pdf-lib — Load, manipulate, and save PDFs
File API — Read the uploaded file
lucide-vue-next — Icons

npm install pdf-lib

Loading the PDF and Counting Pages

First, read the file into an ArrayBuffer and load it with pdf-lib.

import { PDFDocument } from 'pdf-lib'

const pdfFile = ref<File | null>(null)
const totalPages = ref(0)

async function handleFile(files: File[]) {
  if (files.length === 0) return
  pdfFile.value = files[0]
  const bytes = await files[0].arrayBuffer()
  const pdf = await PDFDocument.load(bytes)
  totalPages.value = pdf.getPageCount()
}

Now we know how many pages exist and can show the deletion UI.

Two Deletion Modes

I offer two ways to choose pages: by range and by visual selection.

Mode 1: Page Range Input

Users type something like 1, 5-7, 12. I parse it into a set of page numbers.

function parseDeletePages(input: string, max: number): Set<number> {
  const set = new Set<number>()
  const parts = input.split(',').map(s => s.trim())

  for (const part of parts) {
    if (part.includes('-')) {
      const [start, end] = part.split('-').map(Number)
      for (let i = start; i <= end && i <= max; i++) {
        set.add(i)
      }
    } else {
      const n = Number(part)
      if (n >= 1 && n <= max) set.add(n)
    }
  }

  return set
}

This handles single pages, ranges, and mixed input. Page numbers are 1-based because that is what users expect.

Mode 2: Visual Grid Selection

A grid of page number buttons. Click to toggle. Red means selected for deletion.

<div class="grid grid-cols-5 sm:grid-cols-8 gap-2">
  <button
    v-for="n in totalPages"
    :key="n"
    :class="selectedPages.has(n) ? 'bg-red-50 text-red-600' : 'hover:border-primary/40'"
    @click="togglePage(n)"
  >
    {{ n }}
  </button>
</div>

const selectedPages = ref<Set<number>>(new Set())

function togglePage(n: number) {
  const s = new Set(selectedPages.value)
  if (s.has(n)) s.delete(n)
  else s.add(n)
  selectedPages.value = s
}

I also added Select All, Invert, and Clear helpers for convenience.

Removing Pages with pdf-lib

Once we know which pages to delete, the logic is:

Load the original PDF
Create a new empty PDF
Copy only the pages we want to keep
Save and download

async function deletePages() {
  if (!pdfFile.value) return

  const bytes = await pdfFile.value.arrayBuffer()
  const pdf = await PDFDocument.load(bytes)
  const pageCount = pdf.getPageCount()

  const toDelete = deleteMode.value === 'range'
    ? parseDeletePages(rangeInput.value, pageCount)
    : selectedPages.value

  if (toDelete.size === 0) {
    alert('No pages selected')
    return
  }

  if (toDelete.size === pageCount) {
    alert('Cannot delete all pages')
    return
  }

  const newPdf = await PDFDocument.create()
  const keepIndices: number[] = []

  for (let i = 0; i < pageCount; i++) {
    if (!toDelete.has(i + 1)) keepIndices.push(i)
  }

  const pages = await newPdf.copyPages(pdf, keepIndices)
  pages.forEach(p => newPdf.addPage(p))

  const blob = new Blob([await newPdf.save()], { type: 'application/pdf' })
  downloadBlob(blob, 'deleted_pages.pdf')
}

copyPages preserves the content of the kept pages without re-rendering them, so quality stays intact.

Downloading the Result

A small helper to trigger a file download from a Blob.

function downloadBlob(blob: Blob, filename: string) {
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = filename
  a.click()
  URL.revokeObjectURL(url)
}

Lessons Learned

1-based indexing everywhere in the UI. Developers think in 0-based arrays. Users think in page numbers. Keep the internal logic 0-based but expose 1-based numbers everywhere the user sees.

Guard against deleting all pages. It is technically possible to create an empty PDF, but it is almost never what the user wants. Show a clear error instead.

Parse input defensively. Users will type 5 - 7, 5—7, or 5,6,7. Strip whitespace, handle dashes, ignore empty parts, and clamp to valid page numbers.

Preserve quality with copyPages. Do not re-encode the entire PDF. Copy only the pages you keep and let pdf-lib handle the rest.

Try It

The tool is live at en.sotool.top/delete-pages/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The delete-pages logic is in src/views/DeletePages.vue.

Want More Advanced PDF Tools?

If you need OCR, form editing, digital signatures, or batch processing, Wondershare PDFelement is a solid desktop option. It keeps everything local.

This post contains affiliate links.

Have you built PDF manipulation tools in the browser? What edge cases did you run into?

How to Convert Word Documents to PDFs in the Browser with Vue 3, mammoth, and html2pdf.js

sunshey — Mon, 22 Jun 2026 13:22:10 +0000

A client sent me a contract draft as a .docx file. I needed to turn it into a PDF and send it back. I did not want to open Microsoft Word. I did not want to upload the file to a server.

So I built client-side Word to PDF conversion into my Vue 3 PDF toolkit.

Why Client-Side?

Most online Word-to-PDF converters work like this:

Upload your .docx file to their server
The server converts it with LibreOffice or similar
You download the PDF

The problem is obvious: your document sits on someone else's computer. For contracts, resumes, and reports, that is not ideal.

Client-side conversion keeps the file in the browser. The trade-off is that you have to handle .docx parsing, HTML rendering, and PDF generation yourself.

The Stack

Vue 3 — UI and state management
mammoth — Parse .docx files into clean HTML
html2pdf.js — Convert the rendered HTML into a PDF

npm install mammoth html2pdf.js

Parsing the .docx File

Mammoth converts the Word document into semantic HTML, ignoring most of the visual styling but preserving structure.

import mammoth from 'mammoth'

async function parseDocx(file: File) {
  const arrayBuffer = await file.arrayBuffer()
  const result = await mammoth.convertToHtml({ arrayBuffer })
  return result.value // HTML string
}

The result is HTML with tags like <p>, <h1>, <table>, <ul>, and <img>.

Rendering a Preview

I render the HTML in a hidden or visible preview container so the user can check the conversion before downloading.

<template>
  <div ref="preview" class="docx-preview" v-html="htmlContent" />
</template>

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

const preview = ref<HTMLElement>()
const htmlContent = ref('')
</script>

I apply a print-friendly CSS reset to the preview so headings, tables, and lists look reasonable.

.docx-preview {
  font-family: Georgia, serif;
  line-height: 1.6;
  max-width: 210mm;
  margin: 0 auto;
}

.docx-preview h1, .docx-preview h2, .docx-preview h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.docx-preview table {
  width: 100%;
  border-collapse: collapse;
}

.docx-preview td, .docx-preview th {
  border: 1px solid #ddd;
  padding: 8px;
}

Generating the PDF

Once the user confirms the preview looks right, I use html2pdf.js to render the preview element to a PDF.

import html2pdf from 'html2pdf.js'

function downloadPdf() {
  const element = preview.value
  if (!element) return

  const opt = {
    margin: 10,
    filename: 'converted.pdf',
    image: { type: 'jpeg', quality: 0.98 },
    html2canvas: { scale: 2, useCORS: true },
    jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
  }

  html2pdf().set(opt).from(element).save()
}

The scale: 2 setting gives crisp text and images. The A4 portrait format matches most document expectations.

Handling Images

.docx files often contain embedded images. Mammoth converts these to base64 data URLs by default, which work fine in both the preview and the PDF output.

For very large images, I recommend adding a CSS rule to constrain the width:

.docx-preview img {
  max-width: 100%;
  height: auto;
}

Limitations

This approach works well for text-heavy documents with basic formatting. It does not perfectly preserve:

Complex page layouts
Advanced Word styles and themes
Embedded fonts that are not web-safe
Form fields and macros
Tracked changes and comments

For those cases, a desktop editor is still the better choice.

Try It

You can see the final tool here: en.sotool.top/word-to-pdf

Need advanced document editing, OCR, or precise PDF control? Wondershare PDFelement is a desktop alternative worth considering. This post contains affiliate links.