Skip to content

v0.2.0 - Browser Support

Choose a tag to compare

View all tags
@irenteria0617 irenteria0617 released this 22 Nov 01:27
· 11 commits to main since this release
v0.2.0
17e993b

🎉 Major New Feature: Browser Support

PDFStudio now works natively in web browsers! Generate PDFs client-side with 100% API parity to the Node.js version.

✨ What's New

🌐 Browser Compatibility

  • Complete Platform Abstraction - Seamless Node.js/Browser compatibility via adapter pattern
  • 100% API Parity - Identical API across Node.js and browsers
  • All Features Supported - Charts, tables, QR codes, encryption, forms, annotations, etc.
  • Zero Server Dependencies - Everything runs client-side
  • Modern Browser Support - Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
  • Small Bundle Size - ~600KB minified (including all features)
  • TypeScript Support - Full type definitions for browser environment

🔐 Browser-Specific Implementations

  • Pure JavaScript MD5 - Custom MD5 implementation for PDF encryption in browsers
  • Web Crypto API Integration - Secure random number generation
  • Canvas-Based Image Processing - No dependencies for image handling
  • File System Abstraction - BrowserFileSystem using Fetch API, FileReader, and Blob
  • Image Processor Abstraction - BrowserImageProcessor using Canvas/OffscreenCanvas
  • Buffer Polyfill - Full Buffer support via npm buffer package
  • Automatic Download - Trigger file downloads or get as Blob for uploading

📦 Build System

  • Dual Build Target - Separate builds for Node.js (CommonJS) and Browser (IIFE)
  • esbuild Integration - Fast, optimized browser bundling
  • Automatic Tree-Shaking - Remove unused code
  • Smart Polyfills - Only include necessary polyfills (Buffer, crypto)
  • Module Replacement - Replace Node modules (fs, sharp) with browser equivalents
  • Source Maps - Debug support for both minified and debug builds

📚 Installation

Node.js

npm install @pdfstudio/pdfstudio

Browser (Standalone)

<script src="https://unpkg.com/@pdfstudio/pdfstudio@0.2.0/dist/pdfstudio.standalone.js"></script>
<script>
  const doc = new PDFStudio.PDFDocument();
  doc.text('Hello from Browser!', 100, 700, 24);
  await doc.save('output.pdf'); // Downloads automatically
</script>

Browser (Bundlers - Vite, Webpack, etc.)

import { PDFDocument } from '@pdfstudio/pdfstudio';

const doc = new PDFDocument();
doc.text('Hello!', 100, 700, 24);
await doc.save('output.pdf');

🔄 Breaking Changes

Methods involving I/O are now async:
- doc.save() → await doc.save()
- doc.toBuffer() → await doc.toBuffer()
- doc.registerFont() → await doc.registerFont()
- doc.image() → await doc.image()

Migration example:
// Before (v0.1.x)
doc.save('output.pdf');

// After (v0.2.x)
await doc.save('output.pdf');

See https://github.com/pdfstudio-dev/pdfstudio/blob/main/BROWSER_MIGRATION.md for complete migration guide.

🐛 Fixed

- Table Text Alignment - Corrected vertical centering in table cells with proper baseline calculations
- File Attachments - Fixed crash when attachment name is undefined
- Font Selection - Fixed font parameter being ignored in simple text() calls
- Crypto Compatibility - MD5 hashing now works in browsers (previously unsupported)

🎨 Examples & Demos

- Invoice Generator - Real-world invoice with tables and totals
- Business Report - Multi-page report with KPIs and charts
- Certificate - Professional certificate with vector graphics
- QR Code Examples - Email, URL, WiFi, vCard, and more
- Form Examples - Interactive forms with encryption
- Chart Gallery - All 7 chart types with styling options

80+ interactive browser examples in examples/browser/index.html

📐 Platform Differences

| Feature          | Node.js          | Browser                     |
|------------------|------------------|-----------------------------|
| File I/O         | fs module        | fetch() / FileReader / Blob |
| Image Processing | sharp (optional) | Canvas API                  |
| Font Loading     | File paths       | URLs or File objects        |
| File Save        | Disk write       | Download trigger            |
| Buffer           | Native           | Polyfilled                  |
| Crypto           | Node crypto      | Web Crypto + MD5 polyfill   |

📦 Dependencies

- Added: buffer@^6.0.3 - Buffer polyfill for browsers
- Added: esbuild@^0.19.0 - Browser bundle builder
- Changed: sharp@^0.34.5 → optionalDependencies (not needed in browser)

⚡ Performance

- Optimized Bundle - Tree-shaking reduces unused code
- Lazy Loading - Platform adapters loaded on demand
- Efficient Polyfills - Minimal overhead for browser environment

🧪 Testing

- All 180 Tests Pass - Full compatibility maintained
- Cross-Platform Testing - Verified on Node.js and browsers
- Browser Examples - Comprehensive manual testing suite

📚 Documentation

- https://github.com/pdfstudio-dev/pdfstudio/blob/main/BROWSER.md - Complete browser usage guide (406 lines)
- https://github.com/pdfstudio-dev/pdfstudio/blob/main/BROWSER_MIGRATION.md - Migration guide for existing users (211 lines)
- Updated README - Expanded browser support section with examples

📦 npm Package

Published to npm: https://www.npmjs.com/package/@pdfstudio/pdfstudio

Full changelog: https://github.com/pdfstudio-dev/pdfstudio/blob/main/CHANGELOG.md#020---2025-01-21
Assets 2
Loading