pdfpressor-client

A standalone client-side PDF compressor. It loads a PDF in the browser, rasterizes each page to a canvas at a chosen DPI, recompresses pages as JPEG with configurable quality, and rebuilds a new PDF. Returns multiple handy artifacts (Uint8Array bytes, Blob, object URL, Buffer if available) plus detailed statistics.

Features

• Pure browser operation (no server round-trip required)
• Adjustable DPI (affects rendered page resolution)
• Adjustable JPEG quality (0.1–1.0 floating value)
• Side‑by‑side preview (original vs compressed first page)
• Download links for original and compressed output
• Simple API for React / vanilla JS

Installation (for bundlers / React)

npm install pdfpressor-client

Direct Browser Usage (CDN fallback)

You can copy the contents of this folder and serve it; dependencies are loaded from CDN automatically if module imports fail.

Serve locally (example):

npx http-server . -c-1
# then open http://localhost:8080/client-compressor/index.html

API

compressPdfClient(inputBytes: Uint8Array, outputName: string, dpi?: number, quality?: number)
  => Promise<{ compressFile: {
        bytes: Uint8Array;      // compressed PDF bytes
        blob: Blob;             // Blob of compressed PDF
        objectUrl: string|null; // Object URL for immediate preview/download
        buffer: Buffer|null;    // Node Buffer (if running in hybrid env)
        stats: {
          outputName: string;
          originalSize: number;    // bytes
          compressedSize: number;  // bytes
          reduction: number;       // percentage
          pageCount: number;
          dpi: number;
          quality: number;         // JPEG quality used
        };
      }> }

Parameters

• inputBytes (Uint8Array): Raw PDF file bytes (e.g. from file.arrayBuffer())
• outputName (string): Suggested filename for download
• dpi (number, default 150): Render scale; higher DPI = larger images & potentially bigger output
• quality (number, default 0.7): JPEG quality (0.1–1.0). Lower means smaller size (more compression)

Returns

Single object { compressFile } where compressFile contains:

• bytes: Compressed PDF as Uint8Array
• blob: Compressed PDF Blob for browser download / upload
• objectUrl: Created via URL.createObjectURL(blob) for previews
• buffer: Node Buffer version (if Buffer exists)
• stats: Metadata for comparison & display

Example (React)

import { useState } from 'react';
import { compressPdfClient } from 'pdfpressor-client';

function PdfCompressor() {
  const [stats, setStats] = useState(null);
  const handleFile = async (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const bytes = new Uint8Array(await file.arrayBuffer());
    const { compressFile } = await compressPdfClient(bytes, 'compressed_' + file.name, 150, 0.7);
    setStats(compressFile.stats);
    // Trigger download
    const a = document.createElement('a');
    a.href = compressFile.objectUrl;
    a.download = compressFile.stats.outputName;
    a.click();
  };
  return (
    <div>
      <input type="file" accept="application/pdf" onChange={handleFile} />
      {stats && <pre>{JSON.stringify(stats, null, 2)}</pre>}
    </div>
  );
}

Example (Vanilla JS)

const inputEl = document.querySelector('#pdfInput');
inputEl.onchange = async () => {
  const file = inputEl.files[0];
  if (!file) return;
  const bytes = new Uint8Array(await file.arrayBuffer());
  const { compressFile } = await compressPdfClient(bytes, 'compressed_' + file.name, 144, 0.6);
  console.log('Reduction %', compressFile.stats.reduction.toFixed(2));
  const link = document.createElement('a');
  link.href = compressFile.objectUrl;
  link.download = compressFile.stats.outputName;
  link.click();
};

What It Accepts

• Input: Any standard PDF file (binary bytes as Uint8Array)
• Parameters: outputName, dpi, quality

What It Outputs

• Compressed PDF (rasterized pages) via compressFile.bytes
• Browser-friendly Blob and objectUrl
• Statistics comparing original vs compressed sizes

Internals / How It Works

1. Load PDF bytes (pdfjs-dist)
2. Render each page to a canvas at dpi/72 scale
3. Export canvas as JPEG (toDataURL('image/jpeg', quality)) and convert to bytes
4. Embed compressed images into a fresh PDF (pdf-lib)
5. Produce output artifacts and stats

Limitations

• Text selectable content is lost (pages become images)
• Very large PDFs may cause memory spikes (each page rendered to canvas)
• JPEG only (no WebP/AVIF fallback due to pdf-lib restrictions)
• Compression dependent on browser's JPEG encoder

Tips

• Lower dpi (e.g. 96) and quality (e.g. 0.5) for smaller outputs
• Keep original PDF if you need selectable text
• Use web workers for large batch compression to keep UI responsive

License

MIT