Angular Image & PDF Viewer

A premium, highly customizable Angular library for viewing PDF documents and images. Built with performance in mind using Mozilla's pdf.js engine, it offers a seamless "Google Drive-like" preview experience for your Angular applications.

✨ Features at a Glance

| Feature | Description | | :----------------- | :---------------------------------------------------------------------------- | | 📄 Dual Mode | Smartly switches between PDF and Image viewing (PNG, JPG, WEBP, SVG). | | 🔍 Smart Zoom | Mouse-wheel zoom, pinch-to-zoom, and preset zoom levels (50% - 300%). | | 🔄 Rotation | Rotate documents 90° clockwise or counter-clockwise on the fly. | | 🛠️ Smart Proxy | Industrial-grade strategy: direct access first, then "smart" proxy fallback. | | 🧩 Heuristics | Detects doc types without extensions by analyzing URL path patterns. | | 📱 Responsive | Logic that adapts to any screen size, mobile or desktop. | | 🖥️ Fullscreen | Native immersive mode for distraction-free reading. |

📦 Installation

Install the library and its peer dependencies:

npm install img-pdf-viewer

🚀 Quick Start Guide

Follow these 4 simple steps to integrate the viewer into your app.

1️⃣ Import the Module

In your app.module.ts:

import { ImgPdfViewerModule } from "img-pdf-viewer";

@NgModule({
  imports: [
    ImgPdfViewerModule,
    // ...
  ],
})
export class AppModule {}

2️⃣ Define Configuration

In your component (e.g., app.component.ts), set up the document URL and optional config:

import { DocumentViewerConfig } from "img-pdf-viewer";

export class AppComponent {
  // Your PDF or Image URL (can be from an API or local asset)
  docUrl = "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";

  // Customize the look and feel
  config: DocumentViewerConfig = {
    showToolbar: true,
    showZoom: true,
    showRotation: true,
    showDownload: true,
    showFullscreen: true,
    initialZoom: 100,
    viewMode: "single", // Options: 'single' | 'continuous'
  };
}

3️⃣ Add to Template

In your HTML (app.component.html), drop in the component:

<div class="viewer-host">
  <ngx-imgPdf-viewer [documentUrl]="docUrl" [config]="config" [title]="'Project Documentation'"> </ngx-imgPdf-viewer>
</div>

4️⃣ Set Container Height

[!WARNING] The viewer takes the height of its parent. If the parent has 0px height, the viewer will be invisible!

In app.component.css:

.viewer-host {
  height: 100vh; /* Make it full screen */
  width: 100%;
  border: 1px solid #ddd; /* Optional: adds a nice border */
}

🛠️ Advanced Configuration

The DocumentViewerConfig interface allows you to granularly control the UI:

| Property | Type | Default | Description | | :--------------- | :------------------------- | :---------- | :------------------------------------------------------------------ | | showToolbar | boolean | true | Show or hide the top toolbar. | | showZoom | boolean | true | Enable zoom-in and zoom-out buttons. | | showRotation | boolean | true | Enable rotation controls. | | showDownload | boolean | true | Allow users to download the source file. | | showFullscreen | boolean | true | Enable the fullscreen toggle button. | | viewMode | 'single' \| 'continuous' | 'single' | Single: Page-by-page. Continuous: Scroll through all pages. | | initialZoom | number | 100 | Start percentage for zoom. | | proxyUrl | string | undefined | Custom proxy to bypass CORS (e.g., https://corsproxy.io/?). | | fallbackType | 'pdf' \| 'image' | undefined | Type to use if auto-detection fails for extensionless URLs. | | height | string | '100vh' | Height of the viewer container. |

🤝 Contribution

We love open source! If you'd like to contribute:

1. Fork the repo.
2. Create a branch (git checkout -b feature/amazing-feature).
3. Commit your changes.
4. Open a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.