ng2-pdfjs-viewer 25.0.0 → 25.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +695 -0
- package/package.json +2 -1
package/README.md
ADDED
|
@@ -0,0 +1,695 @@
|
|
|
1
|
+
# Angular PDF viewer powered by Mozilla's PDF.js
|
|
2
|
+
|
|
3
|
+
The most reliable, feature-rich Angular PDF viewer component powered by Mozilla's PDF.js
|
|
4
|
+
|
|
5
|
+
<div align="center">
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
|
|
8
|
+
[](https://github.com/mozilla/pdf.js)
|
|
9
|
+
[](https://angular.dev/overview)
|
|
10
|
+
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
|
|
11
|
+
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
|
|
12
|
+
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
|
|
13
|
+
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
14
|
+
[](https://github.com/intbot/ng2-pdfjs-viewer)
|
|
15
|
+
[](https://github.com/intbot/ng2-pdfjs-viewer/issues)
|
|
16
|
+
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<div align="center">
|
|
20
|
+
|
|
21
|
+
[**Live Demo**](https://ng2-pdfjs-viewer.azurewebsites.net) • [**API Reference**](#-api-reference) • [**Examples**](#-examples) • [**Migration Guide**](#-migration-guide)
|
|
22
|
+
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
ng2-pdfjs-viewer is the most comprehensive and feature-rich Angular PDF viewer component available. **Born in 2018** and still going strong with over **7+ million downloads**, this battle-tested library has been trusted by developers worldwide for **over 8 years**, powering thousands of applications.
|
|
28
|
+
|
|
29
|
+
This powerful library enables developers to seamlessly integrate PDF viewing capabilities into Angular applications with enterprise-grade features, custom theming, and mobile-first responsive design. Built on Mozilla's PDF.js v5.3.93, ng2-pdfjs-viewer provides advanced PDF rendering, document navigation, search functionality, and extensive customization options.
|
|
30
|
+
|
|
31
|
+
Whether you need a simple embedded PDF viewer or a complex document management system, this component delivers the performance and flexibility required for modern Angular applications. **The most mature and reliable Angular PDF viewer solution** with continuous updates and long-term support.
|
|
32
|
+
|
|
33
|
+
### Why Choose ng2-pdfjs-viewer?
|
|
34
|
+
|
|
35
|
+
- **🚀 Always Up-to-Date** - Continuously updated with the latest PDF.js versions and Angular compatibility
|
|
36
|
+
- **🏗️ Enterprise-Ready** - Built for production with comprehensive error handling and performance optimization
|
|
37
|
+
- **🎨 Highly Customizable** - Extensive theming options, custom templates, and flexible configuration
|
|
38
|
+
- **📱 Mobile Optimized** - Touch-friendly interface with responsive design for all screen sizes
|
|
39
|
+
- **🔧 Developer Friendly** - Full TypeScript support, comprehensive documentation, and easy integration
|
|
40
|
+
- **⚡ High Performance** - Event-driven architecture with efficient memory management and lazy loading
|
|
41
|
+
- **🌍 Global Support** - Multi-language support with automatic locale detection and RTL compatibility
|
|
42
|
+
- **🛡️ Production Tested** - Trusted by thousands of applications with millions of downloads
|
|
43
|
+
- **📈 Proven Track Record** - 8+ years of continuous development and community support
|
|
44
|
+
- **🔒 Security Focused** - Regular security updates and vulnerability patches
|
|
45
|
+
|
|
46
|
+
### 🆕 Latest Features (v25.x)
|
|
47
|
+
|
|
48
|
+
| Feature | Description | Status |
|
|
49
|
+
| ----------------------------- | ------------------------------------------------------------------ | ------ |
|
|
50
|
+
| **Advanced Theme System** | CSS custom properties for complete visual customization | ✅ New |
|
|
51
|
+
| **Template-Based UI** | Custom loading spinners and error displays using Angular templates | ✅ New |
|
|
52
|
+
| **Convenience Configuration** | Object-based configuration for cleaner, more maintainable code | ✅ New |
|
|
53
|
+
| **Event-Driven Architecture** | Pure event-based system with universal action dispatcher | ✅ New |
|
|
54
|
+
| **Enhanced Error Handling** | Multiple error display styles with custom templates | ✅ New |
|
|
55
|
+
| **Mobile-First Design** | Responsive layout optimized for touch devices | ✅ New |
|
|
56
|
+
| **TypeScript Strict Mode** | Full type safety with comprehensive API coverage | ✅ New |
|
|
57
|
+
|
|
58
|
+
### 🏆 Unique Advantages
|
|
59
|
+
|
|
60
|
+
- **Universal Action Dispatcher** - Single pathway for all actions with readiness validation
|
|
61
|
+
- **Template-Based Customization** - Use Angular templates for loading and error states
|
|
62
|
+
- **Comprehensive Event System** - 24+ events covering all user interactions and state changes
|
|
63
|
+
- **Advanced Configuration Objects** - Clean, object-based configuration for complex setups
|
|
64
|
+
- **Production-Ready Architecture** - Event-driven design with no timeouts or polling
|
|
65
|
+
- **Complete API Coverage** - 19+ methods with consistent Promise-based returns
|
|
66
|
+
|
|
67
|
+
### 🎯 Perfect For
|
|
68
|
+
|
|
69
|
+
- **Enterprise Applications** - Robust, scalable PDF viewing for business applications
|
|
70
|
+
- **Document Management Systems** - Complete PDF handling with search and navigation
|
|
71
|
+
- **E-Learning Platforms** - Interactive PDF viewing for educational content
|
|
72
|
+
- **Financial Applications** - Secure PDF viewing for reports and statements
|
|
73
|
+
- **Healthcare Systems** - Reliable PDF viewing for medical documents
|
|
74
|
+
- **Government Portals** - Accessible PDF viewing for public services
|
|
75
|
+
- **E-Commerce Platforms** - Product catalogs and documentation viewing
|
|
76
|
+
- **Content Management Systems** - Integrated PDF viewing and management
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## 📋 Table of Contents
|
|
81
|
+
|
|
82
|
+
- [Quick Start](#quick-start)
|
|
83
|
+
- [Features](#features)
|
|
84
|
+
- [Installation](#installation)
|
|
85
|
+
- [Basic Usage](#basic-usage)
|
|
86
|
+
- [Advanced Configuration](#advanced-configuration)
|
|
87
|
+
- [API Reference](#api-reference)
|
|
88
|
+
- [Examples](#examples)
|
|
89
|
+
- [Migration Guide](#migration-guide)
|
|
90
|
+
- [Deprecated Features](#deprecated-features)
|
|
91
|
+
- [Contributing](#contributing)
|
|
92
|
+
- [License](#license)
|
|
93
|
+
|
|
94
|
+
---
|
|
95
|
+
|
|
96
|
+
## 🚀 Quick Start
|
|
97
|
+
|
|
98
|
+
### 1. Install the Package
|
|
99
|
+
|
|
100
|
+
```bash
|
|
101
|
+
npm install ng2-pdfjs-viewer --save
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### 2. Import the Module
|
|
105
|
+
|
|
106
|
+
```typescript
|
|
107
|
+
import { NgModule } from "@angular/core";
|
|
108
|
+
import { BrowserModule } from "@angular/platform-browser";
|
|
109
|
+
import { PdfJsViewerModule } from "ng2-pdfjs-viewer";
|
|
110
|
+
|
|
111
|
+
@NgModule({
|
|
112
|
+
imports: [BrowserModule, PdfJsViewerModule],
|
|
113
|
+
// ... rest of your module
|
|
114
|
+
})
|
|
115
|
+
export class AppModule {}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### 3. Use in Your Component
|
|
119
|
+
|
|
120
|
+
```html
|
|
121
|
+
<ng2-pdfjs-viewer
|
|
122
|
+
pdfSrc="assets/sample.pdf"
|
|
123
|
+
[showSpinner]="true"
|
|
124
|
+
[theme]="'light'"
|
|
125
|
+
>
|
|
126
|
+
</ng2-pdfjs-viewer>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
### 4. Configure Assets (Required)
|
|
130
|
+
|
|
131
|
+
Add PDF.js assets to your `angular.json`:
|
|
132
|
+
|
|
133
|
+
```json
|
|
134
|
+
{
|
|
135
|
+
"projects": {
|
|
136
|
+
"your-app": {
|
|
137
|
+
"architect": {
|
|
138
|
+
"build": {
|
|
139
|
+
"options": {
|
|
140
|
+
"assets": [
|
|
141
|
+
{
|
|
142
|
+
"glob": "**/*",
|
|
143
|
+
"input": "node_modules/ng2-pdfjs-viewer/pdfjs",
|
|
144
|
+
"output": "/assets/pdfjs"
|
|
145
|
+
}
|
|
146
|
+
]
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
## ✨ Features
|
|
158
|
+
|
|
159
|
+
**🎉 7+ Million Downloads & Counting!** - Trusted by developers worldwide for reliable PDF viewing in Angular applications since 2018.
|
|
160
|
+
|
|
161
|
+
### 🎯 Core PDF Viewing Features
|
|
162
|
+
|
|
163
|
+
- **📄 High-Quality PDF Rendering** - Powered by Mozilla's PDF.js v5.3.93 for superior document display
|
|
164
|
+
- **🔄 Multiple Display Modes** - Embedded viewer, new window, or external tab options
|
|
165
|
+
- **📱 Mobile-First Responsive Design** - Touch-friendly controls optimized for all devices
|
|
166
|
+
- **🌍 Complete Internationalization** - Support for 50+ languages with automatic locale detection
|
|
167
|
+
- **⚡ Optimized Performance** - Lazy loading, memory management, and efficient rendering
|
|
168
|
+
|
|
169
|
+
### 🎨 Visual Customization
|
|
170
|
+
|
|
171
|
+
- **🎨 Theme System** - Light, dark, and auto themes with custom color schemes
|
|
172
|
+
- **🎭 Custom Styling** - CSS custom properties for complete visual control
|
|
173
|
+
- **🔄 Loading States** - Custom loading spinners with template support
|
|
174
|
+
- **❌ Error Handling** - Multiple error display styles with custom templates
|
|
175
|
+
- **📐 Layout Control** - Toolbar density, sidebar width, and positioning options
|
|
176
|
+
|
|
177
|
+
### 🔧 Developer Features
|
|
178
|
+
|
|
179
|
+
- **📝 TypeScript Support** - Full type safety with strict mode
|
|
180
|
+
- **🔌 Event System** - Comprehensive event handling for all user interactions
|
|
181
|
+
- **⚙️ Configuration Objects** - Convenience setters for cleaner code
|
|
182
|
+
- **🛠️ API Methods** - Promise-based methods for programmatic control
|
|
183
|
+
- **🐛 Debugging** - Built-in diagnostic logging and error tracking
|
|
184
|
+
|
|
185
|
+
### 📊 Advanced Features
|
|
186
|
+
|
|
187
|
+
- **🔍 Search & Navigation** - Full-text search with highlighting
|
|
188
|
+
- **📖 Bookmarks & Attachments** - Document structure navigation
|
|
189
|
+
- **🖨️ Print & Download** - Built-in print and download functionality
|
|
190
|
+
- **🔄 Rotation & Zoom** - Document manipulation with smooth animations
|
|
191
|
+
- **📱 Touch Gestures** - Mobile-optimized touch interactions
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
## 📦 Installation
|
|
196
|
+
|
|
197
|
+
### Prerequisites
|
|
198
|
+
|
|
199
|
+
- Angular 20.0+ (supports Angular 2.0+)
|
|
200
|
+
- Node.js 18.0+
|
|
201
|
+
- TypeScript 5.0+
|
|
202
|
+
|
|
203
|
+
### Install Package
|
|
204
|
+
|
|
205
|
+
```bash
|
|
206
|
+
# Using npm
|
|
207
|
+
npm install ng2-pdfjs-viewer --save
|
|
208
|
+
|
|
209
|
+
# Using yarn
|
|
210
|
+
yarn add ng2-pdfjs-viewer
|
|
211
|
+
|
|
212
|
+
# Using pnpm
|
|
213
|
+
pnpm add ng2-pdfjs-viewer
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Configure Assets
|
|
217
|
+
|
|
218
|
+
Add PDF.js assets to your `angular.json`:
|
|
219
|
+
|
|
220
|
+
```json
|
|
221
|
+
{
|
|
222
|
+
"projects": {
|
|
223
|
+
"your-app": {
|
|
224
|
+
"architect": {
|
|
225
|
+
"build": {
|
|
226
|
+
"options": {
|
|
227
|
+
"assets": [
|
|
228
|
+
{
|
|
229
|
+
"glob": "**/*",
|
|
230
|
+
"input": "node_modules/ng2-pdfjs-viewer/pdfjs",
|
|
231
|
+
"output": "/assets/pdfjs"
|
|
232
|
+
}
|
|
233
|
+
]
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
---
|
|
243
|
+
|
|
244
|
+
## 🎯 Basic Usage
|
|
245
|
+
|
|
246
|
+
### Simple PDF Viewer
|
|
247
|
+
|
|
248
|
+
```html
|
|
249
|
+
<ng2-pdfjs-viewer pdfSrc="assets/document.pdf" [showSpinner]="true">
|
|
250
|
+
</ng2-pdfjs-viewer>
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
### Advanced Configuration
|
|
254
|
+
|
|
255
|
+
```html
|
|
256
|
+
<ng2-pdfjs-viewer
|
|
257
|
+
pdfSrc="assets/document.pdf"
|
|
258
|
+
[theme]="'dark'"
|
|
259
|
+
[primaryColor]="'#007acc'"
|
|
260
|
+
[showSpinner]="true"
|
|
261
|
+
[customSpinnerTpl]="customSpinner"
|
|
262
|
+
[customErrorTpl]="customError"
|
|
263
|
+
(onDocumentLoad)="onDocumentLoaded($event)"
|
|
264
|
+
(onPageChange)="onPageChanged($event)"
|
|
265
|
+
>
|
|
266
|
+
</ng2-pdfjs-viewer>
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
### Programmatic Control
|
|
270
|
+
|
|
271
|
+
```typescript
|
|
272
|
+
import { Component, ViewChild } from "@angular/core";
|
|
273
|
+
import { PdfJsViewerComponent } from "ng2-pdfjs-viewer";
|
|
274
|
+
|
|
275
|
+
@Component({
|
|
276
|
+
template: `
|
|
277
|
+
<ng2-pdfjs-viewer #pdfViewer pdfSrc="document.pdf"></ng2-pdfjs-viewer>
|
|
278
|
+
<button (click)="goToPage(5)">Go to Page 5</button>
|
|
279
|
+
`,
|
|
280
|
+
})
|
|
281
|
+
export class MyComponent {
|
|
282
|
+
@ViewChild("pdfViewer") pdfViewer!: PdfJsViewerComponent;
|
|
283
|
+
|
|
284
|
+
async goToPage(page: number) {
|
|
285
|
+
await this.pdfViewer.goToPage(page);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
---
|
|
291
|
+
|
|
292
|
+
## ⚙️ Advanced Configuration
|
|
293
|
+
|
|
294
|
+
### Theme Customization
|
|
295
|
+
|
|
296
|
+
```typescript
|
|
297
|
+
// Component
|
|
298
|
+
export class MyComponent {
|
|
299
|
+
themeConfig = {
|
|
300
|
+
theme: "light",
|
|
301
|
+
primaryColor: "#007acc",
|
|
302
|
+
backgroundColor: "#ffffff",
|
|
303
|
+
toolbarColor: "#f5f5f5",
|
|
304
|
+
textColor: "#333333",
|
|
305
|
+
borderRadius: "8px",
|
|
306
|
+
};
|
|
307
|
+
}
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
```html
|
|
311
|
+
<!-- Template -->
|
|
312
|
+
<ng2-pdfjs-viewer [themeConfig]="themeConfig" [customCSS]="customStyles">
|
|
313
|
+
</ng2-pdfjs-viewer>
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
### Custom Loading Spinner
|
|
317
|
+
|
|
318
|
+
```html
|
|
319
|
+
<ng-template #customSpinner>
|
|
320
|
+
<div class="custom-spinner">
|
|
321
|
+
<div class="spinner"></div>
|
|
322
|
+
<p>Loading PDF...</p>
|
|
323
|
+
</div>
|
|
324
|
+
</ng-template>
|
|
325
|
+
|
|
326
|
+
<ng2-pdfjs-viewer
|
|
327
|
+
[customSpinnerTpl]="customSpinner"
|
|
328
|
+
[spinnerClass]="'my-spinner'"
|
|
329
|
+
>
|
|
330
|
+
</ng2-pdfjs-viewer>
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
### Custom Error Display
|
|
334
|
+
|
|
335
|
+
```html
|
|
336
|
+
<ng-template #customError>
|
|
337
|
+
<div class="error-container">
|
|
338
|
+
<mat-icon>error</mat-icon>
|
|
339
|
+
<h3>Failed to Load PDF</h3>
|
|
340
|
+
<p>Please check your internet connection and try again.</p>
|
|
341
|
+
<button mat-button (click)="retry()">Retry</button>
|
|
342
|
+
</div>
|
|
343
|
+
</ng-template>
|
|
344
|
+
|
|
345
|
+
<ng2-pdfjs-viewer [customErrorTpl]="customError" [errorClass]="'my-error'">
|
|
346
|
+
</ng2-pdfjs-viewer>
|
|
347
|
+
```
|
|
348
|
+
|
|
349
|
+
---
|
|
350
|
+
|
|
351
|
+
## 📚 API Reference
|
|
352
|
+
|
|
353
|
+
### Input Properties
|
|
354
|
+
|
|
355
|
+
| Property | Type | Default | Description |
|
|
356
|
+
| ---------------------------- | ----------------------------------------- | ------------ | ------------------------------------- |
|
|
357
|
+
| `pdfSrc` | `string \| Blob \| Uint8Array` | - | PDF source (URL, Blob, or byte array) |
|
|
358
|
+
| `viewerId` | `string` | auto | Unique viewer identifier |
|
|
359
|
+
| `viewerFolder` | `string` | `'assets'` | Path to PDF.js assets |
|
|
360
|
+
| `externalWindow` | `boolean` | `false` | Open in new window |
|
|
361
|
+
| `externalWindowOptions` | `string` | - | External window options |
|
|
362
|
+
| `target` | `string` | `'_blank'` | Target for external window |
|
|
363
|
+
| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Theme selection |
|
|
364
|
+
| `primaryColor` | `string` | `'#007acc'` | Primary color for UI elements |
|
|
365
|
+
| `backgroundColor` | `string` | `'#ffffff'` | Background color |
|
|
366
|
+
| `pageBorderColor` | `string` | - | Page border color |
|
|
367
|
+
| `toolbarColor` | `string` | - | Toolbar background color |
|
|
368
|
+
| `textColor` | `string` | - | Text color |
|
|
369
|
+
| `borderRadius` | `string` | - | Border radius |
|
|
370
|
+
| `customCSS` | `string` | - | Custom CSS styles |
|
|
371
|
+
| `showSpinner` | `boolean` | `true` | Show loading spinner |
|
|
372
|
+
| `customSpinnerTpl` | `TemplateRef` | - | Custom spinner template |
|
|
373
|
+
| `spinnerClass` | `string` | - | Custom spinner CSS class |
|
|
374
|
+
| `customErrorTpl` | `TemplateRef` | - | Custom error template |
|
|
375
|
+
| `errorClass` | `string` | - | Custom error CSS class |
|
|
376
|
+
| `errorOverride` | `boolean` | `false` | Override default error handling |
|
|
377
|
+
| `errorAppend` | `boolean` | `true` | Append to default error messages |
|
|
378
|
+
| `errorMessage` | `string` | - | Custom error message |
|
|
379
|
+
| `locale` | `string` | `'en-US'` | UI language |
|
|
380
|
+
| `useOnlyCssZoom` | `boolean` | `false` | Use CSS-based zoom for mobile |
|
|
381
|
+
| `diagnosticLogs` | `boolean` | `false` | Enable diagnostic logging |
|
|
382
|
+
| `zoom` | `string` | `'auto'` | Initial zoom level (two-way binding) |
|
|
383
|
+
| `page` | `number` | `1` | Initial page number |
|
|
384
|
+
| `namedDest` | `string` | - | Named destination to navigate to |
|
|
385
|
+
| `cursor` | `string` | `'select'` | Cursor type (two-way binding) |
|
|
386
|
+
| `scroll` | `string` | `'vertical'` | Scroll mode (two-way binding) |
|
|
387
|
+
| `spread` | `string` | `'none'` | Spread mode (two-way binding) |
|
|
388
|
+
| `pageMode` | `string` | `'none'` | Page mode (two-way binding) |
|
|
389
|
+
| `rotation` | `number` | `0` | Document rotation (two-way binding) |
|
|
390
|
+
| `showOpenFile` | `boolean` | `true` | Show open file button |
|
|
391
|
+
| `showDownload` | `boolean` | `true` | Show download button |
|
|
392
|
+
| `showPrint` | `boolean` | `true` | Show print button |
|
|
393
|
+
| `showFind` | `boolean` | `true` | Show search button |
|
|
394
|
+
| `showFullScreen` | `boolean` | `true` | Show fullscreen button |
|
|
395
|
+
| `showViewBookmark` | `boolean` | `true` | Show bookmark button |
|
|
396
|
+
| `showAnnotations` | `boolean` | `false` | Show annotations |
|
|
397
|
+
| `showToolbarLeft` | `boolean` | `true` | Show left toolbar section |
|
|
398
|
+
| `showToolbarMiddle` | `boolean` | `true` | Show middle toolbar section |
|
|
399
|
+
| `showToolbarRight` | `boolean` | `true` | Show right toolbar section |
|
|
400
|
+
| `showSecondaryToolbarToggle` | `boolean` | `true` | Show secondary toolbar toggle |
|
|
401
|
+
| `showSidebar` | `boolean` | `true` | Show sidebar |
|
|
402
|
+
| `showSidebarLeft` | `boolean` | `true` | Show left sidebar |
|
|
403
|
+
| `showSidebarRight` | `boolean` | `true` | Show right sidebar |
|
|
404
|
+
| `toolbarDensity` | `'compact' \| 'default' \| 'comfortable'` | `'default'` | Toolbar density |
|
|
405
|
+
| `sidebarWidth` | `string` | - | Sidebar width (e.g., '280px') |
|
|
406
|
+
| `toolbarPosition` | `'top' \| 'bottom'` | `'top'` | Toolbar position |
|
|
407
|
+
| `sidebarPosition` | `'left' \| 'right'` | `'left'` | Sidebar position |
|
|
408
|
+
| `responsiveBreakpoint` | `string \| number` | - | Responsive breakpoint |
|
|
409
|
+
| `downloadOnLoad` | `boolean` | `false` | Auto-download on load |
|
|
410
|
+
| `printOnLoad` | `boolean` | `false` | Auto-print on load |
|
|
411
|
+
| `rotateCW` | `boolean` | `false` | Rotate clockwise on load |
|
|
412
|
+
| `rotateCCW` | `boolean` | `false` | Rotate counter-clockwise on load |
|
|
413
|
+
| `showLastPageOnLoad` | `boolean` | `false` | Go to last page on load |
|
|
414
|
+
| `downloadFileName` | `string` | - | Custom download filename |
|
|
415
|
+
| `controlVisibility` | `ControlVisibilityConfig` | - | Control visibility configuration |
|
|
416
|
+
| `autoActions` | `AutoActionConfig` | - | Auto actions configuration |
|
|
417
|
+
| `errorHandling` | `ErrorConfig` | - | Error handling configuration |
|
|
418
|
+
| `viewerConfig` | `ViewerConfig` | - | Viewer configuration |
|
|
419
|
+
| `themeConfig` | `ThemeConfig` | - | Theme configuration |
|
|
420
|
+
| `groupVisibility` | `GroupVisibilityConfig` | - | Group visibility configuration |
|
|
421
|
+
| `layoutConfig` | `LayoutConfig` | - | Layout configuration |
|
|
422
|
+
|
|
423
|
+
### Output Events
|
|
424
|
+
|
|
425
|
+
| Event | Type | Description |
|
|
426
|
+
| --------------------------- | ------------------------------------------ | ---------------------------------------------- |
|
|
427
|
+
| `onDocumentLoad` | `EventEmitter<void>` | Fired when document loads |
|
|
428
|
+
| `onDocumentInit` | `EventEmitter<void>` | Fired when document initializes |
|
|
429
|
+
| `onDocumentError` | `EventEmitter<DocumentError>` | Fired when document fails to load |
|
|
430
|
+
| `onPageChange` | `EventEmitter<ChangedPage>` | Fired when page changes |
|
|
431
|
+
| `onPagesInit` | `EventEmitter<PagesInfo>` | Fired when pages are initialized |
|
|
432
|
+
| `onPageRendered` | `EventEmitter<PageRenderInfo>` | Fired when a page is rendered |
|
|
433
|
+
| `onScaleChange` | `EventEmitter<ChangedScale>` | Fired when zoom/scale changes |
|
|
434
|
+
| `onRotationChange` | `EventEmitter<ChangedRotation>` | Fired when rotation changes |
|
|
435
|
+
| `onPresentationModeChanged` | `EventEmitter<PresentationMode>` | Fired when presentation mode changes |
|
|
436
|
+
| `onOpenFile` | `EventEmitter<void>` | Fired when open file is clicked |
|
|
437
|
+
| `onFind` | `EventEmitter<FindOperation>` | Fired when search is performed |
|
|
438
|
+
| `onUpdateFindMatchesCount` | `EventEmitter<FindMatchesCount>` | Fired when search matches are updated |
|
|
439
|
+
| `onMetadataLoaded` | `EventEmitter<DocumentMetadata>` | Fired when document metadata loads |
|
|
440
|
+
| `onOutlineLoaded` | `EventEmitter<DocumentOutline>` | Fired when document outline loads |
|
|
441
|
+
| `onAnnotationLayerRendered` | `EventEmitter<AnnotationLayerRenderEvent>` | Fired when annotation layer renders |
|
|
442
|
+
| `onBookmarkClick` | `EventEmitter<BookmarkClick>` | Fired when bookmark is clicked |
|
|
443
|
+
| `onIdle` | `EventEmitter<void>` | Fired when viewer becomes idle |
|
|
444
|
+
| `onBeforePrint` | `EventEmitter<void>` | Fired before printing |
|
|
445
|
+
| `onAfterPrint` | `EventEmitter<void>` | Fired after printing |
|
|
446
|
+
| `zoomChange` | `EventEmitter<string>` | Fired when zoom changes (two-way binding) |
|
|
447
|
+
| `cursorChange` | `EventEmitter<string>` | Fired when cursor changes (two-way binding) |
|
|
448
|
+
| `scrollChange` | `EventEmitter<string>` | Fired when scroll changes (two-way binding) |
|
|
449
|
+
| `spreadChange` | `EventEmitter<string>` | Fired when spread changes (two-way binding) |
|
|
450
|
+
| `pageModeChange` | `EventEmitter<string>` | Fired when page mode changes (two-way binding) |
|
|
451
|
+
|
|
452
|
+
### Methods
|
|
453
|
+
|
|
454
|
+
| Method | Parameters | Returns | Description |
|
|
455
|
+
| -------------------------------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------- | --------------------------------- |
|
|
456
|
+
| `refresh()` | - | `void` | Refresh viewer |
|
|
457
|
+
| `goToPage(page: number)` | `page: number` | `Promise<ActionExecutionResult>` | Navigate to specific page |
|
|
458
|
+
| `setPage(page: number)` | `page: number` | `Promise<ActionExecutionResult>` | Set current page |
|
|
459
|
+
| `setZoom(zoom: string)` | `zoom: string` | `Promise<ActionExecutionResult>` | Set zoom level |
|
|
460
|
+
| `setCursor(cursor: string)` | `cursor: 'select' \| 'hand' \| 'zoom'` | `Promise<ActionExecutionResult>` | Set cursor type |
|
|
461
|
+
| `setScroll(scroll: string)` | `scroll: 'vertical' \| 'horizontal' \| 'wrapped' \| 'page'` | `Promise<ActionExecutionResult>` | Set scroll mode |
|
|
462
|
+
| `setSpread(spread: string)` | `spread: 'none' \| 'odd' \| 'even'` | `Promise<ActionExecutionResult>` | Set spread mode |
|
|
463
|
+
| `setPageMode(mode: string)` | `mode: 'none' \| 'thumbs' \| 'bookmarks' \| 'attachments'` | `Promise<ActionExecutionResult>` | Set page mode |
|
|
464
|
+
| `triggerDownload()` | - | `Promise<ActionExecutionResult>` | Trigger download |
|
|
465
|
+
| `triggerPrint()` | - | `Promise<ActionExecutionResult>` | Trigger print |
|
|
466
|
+
| `triggerRotation(direction: string)` | `direction: 'cw' \| 'ccw'` | `Promise<ActionExecutionResult>` | Rotate document |
|
|
467
|
+
| `goToLastPage()` | - | `Promise<ActionExecutionResult>` | Navigate to last page |
|
|
468
|
+
| `sendViewerControlMessage(action: string, payload: any)` | `action: string, payload: any` | `Promise<any>` | Send custom control message |
|
|
469
|
+
| `getActionStatus(actionId: string)` | `actionId: string` | `Promise<ActionExecutionResult \| null>` | Get action status |
|
|
470
|
+
| `getQueueStatus()` | - | `{ queuedActions: number; executedActions: number }` | Get queue status |
|
|
471
|
+
| `clearActionQueue()` | - | `void` | Clear action queue |
|
|
472
|
+
| `reloadViewer()` | - | `void` | Reload viewer (alias for refresh) |
|
|
473
|
+
| `goBack()` | - | `void` | Go back in browser history |
|
|
474
|
+
| `closeViewer()` | - | `void` | Close viewer window |
|
|
475
|
+
| `getErrorTemplateData()` | - | `any` | Get error template data |
|
|
476
|
+
|
|
477
|
+
---
|
|
478
|
+
|
|
479
|
+
## 🎨 Examples
|
|
480
|
+
|
|
481
|
+
### 1. Basic PDF Viewer
|
|
482
|
+
|
|
483
|
+
```html
|
|
484
|
+
<ng2-pdfjs-viewer pdfSrc="assets/sample.pdf" [showSpinner]="true">
|
|
485
|
+
</ng2-pdfjs-viewer>
|
|
486
|
+
```
|
|
487
|
+
|
|
488
|
+
### 2. Themed PDF Viewer
|
|
489
|
+
|
|
490
|
+
```html
|
|
491
|
+
<ng2-pdfjs-viewer
|
|
492
|
+
pdfSrc="assets/sample.pdf"
|
|
493
|
+
[theme]="'dark'"
|
|
494
|
+
[primaryColor]="'#ff6b6b'"
|
|
495
|
+
[backgroundColor]="'#2c3e50'"
|
|
496
|
+
>
|
|
497
|
+
</ng2-pdfjs-viewer>
|
|
498
|
+
```
|
|
499
|
+
|
|
500
|
+
### 3. Custom Loading & Error
|
|
501
|
+
|
|
502
|
+
```html
|
|
503
|
+
<ng-template #loadingTemplate>
|
|
504
|
+
<div class="loading">
|
|
505
|
+
<mat-spinner></mat-spinner>
|
|
506
|
+
<p>Loading your document...</p>
|
|
507
|
+
</div>
|
|
508
|
+
</ng-template>
|
|
509
|
+
|
|
510
|
+
<ng-template #errorTemplate>
|
|
511
|
+
<div class="error">
|
|
512
|
+
<mat-icon>error_outline</mat-icon>
|
|
513
|
+
<h3>Oops! Something went wrong</h3>
|
|
514
|
+
<p>We couldn't load your PDF. Please try again.</p>
|
|
515
|
+
<button mat-button (click)="retry()">Retry</button>
|
|
516
|
+
</div>
|
|
517
|
+
</ng-template>
|
|
518
|
+
|
|
519
|
+
<ng2-pdfjs-viewer
|
|
520
|
+
pdfSrc="assets/sample.pdf"
|
|
521
|
+
[customSpinnerTpl]="loadingTemplate"
|
|
522
|
+
[customErrorTpl]="errorTemplate"
|
|
523
|
+
>
|
|
524
|
+
</ng2-pdfjs-viewer>
|
|
525
|
+
```
|
|
526
|
+
|
|
527
|
+
### 4. Programmatic Control
|
|
528
|
+
|
|
529
|
+
```typescript
|
|
530
|
+
export class PdfController {
|
|
531
|
+
@ViewChild("pdfViewer") pdfViewer!: PdfJsViewerComponent;
|
|
532
|
+
|
|
533
|
+
async loadDocument(url: string) {
|
|
534
|
+
this.pdfViewer.pdfSrc = url;
|
|
535
|
+
await this.pdfViewer.refresh();
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
async goToPage(page: number) {
|
|
539
|
+
await this.pdfViewer.goToPage(page);
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
async setZoom(zoom: string) {
|
|
543
|
+
await this.pdfViewer.setZoom(zoom);
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
```
|
|
547
|
+
|
|
548
|
+
---
|
|
549
|
+
|
|
550
|
+
## 🔄 Migration Guide
|
|
551
|
+
|
|
552
|
+
### From v20.x to v25.x
|
|
553
|
+
|
|
554
|
+
#### Breaking Changes
|
|
555
|
+
|
|
556
|
+
1. **PDF.js Upgrade**: Updated to v5.3.93 - some APIs may have changed
|
|
557
|
+
2. **Theme System**: New theme properties replace old styling options
|
|
558
|
+
3. **Error Handling**: Template-based error system replaces HTML strings
|
|
559
|
+
|
|
560
|
+
#### Migration Steps
|
|
561
|
+
|
|
562
|
+
1. **Update Dependencies**
|
|
563
|
+
|
|
564
|
+
```bash
|
|
565
|
+
npm install ng2-pdfjs-viewer@latest
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
2. **Update Theme Configuration**
|
|
569
|
+
|
|
570
|
+
```typescript
|
|
571
|
+
// Old way
|
|
572
|
+
[customCSS]="'body { background: red; }'"
|
|
573
|
+
|
|
574
|
+
// New way
|
|
575
|
+
[theme]="'light'"
|
|
576
|
+
[primaryColor]="'#ff0000'"
|
|
577
|
+
[backgroundColor]="'#ffffff'"
|
|
578
|
+
```
|
|
579
|
+
|
|
580
|
+
3. **Update Error Handling**
|
|
581
|
+
|
|
582
|
+
```html
|
|
583
|
+
<!-- Old way -->
|
|
584
|
+
[errorHtml]="'<div>Custom error</div>'"
|
|
585
|
+
|
|
586
|
+
<!-- New way -->
|
|
587
|
+
<ng-template #errorTemplate>
|
|
588
|
+
<div>Custom error</div>
|
|
589
|
+
</ng-template>
|
|
590
|
+
<ng2-pdfjs-viewer [customErrorTpl]="errorTemplate"></ng2-pdfjs-viewer>
|
|
591
|
+
```
|
|
592
|
+
|
|
593
|
+
---
|
|
594
|
+
|
|
595
|
+
## ⚠️ Deprecated Features
|
|
596
|
+
|
|
597
|
+
The following features are deprecated and will be removed in future versions:
|
|
598
|
+
|
|
599
|
+
### Deprecated Properties
|
|
600
|
+
|
|
601
|
+
| Deprecated | Replacement | Description |
|
|
602
|
+
| ----------------- | -------------------- | --------------------------------------------- |
|
|
603
|
+
| `[startDownload]` | `[downloadOnLoad]` | Download document automatically when it opens |
|
|
604
|
+
| `[startPrint]` | `[printOnLoad]` | Print document automatically when it opens |
|
|
605
|
+
| `[errorHtml]` | `[customErrorTpl]` | Custom error HTML (use template instead) |
|
|
606
|
+
| `[errorTemplate]` | `[customErrorTpl]` | Custom error template (renamed) |
|
|
607
|
+
| `[spinnerHtml]` | `[customSpinnerTpl]` | Custom spinner HTML (use template instead) |
|
|
608
|
+
|
|
609
|
+
### Deprecated Methods
|
|
610
|
+
|
|
611
|
+
| Deprecated | Replacement | Description |
|
|
612
|
+
| ------------------ | ------------------------ | ---------------------------------------------- |
|
|
613
|
+
| `setErrorHtml()` | Use `[customErrorTpl]` | Set custom error HTML (use template instead) |
|
|
614
|
+
| `setSpinnerHtml()` | Use `[customSpinnerTpl]` | Set custom spinner HTML (use template instead) |
|
|
615
|
+
|
|
616
|
+
### Migration Help
|
|
617
|
+
|
|
618
|
+
```typescript
|
|
619
|
+
// Deprecated
|
|
620
|
+
this.pdfViewer.setErrorHtml("<div>Error</div>");
|
|
621
|
+
|
|
622
|
+
// New way
|
|
623
|
+
// Use [customErrorTpl] with ng-template
|
|
624
|
+
```
|
|
625
|
+
|
|
626
|
+
---
|
|
627
|
+
|
|
628
|
+
## 📚 Additional Resources
|
|
629
|
+
|
|
630
|
+
- **[Custom CSS Examples](Custom-CSS-Examples.md)** - Complete styling guide with theme customization examples
|
|
631
|
+
- **[Error Display Examples](Error-Display-Examples.md)** - Custom error template examples and styling options
|
|
632
|
+
- **[Contributing Guide](CONTRIBUTING.md)** - How to contribute to the project
|
|
633
|
+
|
|
634
|
+
## 🤝 Contributing
|
|
635
|
+
|
|
636
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
637
|
+
|
|
638
|
+
### Development Setup
|
|
639
|
+
|
|
640
|
+
```bash
|
|
641
|
+
# Clone the repository
|
|
642
|
+
git clone https://github.com/intbot/ng2-pdfjs-viewer.git
|
|
643
|
+
|
|
644
|
+
# Install dependencies
|
|
645
|
+
npm install
|
|
646
|
+
|
|
647
|
+
# Clear Angular cache (Windows)
|
|
648
|
+
Remove-Item -Recurse -Force "SampleApp\.angular"
|
|
649
|
+
|
|
650
|
+
|
|
651
|
+
# Build and test - All at once (Windows)
|
|
652
|
+
@test.bat
|
|
653
|
+
```
|
|
654
|
+
|
|
655
|
+
### Reporting Issues
|
|
656
|
+
|
|
657
|
+
- 🐛 **Bug Reports**: [GitHub Issues](https://github.com/intbot/ng2-pdfjs-viewer/issues)
|
|
658
|
+
- 💡 **Feature Requests**: [GitHub Discussions](https://github.com/intbot/ng2-pdfjs-viewer/discussions)
|
|
659
|
+
- 📚 **Documentation**: [GitHub Wiki](https://github.com/intbot/ng2-pdfjs-viewer/wiki)
|
|
660
|
+
|
|
661
|
+
---
|
|
662
|
+
|
|
663
|
+
## 📄 License
|
|
664
|
+
|
|
665
|
+
This project is licensed under the **Apache License 2.0 + Commons Clause License Condition v1.0** - see the [LICENSE](LICENSE) file for details.
|
|
666
|
+
|
|
667
|
+
---
|
|
668
|
+
|
|
669
|
+
## 🙏 Acknowledgments
|
|
670
|
+
|
|
671
|
+
- **Mozilla PDF.js Team** - For the amazing PDF.js library
|
|
672
|
+
- **Angular Team** - For the excellent framework
|
|
673
|
+
- **Community Contributors** - For bug reports, feature requests, and contributions
|
|
674
|
+
- **7+ Million Users** - For trusting us with your PDF viewing needs
|
|
675
|
+
|
|
676
|
+
---
|
|
677
|
+
|
|
678
|
+
## 📞 Support
|
|
679
|
+
|
|
680
|
+
- 📖 **Documentation**: [GitHub Wiki](https://github.com/intbot/ng2-pdfjs-viewer/wiki)
|
|
681
|
+
- 💬 **Community**: [GitHub Discussions](https://github.com/intbot/ng2-pdfjs-viewer/discussions)
|
|
682
|
+
- 🐛 **Issues**: [GitHub Issues](https://github.com/intbot/ng2-pdfjs-viewer/issues)
|
|
683
|
+
- 📧 **Email**: codehippie1@gmail.com
|
|
684
|
+
|
|
685
|
+
---
|
|
686
|
+
|
|
687
|
+
<div align="center">
|
|
688
|
+
|
|
689
|
+
**Made with ❤️ by the ng2-pdfjs-viewer team**
|
|
690
|
+
|
|
691
|
+
[](https://github.com/intbot/ng2-pdfjs-viewer)
|
|
692
|
+
[](https://www.npmjs.com/package/ng2-pdfjs-viewer)
|
|
693
|
+
[](https://angular.dev/overview)
|
|
694
|
+
|
|
695
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ng2-pdfjs-viewer",
|
|
3
|
-
"version": "25.0.
|
|
3
|
+
"version": "25.0.1",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Aneesh Goapalakrishnan",
|
|
6
6
|
"email": "codehippie1@gmail.com"
|
|
@@ -41,6 +41,7 @@
|
|
|
41
41
|
"viewer.html"
|
|
42
42
|
],
|
|
43
43
|
"license": "Apache-2.0 + Commons Clause",
|
|
44
|
+
"readme": "README.md",
|
|
44
45
|
"sideEffects": false,
|
|
45
46
|
"dependencies": {
|
|
46
47
|
"tslib": "^2.3.0"
|