DEV Community: sunshey

How to Embed Text and Hand-Drawn Signatures into PDFs with Vue 3 and pdf-lib

sunshey — Thu, 18 Jun 2026 11:17:58 +0000

A client sent me a contract last week. I needed to sign it and send it back without installing anything or uploading the file to a server. So I built a signature feature into my Vue 3 PDF toolkit.

It supports two input methods: typing your name with a signature font, or drawing your actual signature on an HTML5 canvas. Both are embedded into the PDF using pdf-lib.

The Signature Input Components

1. Text Signature

The user types their name, selects a font, and we render it to a canvas.

<template>
  <canvas ref="textCanvas" width="400" height="120" />
</template>

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

const props = defineProps<{ text: string; font: string; color: string }>()
const textCanvas = ref<HTMLCanvasElement>()

watch(() => [props.text, props.font, props.color], () => {
  const canvas = textCanvas.value
  if (!canvas) return
  const ctx = canvas.getContext('2d')!
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.font = `bold 48px "${props.font}"`
  ctx.fillStyle = props.color
  ctx.textBaseline = 'middle'
  const metrics = ctx.measureText(props.text)
  const x = (canvas.width - metrics.width) / 2
  const y = canvas.height / 2
  ctx.fillText(props.text, x, y)
}, { immediate: true })
</script>

I load Google Fonts like "Great Vibes", "Dancing Script", and "Parisienne" to give users a few signature-style options.

2. Hand-Drawn Signature

This is a touch-aware canvas that handles both mouse and touch events.

<template>
  <canvas
    ref="drawCanvas"
    @mousedown="start"
    @mousemove="draw"
    @mouseup="stop"
    @touchstart.prevent="start"
    @touchmove.prevent="draw"
    @touchend="stop"
  />
</template>

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

const drawCanvas = ref<HTMLCanvasElement>()
const ctx = ref<CanvasRenderingContext2D | null>(null)
const drawing = ref(false)

onMounted(() => {
  const c = drawCanvas.value
  if (!c) return
  const rect = c.getBoundingClientRect()
  const dpr = window.devicePixelRatio || 1
  c.width = rect.width * dpr
  c.height = rect.height * dpr
  ctx.value = c.getContext('2d')
  if (ctx.value) {
    ctx.value.scale(dpr, dpr)
    ctx.value.lineCap = 'round'
    ctx.value.lineJoin = 'round'
    ctx.value.lineWidth = 2.5
    ctx.value.strokeStyle = '#000000'
  }
})

function getPoint(e: MouseEvent | TouchEvent) {
  const rect = drawCanvas.value!.getBoundingClientRect()
  const ev = 'touches' in e ? e.touches[0] : e
  return { x: ev.clientX - rect.left, y: ev.clientY - rect.top }
}

function start(e: MouseEvent | TouchEvent) {
  drawing.value = true
  const p = getPoint(e)
  ctx.value?.beginPath()
  ctx.value?.moveTo(p.x, p.y)
}

function draw(e: MouseEvent | TouchEvent) {
  if (!drawing.value) return
  const p = getPoint(e)
  ctx.value?.lineTo(p.x, p.y)
  ctx.value?.stroke()
}

function stop() {
  drawing.value = false
}
</script>

Embedding the Signature into the PDF

Both input methods produce a PNG data URL. The embedding step is the same.

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

async function embedSignature(
  pdfBytes: ArrayBuffer,
  signatureDataUrl: string,
  box: { x: number; y: number; width: number; height: number; page: number; rotation?: number }
) {
  const pdfDoc = await PDFDocument.load(pdfBytes)
  const page = pdfDoc.getPages()[box.page]
  const { width, height } = page.getSize()

  const base64 = signatureDataUrl.split(',')[1]
  const pngBytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0))
  const signatureImage = await pdfDoc.embedPng(pngBytes)

  // Browser preview uses top-left origin; PDF uses bottom-left
  const pdfY = height - box.y - box.height

  page.drawImage(signatureImage, {
    x: box.x,
    y: pdfY,
    width: box.width,
    height: box.height,
    rotate: box.rotation ? degrees(box.rotation) : degrees(0),
  })

  return await pdfDoc.save()
}

Coordinate Mapping

Users interact with a preview canvas that uses top-left coordinates. PDF pages use bottom-left coordinates. We also have to account for preview scaling.

function mapPreviewToPdf(
  previewX: number,
  previewY: number,
  previewWidth: number,
  previewHeight: number,
  pdfWidth: number,
  pdfHeight: number
) {
  const scale = pdfWidth / previewWidth
  return {
    x: previewX * scale,
    y: (previewHeight - previewY) * scale,
  }
}

This keeps the signature exactly where the user placed it, regardless of screen size.

Why Keep It in the Browser?

Server-side signing is easier. Upload the file, overlay the signature, download. But the document and signature travel to a third-party server.

Client-side signing keeps the PDF on the user's device. The trade-off is handling canvas rendering, coordinate math, and binary PDF embedding yourself. For personal and legal documents, that trade-off is usually worth it.

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

Need certificate-based digital signatures, OCR, or advanced PDF protection? Wondershare PDFelement is a desktop alternative worth considering. This post contains affiliate links.

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

sunshey — Wed, 17 Jun 2026 13:47:52 +0000

I needed a dead-simple way to fix rotated PDFs without sending them to a server. Most tools want you to upload the file, wait for processing, then download it. For scans and contracts that's a dealbreaker.

So I built en.sotool.top/rotate — pick a PDF, choose the pages and angle, get a correctly oriented file. All in the browser. No server involved.

Here's how it works under the hood with Vue 3 and pdf-lib.

Why Client-Side?

The obvious reason is privacy. Scans, contracts, medical records — people don't want them on a stranger's server. Beyond that:

No upload bandwidth limits
No file size caps from your backend
Nothing to clean up on a server
Works offline after the page loads

The catch? You're limited by what the browser can do. For rotation, pdf-lib is perfect because it can set the rotation angle on individual pages without re-rendering the entire PDF.

The Stack

Vue 3 — UI and state
pdf-lib — Load, modify, save PDFs
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';

async function loadPdf(file) {
  const arrayBuffer = await file.arrayBuffer();
  const pdfDoc = await PDFDocument.load(arrayBuffer);
  return pdfDoc;
}

Rotating Pages

Each page in pdf-lib has a setRotation method that takes a degrees value. Common angles are 90, 180, and 270.

function rotatePages(pdfDoc, angle, selectedPages = null) {
  const pages = pdfDoc.getPages();
  const targets = selectedPages ?? pages.map((_, i) => i);

  targets.forEach((index) => {
    const page = pages[index];
    if (!page) return;

    const currentRotation = page.getRotation().angle;
    const newRotation = (currentRotation + angle) % 360;
    page.setRotation({ angle: newRotation });
  });

  return pdfDoc;
}

The key detail is reading the existing rotation first. Some PDFs already have a rotation value baked in, and you want to add to it, not overwrite it.

Saving and Downloading

Once the pages are rotated, save the document and trigger a download.

async function saveAndDownload(pdfDoc, filename) {
  const pdfBytes = await pdfDoc.save();
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

Wiring It Up in Vue 3

A minimal component looks like this:

<template>
  <input type="file" accept="application/pdf" @change="handleFile" />
  <select v-model="angle">
    <option :value="90">90°</option>
    <option :value="180">180°</option>
    <option :value="270">270°</option>
  </select>
  <button @click="rotate" :disabled="!pdfDoc">Rotate PDF</button>
</template>

<script setup>
import { ref } from 'vue';
import { PDFDocument } from 'pdf-lib';

const pdfDoc = ref(null);
const angle = ref(90);
const originalName = ref('');

async function handleFile(event) {
  const file = event.target.files[0];
  if (!file) return;
  originalName.value = file.name.replace(/\.pdf$/i, '');
  const arrayBuffer = await file.arrayBuffer();
  pdfDoc.value = await PDFDocument.load(arrayBuffer);
}

async function rotate() {
  if (!pdfDoc.value) return;

  const pages = pdfDoc.value.getPages();
  pages.forEach((page) => {
    const current = page.getRotation().angle;
    page.setRotation({ angle: (current + angle.value) % 360 });
  });

  const bytes = await pdfDoc.value.save();
  const blob = new Blob([bytes], { type: 'application/pdf' });

  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${originalName.value}-rotated.pdf`;
  a.click();
  URL.revokeObjectURL(url);
}
</script>

Handling Mixed Orientations

In the real tool, users can rotate all pages or pick specific ones. The logic is the same — you just pass a list of page indexes instead of rotating every page.

const selectedPages = [0, 2, 5]; // zero-based indexes
selectedPages.forEach((index) => {
  const page = pages[index];
  const current = page.getRotation().angle;
  page.setRotation({ angle: (current + angle) % 360 });
});

Why Not Just Rotate the Canvas?

You could render each page to a canvas, rotate the canvas, and export a new PDF. That works, but it re-enders the content, which can lose vector quality, bloat file size, and break text selection. pdf-lib updates the page's rotation metadata directly, so the original content stays intact.

Try It

If you want to see it in action:

👉 en.sotool.top/rotate

Free, no signup, and your file never leaves the browser.

Built with Vue 3 and pdf-lib. If you need desktop-grade editing, check out Wondershare PDFelement.

How I Convert Excel to PDF in the Browser with Vue 3, xlsx, and html2pdf.js

sunshey — Tue, 16 Jun 2026 12:45:31 +0000

I needed a dead-simple way to turn spreadsheets into PDFs without sending them to a server. Most tools want you to upload the file, wait for processing, then download it. For invoices, budgets, and payroll sheets that's a dealbreaker.

So I built en.sotool.top/excel-to-pdf/ — pick a spreadsheet, preview it, get a PDF. All in the browser. No server involved.

Here's how it works under the hood with Vue 3, xlsx, and html2pdf.js.

Why Client-Side?

The obvious reason is privacy. Financials, payroll, client data — people don't want them on a stranger's server. Beyond that:

No upload bandwidth limits
No file size caps from your backend
Nothing to clean up on a server
Works offline after the page loads

The catch? You're limited by what the browser can do. For Excel-to-PDF conversion, xlsx gives you the cell data and html2pdf.js renders it to PDF, which covers most real-world spreadsheets.

The Stack

Vue 3 — UI and state
xlsx — Parse .xlsx, .xls, .csv, and .ods files
html2pdf.js — Render HTML to PDF
File API — Read the uploaded spreadsheet

npm install xlsx html2pdf.js

Reading the Spreadsheet

First, read the file into a binary string and parse it with xlsx.

import * as XLSX from 'xlsx';

async function parseExcel(file) {
  const buffer = await file.arrayBuffer();
  const bytes = new Uint8Array(buffer);
  let binary = '';
  for (let i = 0; i < bytes.length; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  const workbook = XLSX.read(binary, { type: 'binary' });
  return workbook;
}

xlsx handles .xlsx, .xls, .csv, and .ods without extra configuration.

Turning a Worksheet into HTML

xlsx gives you raw cell data. The simplest way to preview and print it is to build an HTML table.

function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

function worksheetToHtml(worksheet) {
  const range = worksheet['!ref'] ? XLSX.utils.decode_range(worksheet['!ref']) : null;
  if (!range) return '<p>Empty sheet</p>';

  let html = '<table style="width:100%;border-collapse:collapse;font-size:13px;">';

  for (let R = range.s.r; R <= range.e.r; ++R) {
    html += '<tr style="page-break-inside:avoid;">';
    for (let C = range.s.c; C <= range.e.c; ++C) {
      const cellRef = XLSX.utils.encode_cell({ r: R, c: C });
      const cell = worksheet[cellRef];
      const value = cell ? (cell.w !== undefined ? String(cell.w) : String(cell.v ?? '')) : '';
      const tag = R === range.s.r ? 'th' : 'td';
      const style = tag === 'th'
        ? 'background:#f3f4f6;font-weight:600;border:1px solid #d1d5db;padding:6px 10px;'
        : 'border:1px solid #d1d5db;padding:6px 10px;';
      html += `<${tag} style="${style}">${escapeHtml(value)}</${tag}>`;
    }
    html += '</tr>';
  }

  html += '</table>';
  return html;
}

I treat the first row as a header for styling. page-break-inside: avoid helps keep rows from being split across PDF pages.

Converting HTML to PDF

Once the table is rendered in the DOM, html2pdf.js takes over.

import html2pdf from 'html2pdf.js';

async function convertElementToPdf(element, filename) {
  await html2pdf()
    .from(element)
    .set({
      margin: [10, 10, 10, 10],
      filename,
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2, useCORS: true },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
      pagebreak: { mode: ['css', 'legacy'] },
    })
    .save();
}

Landscape A4 works well for wide spreadsheets. Portrait is fine too if your data is narrow.

Handling Multiple Sheets

For workbooks with multiple sheets, I build a temporary container with each sheet as a section, then convert the whole thing.

async function convertAllSheets(sheets, filename) {
  const container = document.createElement('div');
  container.style.backgroundColor = '#fff';

  sheets.forEach((sheet, index) => {
    const sheetDiv = document.createElement('div');
    sheetDiv.style.padding = '20px';
    sheetDiv.style.minHeight = '297mm';
    if (index > 0) sheetDiv.style.pageBreakBefore = 'always';

    const title = document.createElement('h2');
    title.textContent = sheet.name;
    title.style.cssText = 'font-size:16px;font-weight:600;margin-bottom:12px;';
    sheetDiv.appendChild(title);

    const content = document.createElement('div');
    content.innerHTML = sheet.html;
    sheetDiv.appendChild(content);
    container.appendChild(sheetDiv);
  });

  document.body.appendChild(container);
  await convertElementToPdf(container, filename);
  document.body.removeChild(container);
}

This keeps the output as one PDF while making each sheet easy to find.

Vue 3 Integration

The UI is straightforward: file input, preview area, convert button.

<script setup>
import { ref, computed } from 'vue';
import * as XLSX from 'xlsx';
import html2pdf from 'html2pdf.js';

const file = ref(null);
const sheets = ref([]);
const activeSheet = ref('');
const previewRef = ref(null);

const activeHtml = computed(() => {
  const sheet = sheets.value.find(s => s.name === activeSheet.value);
  return sheet ? sheet.html : '';
});

async function handleUpload(event) {
  const uploaded = event.target.files[0];
  if (!uploaded) return;

  const workbook = await parseExcel(uploaded);
  sheets.value = workbook.SheetNames.map(name => ({
    name,
    html: worksheetToHtml(workbook.Sheets[name])
  }));
  activeSheet.value = sheets.value[0]?.name || '';
  file.value = uploaded;
}

async function downloadPdf() {
  if (!previewRef.value || !file.value) return;
  const filename = file.value.name.replace(/\.xlsx?$/i, '') + '.pdf';
  await convertElementToPdf(previewRef.value, filename);
}
</script>

<template>
  <div>
    <input type="file" accept=".xlsx,.xls,.csv,.ods" @change="handleUpload" />
    <div v-if="activeHtml" ref="previewRef" v-html="activeHtml" />
    <button @click="downloadPdf" v-if="activeHtml">Download PDF</button>
  </div>
</template>

Lessons Learned

Spreadsheets are messy. Merged cells, hidden sheets, named ranges, and formulas can all cause surprises. The safest approach is to flatten everything into a simple table.

HTML is the bridge. xlsx doesn't render Excel layouts. Building an HTML table and letting html2pdf.js handle pagination is the most reliable browser-side approach.

Charts and graphs are hard. If the spreadsheet contains charts, they won't come through with xlsx alone. For those, a desktop tool is still the better choice.

Landscape helps. Wide tables get cut off in portrait A4. Defaulting to landscape gives you more usable width.

Try It

The converter is live at en.sotool.top/excel-to-pdf/.

Free, no signup, nothing uploads to a server.

Full source is on GitHub. The Excel-to-PDF logic is in src/views/ExcelToPdf.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 client-side spreadsheet tools? What library did you use?

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

sunshey — Mon, 15 Jun 2026 13:03:36 +0000

I needed a dead-simple way to shrink PDFs without sending them to a server. Most tools want you to upload the file, wait for processing, then download it. For contracts and scans that's a dealbreaker.

So I built en.sotool.top/compress/ — pick a PDF, choose a compression level, get a smaller file. All in the browser. No server involved.

Here's how it works under the hood with Vue 3 and pdf-lib.

Why Client-Side?

The obvious reason is privacy. Contracts, financials, medical scans — people don't want them on a stranger's server. Beyond that:

No upload bandwidth limits
No file size caps from your backend
Nothing to clean up on a server
Works offline after the page loads

The catch? 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
pdf-lib — Load, modify, 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';

async function loadPdf(file) {
  const arrayBuffer = await file.arrayBuffer();
  return PDFDocument.load(arrayBuffer);
}

The Two Sources of PDF Bloat

Most large PDFs are fat for one of two reasons:

Embedded images are stored at full resolution
The PDF embeds fonts or metadata it doesn't really need

For browser-side compression, the biggest wins come from re-encoding images. Font and metadata cleanup helps, but image resizing gives you the dramatic size reductions.

Compressing Images with Canvas

The trick is extracting each image from the PDF, drawing it onto a Canvas at a smaller size or lower quality, then embedding it back.

async function compressImageBytes(imageBytes, quality = 0.7, maxWidth = 1200) {
  const blob = new Blob([imageBytes]);
  const bitmap = await createImageBitmap(blob);

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

  const compressedBlob = await new Promise((resolve) => {
    canvas.toBlob(resolve, 'image/jpeg', quality);
  });

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

A few things worth noting:

createImageBitmap decodes the image efficiently in the browser
We scale down only if the image is wider than maxWidth
JPEG quality lets the user pick their compression level

Replacing Images in the PDF

pdf-lib doesn't have a high-level "replace all images" API, so you walk the pages and look for image operators.

async function compressPdfImages(pdfDoc, quality = 0.7, maxWidth = 1200) {
  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 [name, ref] of Object.entries(xObject.dict)) {
      const obj = xObject.lookupMaybe(name);
      if (obj && obj instanceof PDFStream) {
        const subtype = obj.getMaybe('Subtype')?.asString();
        if (subtype === 'Image') {
          const width = obj.get('Width').asNumber();
          const height = obj.get('Height').asNumber();
          const originalBytes = obj.getContents();

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

          const embeddedImage = await pdfDoc.embedJpg(compressedBytes);
          xObject.set(name, embeddedImage.ref);
        }
      }
    }
  }

  return pdfDoc;
}

This is a simplified version. Production code handles PNG images, CMYK color spaces, and image masks more carefully.

Saving the Compressed PDF

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

useObjectStreams: true helps reduce file size by packing objects more efficiently.

Letting the User Pick the Balance

Different documents need different compression. A text-heavy report can handle aggressive compression. A portfolio with screenshots needs a lighter touch.

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

const file = ref(null);
const quality = ref(0.7);
const loading = ref(false);

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

  try {
    const pdfDoc = await loadPdf(file.value);
    await compressPdfImages(pdfDoc, quality.value);
    const pdfBytes = await pdfDoc.save({ useObjectStreams: true });
    downloadPdf(pdfBytes, 'compressed.pdf');
  } catch (e) {
    console.error(e);
    alert('Failed to compress PDF. Check the file.');
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div>
    <input type="file" accept=".pdf" @change="e => file = e.target.files[0]" />
    <input type="range" min="0.3" max="1" step="0.1" v-model="quality" />
    <span>Quality: {{ Math.round(quality * 100) }}%</span>
    <button @click="handleCompress" :disabled="loading">
      {{ loading ? 'Compressing...' : 'Download Compressed PDF' }}
    </button>
  </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.

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.

Text-only PDFs don't compress much. If a PDF is mostly text and already optimized, there's little a browser tool can do.

Always let users preview. Showing before/after file size helps users trust the result.

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, 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 Add Watermarks to PDFs in the Browser with Vue 3 and pdf-lib

sunshey — Sun, 14 Jun 2026 11:46:09 +0000

I needed a dead-simple way to stamp PDFs with "DRAFT" or "CONFIDENTIAL" without sending them to a server. Most tools want you to upload the file, wait for processing, then download it. For sensitive documents that's a dealbreaker.

So I built en.sotool.top/watermark — pick a PDF, type some text, pick a position, and get a watermarked file. All in the browser. No server involved.

Here's how it works under the hood with Vue 3 and pdf-lib.

Why Client-Side?

The obvious reason is privacy. Contracts, drafts, financials — people don't want them on a stranger's server. Beyond that:

No upload bandwidth limits
No file size caps from your backend
Nothing to clean up on a server
Works offline after the page loads

The catch? You're limited by what the browser can do. For watermarks, pdf-lib is perfect because it can overlay an image onto existing pages without re-rendering the whole PDF.

The Stack

Vue 3 — UI and state
pdf-lib — Load, modify, save PDFs
HTML Canvas — Draw rotated text with transparency
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';

async function loadPdf(file) {
  const arrayBuffer = await file.arrayBuffer();
  return PDFDocument.load(arrayBuffer);
}

That gives you a document object with access to every page.

Generating the Watermark Image

The trick is drawing the watermark text onto an HTML Canvas, then embedding that canvas as a PNG. This lets you control font, color, rotation, and transparency however you want.

function createWatermarkCanvas(text, options = {}) {
  const {
    fontSize = 60,
    color = 'rgba(128, 128, 128, 0.3)',
    rotation = -45,
    fontFamily = 'Arial',
  } = options;

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  ctx.font = `${fontSize}px ${fontFamily}`;
  const metrics = ctx.measureText(text);
  const textWidth = metrics.width;
  const textHeight = fontSize;

  // Size the canvas to fit the rotated text
  const diagonal = Math.sqrt(textWidth ** 2 + textHeight ** 2);
  const size = Math.ceil(diagonal + fontSize);
  canvas.width = size;
  canvas.height = size;

  ctx.font = `${fontSize}px ${fontFamily}`;
  ctx.fillStyle = color;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  ctx.translate(size / 2, size / 2);
  ctx.rotate((rotation * Math.PI) / 180);
  ctx.fillText(text, 0, 0);

  return canvas;
}

A few things worth noting:

The canvas is sized to the text diagonal so rotated text doesn't get clipped.
Negative rotation gives that classic bottom-left-to-top-right watermark look.
The rgba color bakes transparency straight into the PNG.

Convert it to a PNG blob:

async function canvasToPngBytes(canvas) {
  return new Promise((resolve) => {
    canvas.toBlob(async (blob) => {
      const arrayBuffer = await blob.arrayBuffer();
      resolve(new Uint8Array(arrayBuffer));
    }, 'image/png');
  });
}

Drawing It on Every Page

Embed the PNG into the PDF and draw it on each page.

async function addWatermarkToPdf(pdfDoc, watermarkBytes, position = 'center') {
  const watermarkImage = await pdfDoc.embedPng(watermarkBytes);
  const pages = pdfDoc.getPages();

  pages.forEach((page) => {
    const { width, height } = page.getSize();
    const imgDims = watermarkImage.scale(1);
    const { x, y } = calculatePosition(
      width,
      height,
      imgDims.width,
      imgDims.height,
      position
    );

    page.drawImage(watermarkImage, {
      x,
      y,
      width: imgDims.width,
      height: imgDims.height,
      opacity: 0.3,
    });
  });

  return pdfDoc;
}

pdf-lib uses a bottom-left origin, not top-left like the canvas. That's easy to forget and will bite you the first time you place a watermark.

The 9-Position Grid

Users usually want a watermark in one of nine spots. The math is straightforward once you remember the coordinate system.

function calculatePosition(pageW, pageH, imgW, imgH, position) {
  const margin = 20;
  const positions = {
    'top-left':      { x: margin,              y: pageH - imgH - margin },
    'top-center':    { x: (pageW - imgW) / 2,  y: pageH - imgH - margin },
    'top-right':     { x: pageW - imgW - margin, y: pageH - imgH - margin },
    'center-left':   { x: margin,              y: (pageH - imgH) / 2 },
    'center':        { x: (pageW - imgW) / 2,  y: (pageH - imgH) / 2 },
    'center-right':  { x: pageW - imgW - margin, y: (pageH - imgH) / 2 },
    'bottom-left':   { x: margin,              y: margin },
    'bottom-center': { x: (pageW - imgW) / 2,  y: margin },
    'bottom-right':  { x: pageW - imgW - margin, y: margin },
  };

  return positions[position] || positions['center'];
}

Tiled watermarks would loop over a grid instead. The current tool only does single-position placement, which covers most real use cases.

Image Watermarks

For logos, read the uploaded image and embed it directly.

async function addImageWatermark(pdfDoc, imageFile, position = 'center') {
  const imageBytes = new Uint8Array(await imageFile.arrayBuffer());

  let watermarkImage;
  if (imageFile.type === 'image/png') {
    watermarkImage = await pdfDoc.embedPng(imageBytes);
  } else if (imageFile.type === 'image/jpeg' || imageFile.type === 'image/jpg') {
    watermarkImage = await pdfDoc.embedJpg(imageBytes);
  } else {
    throw new Error('Use PNG or JPEG');
  }

  // Don't let a giant logo cover the whole page
  const maxWidth = 200;
  const scale = Math.min(1, maxWidth / watermarkImage.width);
  const imgDims = watermarkImage.scale(scale);

  const pages = pdfDoc.getPages();
  pages.forEach((page) => {
    const { width, height } = page.getSize();
    const { x, y } = calculatePosition(width, height, imgDims.width, imgDims.height, position);
    page.drawImage(watermarkImage, { x, y, width: imgDims.width, height: imgDims.height, opacity: 0.5 });
  });

  return pdfDoc;
}

A Minimal Vue 3 Component

Here's a stripped-down version you can actually run:

<script setup>
import { ref } from 'vue';
import { PDFDocument } from 'pdf-lib';

const file = ref(null);
const watermarkText = ref('DRAFT');
const position = ref('center');
const loading = ref(false);

function createWatermarkCanvas(text, options = {}) {
  const { fontSize = 60, color = 'rgba(128, 128, 128, 0.3)', rotation = -45 } = options;
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontSize}px Arial`;
  const metrics = ctx.measureText(text);
  const size = Math.ceil(Math.sqrt(metrics.width ** 2 + fontSize ** 2) + fontSize);
  canvas.width = size;
  canvas.height = size;
  ctx.font = `${fontSize}px Arial`;
  ctx.fillStyle = color;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.translate(size / 2, size / 2);
  ctx.rotate((rotation * Math.PI) / 180);
  ctx.fillText(text, 0, 0);
  return canvas;
}

function calculatePosition(pageW, pageH, imgW, imgH, pos) {
  const margin = 20;
  const map = {
    'top-left': { x: margin, y: pageH - imgH - margin },
    'top-center': { x: (pageW - imgW) / 2, y: pageH - imgH - margin },
    'top-right': { x: pageW - imgW - margin, y: pageH - imgH - margin },
    'center-left': { x: margin, y: (pageH - imgH) / 2 },
    'center': { x: (pageW - imgW) / 2, y: (pageH - imgH) / 2 },
    'center-right': { x: pageW - imgW - margin, y: (pageH - imgH) / 2 },
    'bottom-left': { x: margin, y: margin },
    'bottom-center': { x: (pageW - imgW) / 2, y: margin },
    'bottom-right': { x: pageW - imgW - margin, y: margin },
  };
  return map[pos] || map['center'];
}

async function applyWatermark() {
  if (!file.value) return;
  loading.value = true;

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

    const canvas = createWatermarkCanvas(watermarkText.value);
    const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
    const watermarkBytes = new Uint8Array(await blob.arrayBuffer());
    const watermarkImage = await pdfDoc.embedPng(watermarkBytes);
    const imgDims = watermarkImage.scale(1);

    const pages = pdfDoc.getPages();
    pages.forEach((page) => {
      const { width, height } = page.getSize();
      const { x, y } = calculatePosition(width, height, imgDims.width, imgDims.height, position.value);
      page.drawImage(watermarkImage, { x, y, width: imgDims.width, height: imgDims.height, opacity: 0.3 });
    });

    const pdfBytes = await pdfDoc.save();
    const blobUrl = URL.createObjectURL(new Blob([pdfBytes], { type: 'application/pdf' }));
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = 'watermarked.pdf';
    a.click();
    URL.revokeObjectURL(blobUrl);
  } catch (e) {
    console.error(e);
    alert('Failed to add watermark. Check the file.');
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <div>
    <input type="file" accept=".pdf" @change="e => file = e.target.files[0]" />
    <input v-model="watermarkText" placeholder="Watermark text" />
    <select v-model="position">
      <option v-for="p in ['top-left','top-center','top-right','center-left','center','center-right','bottom-left','bottom-center','bottom-right']" :key="p" :value="p">
        {{ p }}
      </option>
    </select>
    <button @click="applyWatermark" :disabled="loading">
      {{ loading ? 'Processing...' : 'Download Watermarked PDF' }}
    </button>
  </div>
</template>

The production version adds drag-and-drop, a live preview, and image watermarks. That code lives in src/views/Watermark.vue in the repo.

Lessons Learned

Canvas sizing will trip you up. If the canvas is too small, rotated text gets clipped at the corners. Size it to the diagonal of the text bounding box plus padding.

PDF coordinates start at the bottom-left. This is the opposite of canvas. I placed a watermark just off the top edge more than once before I got the y math right.

pdf-lib overlays, it doesn't re-render. The watermark sits on top of the existing content. That's usually what you want, but if you need it behind the content you have to mess with content stream order — much harder.

Opacity stacks. You can set alpha in the canvas color, in the PNG, and again in drawImage. Combining 0.3 + 0.3 gives you 0.09, which is basically invisible. Pick one layer and stick with it.

Fonts are system fonts unless you load your own. The canvas uses whatever Arial-like font is available. For a custom font, load it with FontFace first or it'll fall back.

Try It

The watermark 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 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 client-side PDF tools? What did you use — pdf-lib, PDF.js, or something else?

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

sunshey — Sat, 13 Jun 2026 12:48:41 +0000

Converting Word documents to PDFs on the server is the classic approach: upload the file, run LibreOffice or a cloud API, send the result back. But that means your users’ resumes, contracts, and reports touch your infrastructure.

I wanted something simpler for en.sotool.top: pick a .docx file in the browser, preview the parsed content, and download a PDF. No server involved.

Here is how I built it with Vue 3, mammoth, and html2pdf.js.

Why Client-Side?

The main reason is privacy. Resumes, contracts, tax documents — users do not want them on a stranger’s server. Client-side conversion 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 complex documents are limited by the browser’s rendering capabilities. For typical office documents, that is fine.

The Stack

Vue 3 — UI, file handling, and reactive state
mammoth — Parse .docx files into clean HTML
html2pdf.js — Render the HTML into a PDF using html2canvas + jsPDF
Native File API — File selection

npm install mammoth html2pdf.js

Loading the Word Document

The first step is reading the uploaded .docx file into an ArrayBuffer, then converting it to HTML with mammoth.

import mammoth from 'mammoth';

async function convertDocxToHtml(file) {
  const arrayBuffer = await file.arrayBuffer();
  const result = await mammoth.convertToHtml({ arrayBuffer });
  return result.value;
}

mammoth intentionally produces simple, clean HTML. It ignores complex formatting like text boxes and embedded fonts, which makes the output predictable.

I keep the HTML in a reactive ref and render it in a preview panel:

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

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

const htmlContent = ref('');
const previewRef = ref(null);
</script>

Generating the PDF

Once the user is happy with the preview, html2pdf.js turns the preview element into a PDF. It uses html2canvas to rasterize the HTML and jsPDF to create the PDF file.

import html2pdf from 'html2pdf.js';

async function convertToPdf() {
  const element = previewRef.value;
  if (!element) return;

  await html2pdf()
    .from(element)
    .set({
      margin: [10, 10, 10, 10],
      filename: 'document.pdf',
      image: { type: 'jpeg', quality: 0.98 },
      html2canvas: { scale: 2, useCORS: true },
      jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
    })
    .save();
}

The scale: 2 setting gives crisp text and images on high-DPI screens. useCORS: true helps if the preview contains external images.

Styling the Preview

html2pdf.js renders whatever is in the DOM, so the preview styles directly affect the output. I use scoped CSS with :deep() to style the converted HTML:

.word-preview :deep(h1) {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.word-preview :deep(p) {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}

.word-preview :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.word-preview :deep(td),
.word-preview :deep(th) {
  border: 1px solid #d1d5db;
  padding: 0.5rem;
}

Keep the preview background white. Dark mode UI is nice for the app, but a white page produces a clean PDF.

Handling Errors Gracefully

Not every file is a valid .docx. I wrap the conversion in a try/catch and reset the state on failure:

async function handleFile(file) {
  try {
    const arrayBuffer = await file.arrayBuffer();
    const result = await mammoth.convertToHtml({ arrayBuffer });
    htmlContent.value = result.value;
  } catch (e) {
    console.error(e);
    alert('Failed to parse the document. Please check the file format.');
  }
}

You can also surface mammoth warnings if you want to show the user which styles or elements were ignored.

Lessons Learned

1. Mammoth is opinionated by design
It strips complex Word features to produce clean HTML. If your users need pixel-perfect fidelity, a server-side converter is still a better fit.

2. Page size matters
If the document contains wide tables or landscape sections, A4 portrait may clip them. Consider letting users choose the output format.

3. html2canvas is heavy on large documents
Very long documents with many images can take several seconds and block the main thread. For heavy usage, consider chunking or using a Web Worker.

4. Keep the original file around
If users want to adjust settings and re-convert, you will need the original File object or ArrayBuffer because mammoth does not expose an editable model.

Try It

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

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

Full source code is on GitHub. The conversion logic lives in src/views/WordToPdf.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 document converters? What did you use — mammoth, pdf-lib, or a server-side tool?

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

sunshey — Fri, 12 Jun 2026 13:39:30 +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) {
  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.

const documents = ref([]);

async function addFiles(fileList) {
  for (const file of 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:

const pages = ref([]);

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:

async function renderThumbnail(pdfDoc, pageIndex, scale = 0.2) {
  const page = pdfDoc.getPages()[pageIndex];
  const { width, height } = page.getSize();

  const canvas = document.createElement('canvas');
  canvas.width = width * scale;
  canvas.height = height * scale;
  const ctx = canvas.getContext('2d');

  // pdf-lib pages can be drawn onto another PDF,
  // but for thumbnails we embed into a temp PDF and render via pdf.js
  // or use a simplified placeholder. In production I use pdf.js for rendering.

  return canvas.toDataURL('image/png');
}

In the actual implementation, I use pdfjs-dist for rendering thumbnails because pdf-lib can create and 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:

<draggable v-model="pages" item-key="id">
  <template #item="{ element }">
    <div class="page-card">
      <img :src="element.thumbnail" />
      <span>Page {{ element.pageIndex + 1 }}</span>
    </div>
  </template>
</draggable>

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, filename) {
  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
If a user uploads the same PDF twice, you get two separate PDFDocument instances. That’s fine, but if you later edit one in place, the other won’t reflect it. I treat each upload as immutable.

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 bytes if you need re-download
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.

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/MergeView.vue and src/composables/usePdfMerge.ts.

Want More Advanced PDF Features?

This post contains affiliate links.

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

How to Add Electronic Signatures to PDFs in the Browser (Vue 3 + HTML5 Canvas)

sunshey — Thu, 11 Jun 2026 13:37:40 +0000

A client emailed me a contract last week. I needed to sign it and send it back. The usual options? Print it, sign with a pen, scan it back in. Or upload it to some online tool that processes it on their server.

Neither worked for me. So I built client-side PDF signing into my toolkit.

Here's how we add electronic signatures to PDFs entirely in the browser using Vue 3, HTML5 Canvas, and pdf-lib.

Why Client-Side?

Most online PDF signing works like this:

Upload your PDF to their server
They render a signature overlay
You download the signed version

The problem: your contract, along with your signature, just sat on someone else's computer. For legal documents, that's not ideal.

Client-side signing solves this. The PDF never leaves the user's device. The browser loads the libraries, renders the signature, embeds it into the PDF, and downloads the result.

The Stack

Vue 3 — UI and state management
HTML5 Canvas — Signature rendering (both text and freehand)
Google Fonts — 12 signature-style web fonts
pdf-lib — PDF manipulation and image embedding

npm install pdf-lib

Feature 1: Text-Based Signatures

Users type their name and pick a font style. We render it to a Canvas, trim the transparent edges, and embed it as a PNG into the PDF.

Loading and Rendering a Signature Font

// Google Fonts mapping
const fontLinks = {
  greatvibes: 'Great+Vibes',
  alexbrush: 'Alex+Brush',
  // ... 10 more styles
};

async function loadFont(styleKey) {
  const fontName = fontLinks[styleKey];
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  // Only load needed characters to minimize font size
  const text = encodeURIComponent(name.value || '');
  link.href = `https://fonts.googleapis.com/css2?family=${fontName}&text=${text}&display=swap`;
  document.head.appendChild(link);

  // Wait for font to load
  await document.fonts.load(`1em "${fontName.replace(/\+/g, ' ')}"`);
}

Using the text= parameter reduces font downloads from ~200KB to ~5KB per font. For a name like "John Smith," we only load those 10 characters.

Rendering to Canvas

function renderSignature(canvas, name, style, color) {
  const ctx = canvas.getContext('2d');
  const dpr = window.devicePixelRatio || 1;
  const rect = canvas.getBoundingClientRect();

  // Scale for retina displays
  canvas.width = rect.width * dpr;
  canvas.height = 120 * dpr;
  ctx.scale(dpr, dpr);

  ctx.clearRect(0, 0, rect.width, 120);
  ctx.fillStyle = color;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Auto-size based on name length
  let fontSize = Math.min(64, rect.width / (name.length * 0.6));
  fontSize = Math.max(24, fontSize);

  ctx.font = `${fontSize}px "${style.fontFamily}", cursive`;
  ctx.fillText(name, rect.width / 2, 60);
}

Key detail: we scale the Canvas by devicePixelRatio so signatures look crisp on Retina displays. Without this, text looks blurry on MacBooks and modern phones.

Trimming Transparent Edges

Nobody wants a signature with a huge white bounding box. We trim the Canvas to the actual ink:

function trimCanvas(source) {
  const ctx = source.getContext('2d');
  const w = source.width;
  const h = source.height;
  const imgData = ctx.getImageData(0, 0, w, h);
  const data = imgData.data;

  let minX = w, minY = h, maxX = 0, maxY = 0;

  // Find bounding box of non-transparent pixels
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      const alpha = data[(y * w + x) * 4 + 3];
      if (alpha > 0) {
        minX = Math.min(minX, x);
        minY = Math.min(minY, y);
        maxX = Math.max(maxX, x);
        maxY = Math.max(maxY, y);
      }
    }
  }

  if (maxX < minX) return source.toDataURL('image/png');

  const padding = 16;
  const trimW = maxX - minX + 1 + padding * 2;
  const trimH = maxY - minY + 1 + padding * 2;

  const trimmed = document.createElement('canvas');
  trimmed.width = trimW;
  trimmed.height = trimH;
  trimmed.getContext('2d')
    .putImageData(ctx.getImageData(minX, minY, trimW, trimH), padding, padding);

  return trimmed.toDataURL('image/png');
}

Feature 2: Freehand Drawing

For users who prefer to draw their actual signature, we use a second Canvas with mouse/touch event handlers.

function startDrawing(e) {
  isDrawing = true;
  const { x, y } = getCoordinates(e);
  ctx.beginPath();
  ctx.moveTo(x, y);
}

function draw(e) {
  if (!isDrawing) return;
  const { x, y } = getCoordinates(e);
  ctx.lineTo(x, y);
  ctx.stroke();
}

function stopDrawing() {
  isDrawing = false;
}

// Handle both mouse and touch
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('touchstart', (e) => {
  e.preventDefault(); // Prevent scrolling while signing
  startDrawing(e);
});

Critical touch event detail: e.preventDefault() on touchstart prevents the page from scrolling while the user is drawing their signature on a phone.

Embedding the Signature into a PDF

Once we have the signature as a data URL, we use pdf-lib to embed it as a PNG and draw it at the desired position.

import { PDFDocument } from 'pdf-lib';

async function embedSignature(pdfFile, signatureDataUrl, x, y, width, height) {
  const pdfBytes = await pdfFile.arrayBuffer();
  const pdfDoc = await PDFDocument.load(pdfBytes);
  const pages = pdfDoc.getPages();
  const firstPage = pages[0];

  // Convert data URL to embedded image
  const signatureImage = await pdfDoc.embedPng(signatureDataUrl);

  // Draw signature on page
  firstPage.drawImage(signatureImage, {
    x,
    y,
    width,
    height,
  });

  const signedPdfBytes = await pdfDoc.save();
  return signedPdfBytes;
}

Coordinate system note: pdf-lib uses a bottom-left origin (PDF standard), while browsers use top-left. We convert coordinates by subtracting from page height:

const pageHeight = firstPage.getHeight();
const pdfY = pageHeight - y - height; // Convert from top-left to bottom-left

Placing the Signature: Drag and Drop

We render the PDF pages as images using pdfjs-dist, then overlay a draggable signature element. Users drag it to the exact position they want.

<template>
  <div class="pdf-container" ref="container">
    <img :src="pageImage" class="page-image" />
    <div
      class="signature-overlay"
      :style="signatureStyle"
      @mousedown="startDrag"
    >
      <img :src="signatureDataUrl" />
    </div>
  </div>
</template>

The drag position is calculated relative to the PDF page image. When the user clicks "Apply Signature," we map the pixel coordinates to PDF points (72 points per inch) using the page's scale ratio.

Challenges and Solutions

Font loading race conditions
If the user clicks "Use This Signature" before the Google Font loads, the Canvas renders in a fallback font. We disable the button until document.fonts.load() resolves.

High-DPI displays
Without devicePixelRatio scaling, signatures look blurry on Retina screens. We scale the Canvas dimensions and context, then use CSS to display it at the original size.

Cross-origin font loading
Google Fonts loads via CSS @font-face. We dynamically inject the <link> tag and wait for the font to appear in document.fonts before rendering.

Large PDFs
For PDFs with many pages, we only render the first page for signature placement. The signature is embedded into the selected page(s) during final processing.

Complete Flow

User uploads PDF
First page renders as an image for placement
User creates a text or drawn signature
User drags signature to position on the page
App maps pixel coordinates to PDF points
pdf-lib embeds the signature PNG into the PDF
Signed PDF downloads automatically

All in the browser. Zero server involvement.

Try the Live Tool

If you want to sign PDFs without writing code:

👉 en.sotool.top/sign-pdf

Free, no signup, browser-based. Your file and signature never leave your device.

The source code is open source if you want to see the full Vue 3 + Canvas + pdf-lib integration.

Have you built client-side document manipulation features? What challenges did you run into with Canvas rendering or PDF embedding?

How to Password Protect PDFs in the Browser Using JavaScript (No Server)

sunshey — Wed, 10 Jun 2026 13:48:24 +0000

A client sent me a contract last month. Before forwarding it to my accountant, I wanted to password-protect it. The usual options? Adobe Acrobat ($20/month) or some "free" online tool that uploads my file to a server first.

Neither worked for me. So I built client-side encryption into my PDF toolkit.

Here's how to do it entirely in the browser using pdf-lib.

Why Client-Side?

Most online PDF encryption works like this:

Upload your PDF to their server
They encrypt it
You download the encrypted version

The problem: your sensitive document — contract, tax form, medical record — just sat on someone else's computer. Even if they delete it after processing, you have no guarantee.

Client-side encryption solves this. The PDF never leaves the user's device. The browser loads the encryption library, processes the file locally, and downloads the result.

The Stack: pdf-lib

pdf-lib supports PDF encryption natively as of v1.17.0. It runs entirely in the browser, no backend required.

npm install pdf-lib

Basic Encryption: Add a Password

Here's the simplest flow: load a PDF, encrypt it with a password, save.

import { PDFDocument } from 'pdf-lib';

async function encryptPdf(pdfFile, password) {
  // Read PDF as bytes
  const pdfBytes = await pdfFile.arrayBuffer();

  // Load the PDF
  const pdfDoc = await PDFDocument.load(pdfBytes);

  // Encrypt with password
  pdfDoc.encrypt({
    userPassword: password,
    ownerPassword: password,
  });

  // Save encrypted PDF
  const encryptedBytes = await pdfDoc.save();
  return encryptedBytes;
}

// Usage
const input = document.getElementById('fileInput');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const encrypted = await encryptPdf(file, 'my-secret-password');

  // Download
  const blob = new Blob([encrypted], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'encrypted-document.pdf';
  a.click();
});

What's happening:

Read the PDF file into memory
Load it into pdf-lib
Apply encryption with the provided password
Save and trigger download

The resulting PDF requires the password to open.

User Password vs Owner Password

PDF encryption supports two passwords:

User password: Required to open and view the document
Owner password: Required to change permissions (printing, copying, etc.)

For most use cases, you can set them to the same value:

pdfDoc.encrypt({
  userPassword: 'open-me',
  ownerPassword: 'open-me',
});

If you want stricter control, set different passwords:

pdfDoc.encrypt({
  userPassword: 'shared-with-client',      // Client needs this to open
  ownerPassword: 'admin-only-password',    // Only you can change permissions
});

Encryption Strength: 128-bit vs 256-bit AES

PDF supports multiple encryption algorithms:

Algorithm	Security	Compatibility
RC4 (40-bit)	Weak	Universal
128-bit AES	Strong	Acrobat 7+
256-bit AES	Strongest	Acrobat X+

pdf-lib defaults to strong encryption. For maximum compatibility with older readers, you can explicitly request 128-bit AES. For best security, use 256-bit AES.

Most modern PDF readers (Adobe Acrobat, Preview, Chrome/Firefox built-in viewers, mobile apps) handle 128-bit and 256-bit AES without issues. Only very old software (pre-2010) might struggle.

Setting Permissions (Optional)

Beyond just password-protection, you can restrict what users can do:

pdfDoc.encrypt({
  userPassword: 'view-only',
  ownerPassword: 'admin-password',
  permissions: {
    printing: 'highResolution',  // or 'lowResolution' or false
    modifying: false,
    copying: false,
    annotating: false,
    fillingForms: false,
    documentAssembly: false,
  },
});

This creates a PDF that opens with "view-only" but restricts printing, copying, and editing unless you have the owner password.

Password Best Practices

Since there's no "forgot password" feature for encrypted PDFs:

Use a memorable but strong password. I use 3-4 random words + a number + a symbol: Blue-Desk-7-Tiger!
Share the password separately. Email the PDF, text the password. Don't send both through the same channel.
Test before sending. Always open the encrypted PDF yourself to verify the password works.

Complete Working Example

Here's a minimal HTML page that encrypts PDFs in the browser:

<!DOCTYPE html>
<html>
<head>
  <title>PDF Encryptor</title>
  <script type="module">
    import { PDFDocument } from 'https://cdn.jsdelivr.net/npm/pdf-lib@1.17.1/+esm';

    document.getElementById('encryptBtn').addEventListener('click', async () => {
      const fileInput = document.getElementById('pdfFile');
      const password = document.getElementById('password').value;

      if (!fileInput.files[0] || !password) return;

      const pdfBytes = await fileInput.files[0].arrayBuffer();
      const pdfDoc = await PDFDocument.load(pdfBytes);

      pdfDoc.encrypt({
        userPassword: password,
        ownerPassword: password,
      });

      const encrypted = await pdfDoc.save();
      const blob = new Blob([encrypted], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);

      const a = document.createElement('a');
      a.href = url;
      a.download = 'encrypted.pdf';
      a.click();
    });
  </script>
</head>
<body>
  <input type="file" id="pdfFile" accept=".pdf">
  <input type="password" id="password" placeholder="Enter password">
  <button id="encryptBtn">Encrypt PDF</button>
</body>
</html>

No build step, no server, no upload.

Try the Live Tool

If you want to encrypt PDFs without writing code:

👉 en.sotool.top/encrypt

Free, no signup, browser-based. Your file never leaves your device.

The source code is open source if you want to see the full Vue 3 + pdf-lib integration with 128-bit and 256-bit AES options.

Have you implemented client-side document security? What trade-offs do you consider between security and usability?

How to Convert Images to PDF in the Browser Using JavaScript (No Server)

sunshey — Tue, 09 Jun 2026 13:21:09 +0000

I needed to turn 12 renovation photos into a single PDF for an insurance claim last week. The usual approach? Upload to some online converter, hope they don't keep the files, download the result.

There's a better way: do it entirely in the browser. No server, no upload, no privacy risk.

In this post, I'll show you how to build a client-side image-to-PDF converter using pdf-lib, with code I've been running in production.

Why Client-Side?

Most image-to-PDF services work like this:

You upload images to their server
They process and convert
You download the PDF

Problems:

Privacy: your images sit on a stranger's server
Network: uploading 50MB of photos takes time
Dependency: service goes down, you're stuck

Client-side processing solves all three. The images never leave the user's device. It works offline after the page loads. And you're not paying for server bandwidth.

The Stack: pdf-lib

pdf-lib is a JavaScript library for creating and modifying PDFs. It runs in browsers and Node.js, doesn't require native dependencies, and produces spec-compliant PDFs.

npm install pdf-lib

For image embedding, we'll also need to handle different image formats:

npm install pdf-lib @pdf-lib/png-js @pdf-lib/jpeg-js

Basic Conversion: Single Image to PDF

Here's the simplest flow: load an image, embed it into a new PDF, save.

import { PDFDocument } from 'pdf-lib';

async function imageToPdf(imageFile) {
  // Read image as ArrayBuffer
  const imageBytes = await imageFile.arrayBuffer();

  // Create a new PDF document
  const pdfDoc = await PDFDocument.create();

  // Determine image type and embed
  let image;
  if (imageFile.type === 'image/png') {
    image = await pdfDoc.embedPng(imageBytes);
  } else if (imageFile.type === 'image/jpeg') {
    image = await pdfDoc.embedJpg(imageBytes);
  } else {
    throw new Error('Unsupported image format');
  }

  // Add a page sized to the image dimensions
  const page = pdfDoc.addPage([image.width, image.height]);

  // Draw the image on the page
  page.drawImage(image, {
    x: 0,
    y: 0,
    width: image.width,
    height: image.height,
  });

  // Save the PDF
  const pdfBytes = await pdfDoc.save();
  return pdfBytes;
}

// Usage
const input = document.getElementById('fileInput');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const pdfBytes = await imageToPdf(file);

  // Download
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'converted.pdf';
  a.click();
});

What's happening:

Read the image file into memory as bytes
Create a blank PDF document
Embed the image (PNG or JPEG) into the PDF
Add a page exactly sized to the image
Draw the image at full resolution
Save and trigger download

Multiple Images: One PDF Per Image

Usually you want multiple images, each on its own page.

async function imagesToPdf(imageFiles) {
  const pdfDoc = await PDFDocument.create();

  for (const file of imageFiles) {
    const imageBytes = await file.arrayBuffer();
    let image;

    if (file.type === 'image/png') {
      image = await pdfDoc.embedPng(imageBytes);
    } else if (file.type === 'image/jpeg') {
      image = await pdfDoc.embedJpg(imageBytes);
    } else {
      continue; // Skip unsupported formats
    }

    const page = pdfDoc.addPage([image.width, image.height]);
    page.drawImage(image, {
      x: 0,
      y: 0,
      width: image.width,
      height: image.height,
    });
  }

  return await pdfDoc.save();
}

Page Size Control: A4, Letter, Original

Real users don't always want the PDF page to match the image exactly. They might want all pages to be A4 for printing.

function getPageSize(format) {
  const sizes = {
    a4: [595, 842],        // 72 DPI
    letter: [612, 792],    // 72 DPI
  };
  return sizes[format] || null; // null = use image dimensions
}

async function imagesToPdfWithSize(imageFiles, pageFormat = 'original') {
  const pdfDoc = await PDFDocument.create();

  for (const file of imageFiles) {
    const imageBytes = await file.arrayBuffer();
    let image;

    if (file.type === 'image/png') {
      image = await pdfDoc.embedPng(imageBytes);
    } else {
      image = await pdfDoc.embedJpg(imageBytes);
    }

    // Determine page dimensions
    let pageWidth, pageHeight;
    const presetSize = getPageSize(pageFormat);

    if (presetSize) {
      [pageWidth, pageHeight] = presetSize;
    } else {
      [pageWidth, pageHeight] = [image.width, image.height];
    }

    const page = pdfDoc.addPage([pageWidth, pageHeight]);

    // Calculate scaled dimensions to fit page while maintaining aspect ratio
    const scale = Math.min(
      pageWidth / image.width,
      pageHeight / image.height
    );

    const scaledWidth = image.width * scale;
    const scaledHeight = image.height * scale;

    // Center the image on the page
    const x = (pageWidth - scaledWidth) / 2;
    const y = (pageHeight - scaledHeight) / 2;

    page.drawImage(image, {
      x, y,
      width: scaledWidth,
      height: scaledHeight,
    });
  }

  return await pdfDoc.save();
}

Key detail: When fitting an image to a fixed page size (like A4), you need to:

Calculate the scale factor that fits the image within the page
Maintain aspect ratio so the image doesn't stretch
Center the image so there's equal whitespace on all sides

Memory Management: Large Image Handling

Here's a trap: loading a 20MB JPEG into memory, then embedding it into a PDF, then holding both copies.

// BAD: Keeps both image and PDF in memory
const imageBytes = await file.arrayBuffer(); // 20MB
const image = await pdfDoc.embedJpg(imageBytes); // Creates another copy
// imageBytes is still in memory, unused

// GOOD: Release image bytes after embedding
let imageBytes = await file.arrayBuffer();
const image = await pdfDoc.embedJpg(imageBytes);
imageBytes = null; // Allow GC to reclaim

For batch conversion of many large images, I process them in chunks rather than all at once:

async function processInBatches(files, batchSize = 5) {
  const pdfDoc = await PDFDocument.create();

  for (let i = 0; i < files.length; i += batchSize) {
    const batch = files.slice(i, i + batchSize);

    for (const file of batch) {
      // Process file...
      const imageBytes = await file.arrayBuffer();
      const image = await pdfDoc.embedJpg(imageBytes);
      // Add page, draw image...
    }

    // Yield to event loop between batches
    await new Promise(r => setTimeout(r, 0));
  }

  return await pdfDoc.save();
}

The setTimeout(..., 0) yields control back to the browser, keeping the UI responsive and allowing garbage collection to run between batches.

Web Workers: Don't Block the Main Thread

For large jobs (50+ images), move the conversion to a Web Worker so the UI doesn't freeze:

// worker.js
import { PDFDocument } from 'pdf-lib';

self.onmessage = async (e) => {
  const { images } = e.data;
  const pdfDoc = await PDFDocument.create();

  for (const { bytes, type } of images) {
    const image = type === 'png' 
      ? await pdfDoc.embedPng(bytes)
      : await pdfDoc.embedJpg(bytes);

    const page = pdfDoc.addPage([image.width, image.height]);
    page.drawImage(image, { x: 0, y: 0, width: image.width, height: image.height });
  }

  const pdfBytes = await pdfDoc.save();
  self.postMessage({ pdfBytes }, [pdfBytes.buffer]);
};

// main.js
const worker = new Worker('worker.js', { type: 'module' });

async function convertWithWorker(files) {
  const images = await Promise.all(
    files.map(async (file) => ({
      bytes: new Uint8Array(await file.arrayBuffer()),
      type: file.type.includes('png') ? 'png' : 'jpg',
    }))
  );

  return new Promise((resolve) => {
    worker.onmessage = (e) => resolve(e.data.pdfBytes);
    worker.postMessage({ images });
  });
}

Supported Image Formats

pdf-lib handles PNG and JPEG natively. For WebP, BMP, and GIF, you'll need to convert them first.

I use Canvas for format conversion:

async function convertToSupportedFormat(file) {
  if (file.type === 'image/png' || file.type === 'image/jpeg') {
    return file;
  }

  // Convert WebP/BMP/GIF to PNG via Canvas
  const img = new Image();
  const url = URL.createObjectURL(file);
  img.src = url;

  await new Promise((resolve) => {
    img.onload = resolve;
  });

  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  URL.revokeObjectURL(url);

  const blob = await new Promise(resolve => 
    canvas.toBlob(resolve, 'image/png')
  );

  return new File([blob], 'converted.png', { type: 'image/png' });
}

Try the Live Tool

If you want to convert images to PDF without writing code:

👉 en.sotool.top/image-to-pdf

Free, no signup, browser-based. Drag images, reorder, pick page size, download as PDF.

The source code is open source if you want to see the full Vue 3 + pdf-lib integration.

Have you built browser-based document tools? How do you handle large batch conversions or memory limits in the browser?

How to Convert PDF Pages to Images in the Browser (No Server Uploads)

sunshey — Fri, 05 Jun 2026 11:39:44 +0000

I needed to pull a chart from a PDF report and stick it into a slide deck last week. Screenshot looked terrible. Copy-paste from the PDF viewer? Worse.

The clean way is converting PDF pages to actual image files — PNG or JPEG. And doing it in the browser means the document never touches a server.

In this post, I'll show you how to render PDF pages to images client-side using Mozilla's PDF.js, with code I've been running in production for a while.

The Stack: pdfjs-dist

Mozilla's PDF.js is the standard for rendering PDFs in browsers. It parses PDF structure, renders pages to a <canvas> element, and lets you export that canvas as an image.

npm install pdfjs-dist

The library uses a Web Worker for parsing (so the main thread stays responsive), which is great until you try to bundle it with Vite and the worker file 404s in production. More on that later.

Basic Conversion: One Page to PNG

Here's the simplest possible flow: load a PDF, render page 1 to a canvas, export as PNG.

import * as pdfjsLib from 'pdfjs-dist';
import PdfWorker from 'pdfjs-dist/build/pdf.worker?worker';

// Initialize worker
pdfjsLib.GlobalWorkerOptions.workerPort = new PdfWorker();

async function pdfPageToImage(file, pageNumber = 1, scale = 2) {
  const arrayBuffer = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

  const page = await pdf.getPage(pageNumber);

  // Set up canvas
  const viewport = page.getViewport({ scale });
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

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

  // Render PDF page to canvas
  await page.render({
    canvasContext: context,
    viewport: viewport
  }).promise;

  // Export as PNG
  const blob = await new Promise(resolve => 
    canvas.toBlob(resolve, 'image/png')
  );

  return blob;
}

// Usage
const imageBlob = await pdfPageToImage(file, 1, 2);
downloadBlob(imageBlob, 'page-1.png');

What's happening:

Load the PDF into pdfjs-dist
Get the specific page
Create a canvas sized to the page dimensions (multiplied by scale)
Render the PDF page onto the canvas
Convert the canvas to a PNG blob

The scale parameter is the key quality lever. scale: 1 gives you 72 DPI (screen resolution). scale: 2 doubles both dimensions, effectively giving you 144 DPI. For print-quality output, you'd use scale: 4 (288 DPI).

DPI Control: Matching Output to Use Case

PDF.js doesn't have a direct "DPI" setting. It works in CSS pixels, where 1 unit = 1/96 inch. To hit specific DPI targets:

function getScaleForDPI(targetDPI) {
  // PDF default is 72 DPI
  // scale = targetDPI / 72
  return targetDPI / 72;
}

const scales = {
  screen: getScaleForDPI(96),   // 1.33
  standard: getScaleForDPI(150), // 2.08
  print: getScaleForDPI(300),    // 4.17
};

Practical impact on file size:

Scale	Effective DPI	8.5x11" Page Size	Typical PNG Size
1.33	96	816x1056 px	~200KB
2.08	150	1275x1650 px	~500KB
4.17	300	2550x3300 px	~2MB

I learned the hard way that rendering every page at 300 DPI produces massive files. Most of my users just need 150 DPI for slides and documents. 300 DPI is overkill unless you're sending something to a print shop.

Format Choice: PNG vs JPEG

Once you have the canvas, you can export to either format:

// PNG — lossless, sharp text, larger files
const pngBlob = await new Promise(resolve => 
  canvas.toBlob(resolve, 'image/png')
);

// JPEG — compressed, smaller files, configurable quality
const jpegBlob = await new Promise(resolve => 
  canvas.toBlob(resolve, 'image/jpeg', 0.85) // 85% quality
);

My heuristic:

Documents with fine text, diagrams, or line art → PNG. JPEG compression artifacts ruin crisp edges.
Photo-heavy PDFs (brochures, magazines) → JPEG at 85-90% quality. File size is 3-5x smaller with no visible loss.
Mixed content → PNG if under 10 pages, JPEG if larger (email-friendly).

Batch Conversion: Multiple Pages

Rendering one page is easy. Rendering all 50 pages without freezing the UI is harder.

async function convertAllPages(file, format = 'png', scale = 2) {
  const arrayBuffer = await file.arrayBuffer();
  const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;

  const images = [];

  for (let i = 1; i <= pdf.numPages; i++) {
    const page = await pdf.getPage(i);
    const viewport = page.getViewport({ scale });

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = viewport.width;
    canvas.height = viewport.height;

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

    const mimeType = format === 'png' ? 'image/png' : 'image/jpeg';
    const blob = await new Promise(resolve => 
      canvas.toBlob(resolve, mimeType, 0.9)
    );

    images.push({
      name: `page-${i}.${format}`,
      blob
    });

    // Yield to UI thread between pages
    await new Promise(r => setTimeout(r, 0));
  }

  return images;
}

The setTimeout(..., 0) is critical. Without it, the browser locks up for the entire duration. With 50 pages at high DPI, that's 5-10 seconds of frozen UI. Yielding between pages keeps the tab responsive and lets you show a progress bar.

For very large documents (200+ pages), I use requestIdleCallback to render only when the browser isn't busy:

function renderWithIdleCallback(pdf, pageNumber, scale) {
  return new Promise((resolve) => {
    requestIdleCallback(async () => {
      const page = await pdf.getPage(pageNumber);
      // ... render logic
      resolve(blob);
    });
  });
}

Memory Management: The Canvas Problem

Here's a trap I fell into: creating 50 canvases and holding them all in memory.

Each canvas at scale: 4 for a letter-size page is about 2MB of pixel data. 50 pages = 100MB of canvas buffers. On a mobile browser, that's an out-of-memory crash waiting to happen.

Fix: Convert to blob and immediately discard the canvas.

// BAD: keeps all canvases in memory
const canvases = [];
for (const page of pages) {
  const canvas = await renderPage(page);
  canvases.push(canvas); // Memory hoarding
}

// GOOD: render, export, release
for (const page of pages) {
  const canvas = await renderPage(page);
  const blob = await canvasToBlob(canvas);

  // Release canvas memory immediately
  canvas.width = 0;
  canvas.height = 0;

  saveBlob(blob);
}

Setting canvas.width = 0 forces the browser to release the pixel buffer. Without this, the garbage collector might not run until much later — or until the tab crashes.

The Worker File 404 (Vite Users)

I mentioned this earlier. In development, pdfjs-dist's worker loads fine. In production, Vite's bundler moves or renames the worker file.

Fix for Vite:

import PdfWorker from 'pdfjs-dist/build/pdf.worker?worker';
pdfjsLib.GlobalWorkerOptions.workerPort = new PdfWorker();

If that fails in production, pin the worker path explicitly:

import workerSrc from 'pdfjs-dist/build/pdf.worker.js?url';
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;

Performance: Real Numbers

I tested batch conversion on a 20-page, 12MB PDF:

Scale	Format	Time	Output Size
1.33 (96 DPI)	PNG	2.1s	4.2MB total
2.08 (150 DPI)	PNG	3.8s	11MB total
2.08 (150 DPI)	JPEG 85%	3.5s	3.1MB total
4.17 (300 DPI)	JPEG 90%	8.2s	12MB total

For most real-world use (slides, documents, web), 150 DPI JPEG at 85% quality is the sweet spot.

Try the Live Tool

If you want to convert PDF pages to images without writing code:

👉 en.sotool.top/pdf-to-image

Free, no signup, browser-based. Pick your pages, choose format and DPI, download as ZIP.

The source code is open source if you want to see the full Vue 3 + PDF.js integration.

Have you built browser-based document tools? How do you handle large batch conversions or memory limits?

How to Split PDF Files in the Browser (No Server Required)

sunshey — Thu, 04 Jun 2026 13:50:25 +0000

In the last post, I covered merging PDFs in the browser using pdf-lib. Today we're doing the opposite: splitting them.

Splitting is surprisingly common:

A 200-page report where you only need chapters 3 and 7
A scanned contract where the signature page needs to go to legal
A PDF that's too large to email, so you split it into two attachments
Extracting specific pages from a bulk download

Just like merging, we'll do this entirely in the browser — no server uploads, no privacy trade-offs.

Why Browser-Side Splitting Matters

The same privacy argument applies. When you upload a PDF to an online splitter, your file leaves your device. For documents containing personal data, financial records, or client contracts, that's a risk you don't need to take.

Browser-side splitting keeps everything local. The PDF loads into your browser tab, pdf-lib manipulates it in memory, and you download the result. The server never sees the content.

The trade-off: Browser memory. A 300MB scanned document will strain a tab. For typical office documents (under 50-100MB), splitting is instant.

Basic Split: Extract a Single Page Range

The simplest use case: "Give me pages 5 through 10."

import { PDFDocument } from 'pdf-lib';

async function extractPages(file, startPage, endPage) {
  // Load the source PDF
  const arrayBuffer = await file.arrayBuffer();
  const sourcePdf = await PDFDocument.load(arrayBuffer);

  // Create a new empty PDF
  const newPdf = await PDFDocument.create();

  // Convert to 0-based indices
  const pageIndices = [];
  for (let i = startPage - 1; i < endPage; i++) {
    pageIndices.push(i);
  }

  // Copy pages from source to new document
  const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
  copiedPages.forEach(page => newPdf.addPage(page));

  // Save and return
  const pdfBytes = await newPdf.save();
  return new Blob([pdfBytes], { type: 'application/pdf' });
}

// Usage: extract pages 5-10
const blob = await extractPages(file, 5, 10);
downloadBlob(blob, 'pages-5-to-10.pdf');

What's happening:

Load the full source PDF into memory
Create a blank destination PDF
Copy only the requested pages using copyPages()
Save the new, smaller document

The source PDF isn't modified — we're creating a new document containing only the pages we want.

Split by Page Ranges: One Input, Multiple Outputs

Real-world scenario: a user uploads a 50-page document and wants three separate files — pages 1-10, 11-30, and 31-50.

async function splitByRanges(file, ranges) {
  // ranges = [{ name: 'intro', start: 1, end: 10 }, ...]
  const arrayBuffer = await file.arrayBuffer();
  const sourcePdf = await PDFDocument.load(arrayBuffer);

  const results = [];

  for (const range of ranges) {
    const newPdf = await PDFDocument.create();

    const pageIndices = [];
    for (let i = range.start - 1; i < range.end; i++) {
      pageIndices.push(i);
    }

    const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
    copiedPages.forEach(page => newPdf.addPage(page));

    const pdfBytes = await newPdf.save();
    results.push({
      name: range.name,
      blob: new Blob([pdfBytes], { type: 'application/pdf' })
    });
  }

  return results;
}

// Usage
const ranges = [
  { name: 'chapter-1', start: 1, end: 10 },
  { name: 'chapter-2', start: 11, end: 30 },
  { name: 'chapter-3', start: 31, end: 50 }
];

const files = await splitByRanges(pdfFile, ranges);
files.forEach(f => downloadBlob(f.blob, `${f.name}.pdf`));

Memory note: We load the source PDF once, then create multiple new documents from it. Each new document only holds the pages it needs, so memory usage stays proportional to the output size, not the input size.

Advanced: Split by File Size (Email-Friendly Chunks)

Here's a trickier problem: "Split this PDF into chunks under 20MB each so I can email it."

Unlike page-range splitting, we don't know the page count in advance. We need to accumulate pages until adding one more would exceed the limit, then start a new chunk.

async function splitBySize(file, maxSizeBytes = 20 * 1024 * 1024) {
  const arrayBuffer = await file.arrayBuffer();
  const sourcePdf = await PDFDocument.load(arrayBuffer);
  const totalPages = sourcePdf.getPageCount();

  const chunks = [];
  let currentChunk = await PDFDocument.create();
  let currentSize = 0;
  let currentStartPage = 1;

  for (let i = 0; i < totalPages; i++) {
    // Try adding this page to the current chunk
    const testChunk = await PDFDocument.create();

    // Copy all pages currently in the chunk plus the new one
    const pagesToCopy = [];
    for (let j = currentStartPage - 1; j <= i; j++) {
      pagesToCopy.push(j);
    }

    const copiedPages = await testChunk.copyPages(sourcePdf, pagesToCopy);
    copiedPages.forEach(page => testChunk.addPage(page));

    const testBytes = await testChunk.save();

    if (testBytes.length > maxSizeBytes && currentStartPage <= i) {
      // This page would push us over the limit. Finalize current chunk.
      const finalChunk = await PDFDocument.create();
      const finalPages = [];
      for (let j = currentStartPage - 1; j < i; j++) {
        finalPages.push(j);
      }
      const finalCopied = await finalChunk.copyPages(sourcePdf, finalPages);
      finalCopied.forEach(page => finalChunk.addPage(page));

      const finalBytes = await finalChunk.save();
      chunks.push(new Blob([finalBytes], { type: 'application/pdf' }));

      // Start new chunk with current page
      currentStartPage = i + 1;
    }
  }

  // Don't forget the last chunk
  if (currentStartPage <= totalPages) {
    const finalChunk = await PDFDocument.create();
    const finalPages = [];
    for (let j = currentStartPage - 1; j < totalPages; j++) {
      finalPages.push(j);
    }
    const finalCopied = await finalChunk.copyPages(sourcePdf, finalPages);
    finalCopied.forEach(page => finalChunk.addPage(page));

    const finalBytes = await finalChunk.save();
    chunks.push(new Blob([finalBytes], { type: 'application/pdf' }));
  }

  return chunks;
}

Why this is expensive: We save a test document on every page to check the size. For a 100-page document, that's 100 save operations. In practice, I optimize this by:

Estimating page size from the first few pages
Using binary search instead of linear checking
Adding a small buffer (aim for 18MB instead of exactly 20MB)

For production, a simpler heuristic works well: if the original is 45MB and 50 pages, each page is roughly 0.9MB. Split every 22 pages to stay safely under 20MB.

Extracting Every Nth Page

Another common pattern: "I only need the odd pages" or "Extract every 5th page for a summary."

async function extractEveryNthPage(file, n, offset = 0) {
  const arrayBuffer = await file.arrayBuffer();
  const sourcePdf = await PDFDocument.load(arrayBuffer);
  const totalPages = sourcePdf.getPageCount();

  const newPdf = await PDFDocument.create();
  const pageIndices = [];

  for (let i = offset; i < totalPages; i += n) {
    pageIndices.push(i);
  }

  const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
  copiedPages.forEach(page => newPdf.addPage(page));

  const pdfBytes = await newPdf.save();
  return new Blob([pdfBytes], { type: 'application/pdf' });
}

// Extract odd pages only
const oddPages = await extractEveryNthPage(file, 2, 0);

// Extract even pages only
const evenPages = await extractEveryNthPage(file, 2, 1);

Handling Page Rotation and Metadata

When you split a PDF, you might want to preserve or modify metadata:

async function splitWithMetadata(file, startPage, endPage) {
  const arrayBuffer = await file.arrayBuffer();
  const sourcePdf = await PDFDocument.load(arrayBuffer);
  const newPdf = await PDFDocument.create();

  // Copy pages
  const pageIndices = [];
  for (let i = startPage - 1; i < endPage; i++) {
    pageIndices.push(i);
  }
  const copiedPages = await newPdf.copyPages(sourcePdf, pageIndices);
  copiedPages.forEach(page => newPdf.addPage(page));

  // Preserve or update metadata
  const author = sourcePdf.getAuthor();
  const creator = sourcePdf.getCreator();

  newPdf.setTitle(`Extracted Pages ${startPage}-${endPage}`);
  newPdf.setAuthor(author || 'Unknown');
  newPdf.setCreator('sotool PDF Splitter');
  newPdf.setProducer('pdf-lib');
  newPdf.setCreationDate(new Date());

  const pdfBytes = await newPdf.save();
  return new Blob([pdfBytes], { type: 'application/pdf' });
}

This is useful when the recipient needs to know where the extract came from.

Performance: The 200-Page Test

I tested the page-range splitter on a 200-page, 85MB scanned document:

Operation	Time	Memory Peak
Load PDF	2.1s	180MB
Extract pages 50-100	1.8s	95MB
Split into 4 chunks	4.2s	210MB
Extract every 10th page	0.9s	45MB

The key insight: copyPages() is fast because it copies page references and shared resources efficiently. You're not deep-cloning the entire document for each output.

Optimization tip: If you're splitting a PDF into many small chunks, load the source once and reuse the PDFDocument instance. Don't reload it for each chunk.

Limitations (Honest Assessment)

Limitation	Why	Workaround
Bookmarks lost	Splitting creates new document trees	Acceptable for most extracts
Internal links break	Page references change	Rarely an issue for extracts
Large scans choke	Browser memory limits	Split server-side for 500MB+ files
Form data complexity	Some forms have cross-page dependencies	Test thoroughly with fillable PDFs

For 95% of use cases — extracting a chapter, splitting a contract, creating email-friendly chunks — these limitations don't matter.

Try the Live Tool

If you want to test browser-based PDF splitting without writing code:

👉 en.sotool.top/split

Features:

Extract specific page ranges
Split by fixed page count (every N pages)
Split by file size (email-friendly chunks)
Visual page thumbnails for selection
Pure browser-side processing
Free, no signup

The source code is open source if you want to see how the Vue 3 + pdf-lib integration works.

What's Next?

If you enjoyed this post, check out the companion piece on merging PDFs in the browser.

Next up in the series:

Compressing PDFs by downsampling embedded images
Adding watermarks with text and image overlays
Encrypting and password-protecting PDFs client-side

Have you built browser-based document tools? What's your approach to handling large files or complex page operations? Let me know in the comments.