Svelte Pdfjs screenshot

Svelte Pdfjs

Author Avatar Theme by Gtm nayan
Updated: 24 Sep 2024
42 Stars

Categories

Overview:

svelte-pdfjs is a wrapper around Mozilla’s PDFJS renderer. Its main purpose is to load and display PDF documents, leaving the styling and viewer customization to the user. Although it is still in its early stages, any bugs, improvements, or feature requests are welcome through creating an issue or a PR.

Features:

  • PDF Loading: The library focuses on efficiently loading and displaying PDF documents.
  • Customization: Users have full control over the styling and customization of the PDF viewer.
  • Convenience: The library provides a convenience function for Vite/SvelteKit users, taking care of browser checks, worker URL resolution, setting the context, and cleanup.

Installation:

To use svelte-pdfjs, you need to follow these steps:

  1. Install the pdfjs-dist package.
npm install pdfjs-dist
  1. Provide a worker to the Document component through Svelte’s context. For Vite/SvelteKit users, a convenience function is exported through svelte-pdfjs/utils/vite to handle this process.
import { vitePDFWorker } from 'svelte-pdfjs/utils/vite';
import { Document } from 'svelte-pdfjs';

// Resolve the worker URL and set the context
const workerURL = await vitePDFWorker();
<Document worker={workerURL} />
  1. For SSR compatibility, contributions to improve in that area are welcome as the package currently does not support SSR.

  2. To address the bundler issue with pdfjs-dist, you can patch your installation by replacing all instances of _is_node.isNodeJs with false. This step ensures proper minification for the chunk containing pdfjs-dist.

Summary:

svelte-pdfjs is a lightweight library that simplifies the loading and display of PDF documents in Svelte applications. It provides flexibility for customization while leaving the viewer styling to the user. The library is still in its early stages, but it offers convenient features and welcomes community contributions for bug fixes, improvements, and new features.