@aprova.ch/ngx-next-pdf-viewer 20.0.8
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 +145 -0
- package/fesm2022/aprova.ch-ngx-next-pdf-viewer.mjs +744 -0
- package/fesm2022/aprova.ch-ngx-next-pdf-viewer.mjs.map +1 -0
- package/index.d.ts +213 -0
- package/package.json +51 -0
package/README.md
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
# ngx-next-pdf-viewer
|
|
2
|
+
|
|
3
|
+
An Angular component for rendering PDFs with bounding-box annotations, drag-to-select, search, zoom, and rotation — powered by [PDF.js](https://mozilla.github.io/pdf.js/).
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Canvas-based PDF rendering with HiDPI (devicePixelRatio) support
|
|
8
|
+
- Bounding-box annotation overlay (SVG polygons)
|
|
9
|
+
- Single-click highlight + `boxClicked` output event
|
|
10
|
+
- Drag-to-select multiple boxes + context menu + `boxesSelected` output event
|
|
11
|
+
- Toolbar: zoom in/out, rotate left/right, previous/next page, text search
|
|
12
|
+
- Ctrl + scroll wheel zoom
|
|
13
|
+
- Configurable worker URL via injection token
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install ngx-next-pdf-viewer
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Copy the PDF.js worker to your assets (once):
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
cp node_modules/pdfjs-dist/build/pdf.worker.min.mjs src/assets/
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Or add it to `angular.json` assets:
|
|
28
|
+
|
|
29
|
+
```json
|
|
30
|
+
{
|
|
31
|
+
"glob": "pdf.worker.min.mjs",
|
|
32
|
+
"input": "node_modules/pdfjs-dist/build",
|
|
33
|
+
"output": "/assets/"
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Usage
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
import { NgxNextPdfViewerComponent } from 'ngx-next-pdf-viewer';
|
|
41
|
+
|
|
42
|
+
@Component({
|
|
43
|
+
imports: [NgxNextPdfViewerComponent],
|
|
44
|
+
template: `
|
|
45
|
+
<ngx-next-pdf-viewer
|
|
46
|
+
style="height: 600px; display: block;"
|
|
47
|
+
[blob]="myBlob"
|
|
48
|
+
[annotations]="myBoxes"
|
|
49
|
+
[contextMenuItems]="[{ label: 'Copy', action: 'copy' }]"
|
|
50
|
+
(boxClicked)="onBoxClicked($event)"
|
|
51
|
+
(boxesSelected)="onBoxesSelected($event)"
|
|
52
|
+
/>
|
|
53
|
+
`
|
|
54
|
+
})
|
|
55
|
+
export class AppComponent { ... }
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Inputs
|
|
59
|
+
|
|
60
|
+
| Input | Type | Default | Description |
|
|
61
|
+
|--------------------|---------------------|--------------------------|---------------------------------------------------|
|
|
62
|
+
| `blob` | `Blob \| undefined` | `undefined` | The PDF file as a Blob |
|
|
63
|
+
| `annotations` | `BoundingBox[]` | `[]` | Annotation boxes to render as SVG polygons |
|
|
64
|
+
| `contextMenuItems` | `ContextMenuItem[]` | `[]` | Items shown in right-click menu after drag-select |
|
|
65
|
+
| `highlightingColor`| `string` | `'rgba(255,200,0,0.35)'` | Fill color of the clicked/highlighted box |
|
|
66
|
+
| `selectedColor` | `string` | `'rgba(0,120,215,0.35)'` | Fill color of multi-selected boxes |
|
|
67
|
+
| `annotationStroke` | `string` | `'#e97332'` | Stroke color of annotation polygons |
|
|
68
|
+
| `initialZoom` | `number` | `1.5` | Zoom level applied when the PDF first loads |
|
|
69
|
+
| `labels` | `Partial<PdfViewerLabels>` | see below | Override any subset of the viewer's UI strings |
|
|
70
|
+
|
|
71
|
+
## Outputs
|
|
72
|
+
|
|
73
|
+
| Output | Type | Description |
|
|
74
|
+
|-----------------|--------------------------------------------------------|-------------------------------------------------------|
|
|
75
|
+
| `boxClicked` | `EventEmitter<{ box: BoundingBox; selected: boolean }>` | Emitted when a box is clicked (select or deselect) |
|
|
76
|
+
| `boxesSelected` | `EventEmitter<{ boxes: BoundingBox[]; action: string }>` | Emitted when drag-select + context menu action chosen |
|
|
77
|
+
|
|
78
|
+
## Configuring the worker URL
|
|
79
|
+
|
|
80
|
+
By default the worker is loaded from `assets/pdf.worker.min.mjs`. Override:
|
|
81
|
+
|
|
82
|
+
```typescript
|
|
83
|
+
providers: [
|
|
84
|
+
{ provide: NGX_PDF_WORKER_SRC, useValue: 'assets/custom/pdf.worker.min.mjs' }
|
|
85
|
+
]
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## Localisation
|
|
89
|
+
|
|
90
|
+
Pass a `Partial<PdfViewerLabels>` to override any subset of the built-in English strings:
|
|
91
|
+
|
|
92
|
+
```typescript
|
|
93
|
+
<ngx-next-pdf-viewer
|
|
94
|
+
[blob]="myBlob"
|
|
95
|
+
[labels]="{
|
|
96
|
+
zoomOut: 'Verkleinern',
|
|
97
|
+
zoomIn: 'Vergrößern',
|
|
98
|
+
rotateLeft: 'Links drehen',
|
|
99
|
+
rotateRight: 'Rechts drehen',
|
|
100
|
+
previousPage: 'Vorherige Seite',
|
|
101
|
+
nextPage: 'Nächste Seite',
|
|
102
|
+
search: 'Suchen',
|
|
103
|
+
previousResult: 'Vorheriges Ergebnis',
|
|
104
|
+
nextResult: 'Nächstes Ergebnis',
|
|
105
|
+
searchPlaceholder: 'Im PDF suchen…',
|
|
106
|
+
noResults: 'Keine Ergebnisse',
|
|
107
|
+
loading: 'PDF wird geladen…',
|
|
108
|
+
noDocument: 'Kein PDF geladen',
|
|
109
|
+
loadError: 'PDF konnte nicht geladen werden',
|
|
110
|
+
}"
|
|
111
|
+
/>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Models
|
|
115
|
+
|
|
116
|
+
```typescript
|
|
117
|
+
interface BoundingBox {
|
|
118
|
+
page: number; // 1-based page number
|
|
119
|
+
width: number; // page width in the unit given by `unit`
|
|
120
|
+
height: number; // page height in the unit given by `unit`
|
|
121
|
+
polygon: number[]; // [x1,y1, x2,y2, x3,y3, x4,y4] – clockwise, y=0 at top
|
|
122
|
+
unit?: string; // "inch" (Azure DI) or "pixel" / omit for pixel-space
|
|
123
|
+
angle?: number; // page rotation when the polygon was extracted
|
|
124
|
+
content?: string;
|
|
125
|
+
[key: string]: any;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
interface PdfViewerLabels {
|
|
129
|
+
zoomOut: string; zoomIn: string;
|
|
130
|
+
rotateLeft: string; rotateRight: string;
|
|
131
|
+
previousPage: string; nextPage: string;
|
|
132
|
+
search: string; previousResult: string; nextResult: string;
|
|
133
|
+
searchPlaceholder: string; noResults: string;
|
|
134
|
+
loading: string; noDocument: string; loadError: string;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
interface ContextMenuItem {
|
|
138
|
+
label: string;
|
|
139
|
+
action: string;
|
|
140
|
+
}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## License
|
|
144
|
+
|
|
145
|
+
MIT
|