Skip to content

Commit c5bcf2e

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
995120: Updated UG Documentation for Extract Pages in Page organizer
1 parent 870dbc1 commit c5bcf2e

30 files changed

+1029
-0
lines changed

‎Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-checkboxes.png‎

53.6 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-secondary-toolbar.png‎

55.9 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-selected-thumbnail.png‎

43.8 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/images/extract-page.png‎

49.3 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md‎

Lines changed: 259 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,259 @@
1+
---
2+
layout: post
3+
title: Extract Pages in Angular PDF Viewer | Syncfusion
4+
description: Learn here all about Extract Pages in Organize Pages in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Extract pages in Angular PDF Viewer
12+
13+
The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI, and also control extraction programmatically. The Extract Pages tool is available by default in Organize Pages.
14+
15+
## Extract Pages in Organize Pages
16+
17+
- Open the Organize Pages panel in the PDF Viewer toolbar.
18+
- Locate and click the Extract Pages option.
19+
20+
![Extract Pages](../images/extract-page.png)
21+
22+
When selected, a secondary toolbar dedicated to extraction is displayed.
23+
24+
![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png)
25+
26+
## Extract pages using the UI
27+
28+
You can extract by typing page numbers/ranges or by selecting thumbnails.
29+
30+
1. Click Extract Pages in the Organize Pages panel.
31+
2. In the input box, enter the pages to extract. Supported formats include:
32+
- Single pages: 1,3,5
33+
- Ranges: 2-6
34+
- Combinations: 1,4,7-9
35+
3. Alternatively, select the page thumbnails you want instead of typing values.
36+
4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool.
37+
38+
![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png)
39+
40+
N> Page numbers are 1-based (first page is 1). Invalid or out-of-range entries are ignored.
41+
42+
## Extraction options (checkboxes)
43+
44+
Two options appear in the secondary toolbar:
45+
46+
- **Delete Pages After Extracting:**
47+
- When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file.
48+
49+
- **Extract Pages As Separate Files:**
50+
- When enabled, every selected page is exported as an individual PDF file. Ranges such as 2-4 export pages 2, 3, and 4 as separate PDFs.
51+
52+
![Checkboxes for extract options](../images/extract-page-checkboxes.png)
53+
54+
## Programmatic options and APIs
55+
56+
### Enable/disable or show/hide Extract Pages
57+
58+
Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`.
59+
60+
Use the following code snippet to enable or disable the Extract Pages option:
61+
62+
{% tabs %}
63+
{% highlight ts tabtitle="Standalone" %}
64+
import { Component, OnInit } from '@angular/core';
65+
import {
66+
LinkAnnotationService,
67+
BookmarkViewService,
68+
MagnificationService,
69+
ThumbnailViewService,
70+
ToolbarService,
71+
NavigationService,
72+
AnnotationService,
73+
TextSearchService,
74+
TextSelectionService,
75+
FormFieldsService,
76+
FormDesignerService,
77+
PrintService,
78+
PageOrganizerService,
79+
} from '@syncfusion/ej2-angular-pdfviewer';
80+
81+
@Component({
82+
selector: 'app-root',
83+
template: `
84+
<div class="content-wrapper">
85+
<ejs-pdfviewer
86+
id="pdfViewer"
87+
[resourceUrl]="resourceUrl"
88+
[documentPath]="document"
89+
[pageOrganizerSettings]= {canExtractPages: false}
90+
style="height: 640px; display: block;">
91+
</ejs-pdfviewer>
92+
</div>
93+
`,
94+
providers: [
95+
LinkAnnotationService,
96+
BookmarkViewService,
97+
MagnificationService,
98+
ThumbnailViewService,
99+
ToolbarService,
100+
NavigationService,
101+
AnnotationService,
102+
TextSearchService,
103+
TextSelectionService,
104+
FormFieldsService,
105+
FormDesignerService,
106+
PrintService,
107+
PageOrganizerService,
108+
]
109+
})
110+
export class AppComponent implements OnInit {
111+
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
112+
public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
113+
ngOnInit(): void { }
114+
}
115+
{% endhighlight %}
116+
{% endtabs %}
117+
118+
Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`.
119+
120+
Use the following code snippet to remove the Extract Pages option:
121+
122+
{% tabs %}
123+
{% highlight ts tabtitle="Standalone" %}
124+
import { Component, OnInit } from '@angular/core';
125+
import {
126+
LinkAnnotationService,
127+
BookmarkViewService,
128+
MagnificationService,
129+
ThumbnailViewService,
130+
ToolbarService,
131+
NavigationService,
132+
AnnotationService,
133+
TextSearchService,
134+
TextSelectionService,
135+
FormFieldsService,
136+
FormDesignerService,
137+
PrintService,
138+
PageOrganizerService,
139+
} from '@syncfusion/ej2-angular-pdfviewer';
140+
141+
@Component({
142+
selector: 'app-root',
143+
template: `
144+
<div class="content-wrapper">
145+
<ejs-pdfviewer
146+
id="pdfViewer"
147+
[resourceUrl]="resourceUrl"
148+
[documentPath]="document"
149+
[pageOrganizerSettings]={showExtractPagesOption: false}
150+
style="height: 640px; display: block;">
151+
</ejs-pdfviewer>
152+
</div>
153+
`,
154+
providers: [
155+
LinkAnnotationService,
156+
BookmarkViewService,
157+
MagnificationService,
158+
ThumbnailViewService,
159+
ToolbarService,
160+
NavigationService,
161+
AnnotationService,
162+
TextSearchService,
163+
TextSelectionService,
164+
FormFieldsService,
165+
FormDesignerService,
166+
PrintService,
167+
PageOrganizerService,
168+
]
169+
})
170+
export class AppComponent implements OnInit {
171+
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
172+
public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
173+
ngOnInit(): void { }
174+
}
175+
{% endhighlight %}
176+
{% endtabs %}
177+
178+
### Extract pages and load the result programmatically
179+
180+
You can extract pages programmatically using the `extractPages` method.
181+
The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents.
182+
183+
{% tabs %}
184+
{% highlight ts tabtitle="Standalone" %}
185+
import { Component, OnInit } from '@angular/core';
186+
import {
187+
LinkAnnotationService,
188+
BookmarkViewService,
189+
MagnificationService,
190+
ThumbnailViewService,
191+
ToolbarService,
192+
NavigationService,
193+
AnnotationService,
194+
TextSearchService,
195+
TextSelectionService,
196+
FormFieldsService,
197+
FormDesignerService,
198+
PrintService,
199+
PageOrganizerService,
200+
} from '@syncfusion/ej2-angular-pdfviewer';
201+
202+
@Component({
203+
selector: 'app-root',
204+
template: `
205+
<div class="content-wrapper">
206+
<button (click)="onExtract()">Extract Pages</button>
207+
<ejs-pdfviewer
208+
id="pdfViewer"
209+
[resourceUrl]="resourceUrl"
210+
[documentPath]="document"
211+
[pageOrganizerSettings]={showExtractPagesOption:true}
212+
style="height: 640px; display: block;">
213+
</ejs-pdfviewer>
214+
</div>
215+
`,
216+
providers: [
217+
LinkAnnotationService,
218+
BookmarkViewService,
219+
MagnificationService,
220+
ThumbnailViewService,
221+
ToolbarService,
222+
NavigationService,
223+
AnnotationService,
224+
TextSearchService,
225+
TextSelectionService,
226+
FormFieldsService,
227+
FormDesignerService,
228+
PrintService,
229+
PageOrganizerService,
230+
]
231+
})
232+
export class AppComponent implements OnInit {
233+
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
234+
public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
235+
ngOnInit(): void { }
236+
237+
238+
onExtract() {
239+
const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
240+
// Extract pages 1 and 2
241+
const array = (viewer as any).extractPages('1,2');
242+
// Load the extracted pages back into the viewer
243+
(viewer as any).load(array,"");
244+
console.log(array);
245+
}
246+
}
247+
{% endhighlight %}
248+
{% endtabs %}
249+
250+
[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
251+
252+
## See also
253+
254+
- [Overview](../overview)
255+
- [UI interactions](../ui-interactions)
256+
- [Programmatic support](../programmatic-support)
257+
- [Toolbar](../toolbar)
258+
- [Events](../events)
259+
- [Mobile view](../mobile-view)

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-checkboxes.png‎

53.6 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-secondary-toolbar.png‎

55.9 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-selected-thumbnail.png‎

43.8 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page.png‎

49.3 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/extract-pages.md‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
---
2+
layout: post
3+
title: Extract Pages in ASP.NET Core PDF Viewer | Syncfusion
4+
description: Learn here all about Extract Pages in Organize Pages in Syncfusion ASP.NET Core PDF Viewer control of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
---
9+
10+
# Extract pages in ASP.NET Core PDF Viewer
11+
12+
The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI.
13+
The Extract Pages tool is available by default in Organize Pages.
14+
15+
## Extract Pages in Organize Pages
16+
17+
- Open the Organize Pages panel in the PDF Viewer toolbar.
18+
- Locate and click the Extract Pages option.
19+
20+
![Extract Pages](../images/extract-page.png)
21+
22+
When selected, a secondary toolbar dedicated to extraction is displayed.
23+
24+
![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png)
25+
26+
## Extract pages using the UI
27+
28+
You can extract by typing page numbers/ranges or by selecting thumbnails.
29+
30+
1. Click Extract Pages in the Organize Pages panel.
31+
2. In the input box, enter the pages to extract. Supported formats include:
32+
- Single pages: 1,3,5
33+
- Ranges: 2-6
34+
- Combinations: 1,4,7-9
35+
3. Alternatively, select the page thumbnails you want instead of typing values.
36+
4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool.
37+
38+
![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png)
39+
40+
N> Page numbers are 1-based (first page is 1). Invalid or out-of-range entries are ignored.
41+
42+
## Extraction options (checkboxes)
43+
44+
Two options appear in the secondary toolbar:
45+
46+
- **Delete Pages After Extracting:**
47+
- When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file.
48+
49+
- **Extract Pages As Separate Files:**
50+
- When enabled, every selected page is exported as an individual PDF file. Ranges such as 2-4 export pages 2, 3, and 4 as separate PDFs.
51+
52+
![Checkboxes for extract options](../images/extract-page-checkboxes.png)
53+
54+
## Programmatic options and APIs
55+
56+
You can control the Extract Pages experience via settings and invoke extraction through code.
57+
58+
### Enable/disable Extract Pages
59+
60+
Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`.
61+
62+
Use the following code snippet to enable or disable the Extract Pages option:
63+
64+
{% tabs %}
65+
{% highlight cshtml tabtitle="Standalone" %}
66+
<div class="text-center">
67+
<ejs-pdfviewer id="pdfviewer"
68+
style="height:600px"
69+
pageOrganizerSettings="@(new {CanExtractPages = true})"
70+
resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
71+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
72+
</ejs-pdfviewer>
73+
</div>
74+
{% endhighlight %}
75+
{% endtabs %}
76+
77+
Use the `showExtractPagesOption` API to show or hide the Extract Pages option. When set to `false`, the Extract Pages tool is removed from the toolbar. The default value is `true`.
78+
79+
Use the following code snippet to remove the Extract Pages option:
80+
81+
{% tabs %}
82+
{% highlight cshtml tabtitle="Standalone" %}
83+
<div class="text-center">
84+
<ejs-pdfviewer id="pdfviewer"
85+
style="height:600px"
86+
pageOrganizerSettings="@(new {showExtractPagesOption = false})"
87+
resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
88+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
89+
</ejs-pdfviewer>
90+
</div>
91+
{% endhighlight %}
92+
{% endtabs %}
93+
94+
### Extract pages and load the result programmatically
95+
96+
You can extract pages programmatically using the `extractPages` method.
97+
The following example extracts pages 1 and 2, then immediately loads the extracted pages back into the viewer. The returned value is a byte array (e.g., Uint8Array) representing the PDF file contents.
98+
99+
{% tabs %}
100+
{% highlight cshtml tabtitle="Standalone" %}
101+
<div class="text-center">
102+
<button id="extractPage" onclick="extractPage()">Extract Page</button>
103+
<ejs-pdfviewer id="pdfviewer"
104+
style="height:600px"
105+
pageOrganizerSettings="@(new {CanExtractPages = true})"
106+
resourceUrl="https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
107+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
108+
</ejs-pdfviewer>
109+
</div>
110+
111+
<script>
112+
function extractPage() {
113+
var viewer = document.getElementById('pdfviewer')?.ej2_instances[0];
114+
115+
//Extract Pages 1,2
116+
var array = viewer.extractPages('1,2');
117+
118+
//Load the Extracted Pages
119+
viewer.load(array,'');
120+
//Print the Base64 for reference
121+
console.log(array);
122+
}
123+
</script>
124+
{% endhighlight %}
125+
{% endtabs %}
126+
127+
[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-pdf-viewer-examples/tree/master/How%20to)
128+
129+
## See also
130+
131+
- [Overview](../overview)
132+
- [UI interactions](../ui-interactions)
133+
- [Programmatic support](../programmatic-support)
134+
- [Toolbar](../toolbar)
135+
- [Events](../events)
136+
- [Mobile view](../mobile-view)

0 commit comments

Comments
 (0)