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.
| 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. |
Install the library and its peer dependencies:
npm install img-pdf-viewerFollow these 4 simple steps to integrate the viewer into your app.
In your app.module.ts:
import { ImgPdfViewerModule } from "img-pdf-viewer";
@NgModule({
imports: [
ImgPdfViewerModule,
// ...
],
})
export class AppModule {}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'
};
}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>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 */
}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. |
We love open source! If you'd like to contribute:
- Fork the repo.
- Create a branch (
git checkout -b feature/amazing-feature). - Commit your changes.
- Open a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
Made with ❤️ by Niranjan Kushwaha