995120: Extract pages UG Documentation PDF Viewer

Document-Processing-toc.html

@@ -202,6 +202,7 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pages/programmatic-support">Programmatic Support for Organize Page</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pages/ui-interactions">UI Interactions in Organize Page</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pages/toolbar">Toolbar</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pages/mobile-view">Organize Page in Mobile View</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-core/organize-pages/events">Events in Organize Page</a></li>
 								</ul>
@@ -377,6 +378,7 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/organize-pages/programmatic-support">Programmatic Support</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/organize-pages/ui-interactions">UI Interactions</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/organize-pages/toolbar">Toolbar</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/organize-pages/mobile-view">Mobile View</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/asp-net-mvc/organize-pages/events">Events</a></li>
 								</ul>
@@ -562,6 +564,7 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pages/programmatic-support">Programmatic Support</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pages/ui-interactions">UI Interactions</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pages/toolbar">Toolbar</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pages/mobile-view">Mobile View</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/organize-pages/events">Events</a></li>
 								</ul>
@@ -897,6 +900,7 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/programmatic-support">Programmatic Support</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/ui-interactions">UI Interactions</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/toolbar">Toolbar</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/mobile-view">Mobile View</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/events">Events</a></li>
 								</ul>
@@ -1068,6 +1072,7 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pages/programmatic-support">Programmatic Support</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pages/ui-interactions">UI Interactions</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pages/toolbar">Toolbar</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pages/mobile-view">Mobile View</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/vue/organize-pages/events">Events</a></li>
 								</ul>
@@ -1242,6 +1247,7 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pages/programmatic-support">Programmatic Support</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pages/ui-interactions">UI Interactions</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pages/toolbar">Toolbar</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pages/extract-pages">Extract Pages</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pages/mobile-view">Mobile View</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/javascript-es5/organize-pages/events">Events</a></li>
 								</ul>

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

@@ -0,0 +1,259 @@
+---
+layout: post
+title: Extract Pages in Angular PDF Viewer | Syncfusion
+description: Learn here all about Extract Pages in Organize Pages in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Extract pages in Angular PDF Viewer
+
+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.
+
+## Extract Pages in Organize Pages
+
+- Open the Organize Pages panel in the PDF Viewer toolbar.
+- Locate and click the Extract Pages option.
+
+![Extract Pages](../images/extract-page.png)
+
+When selected, a secondary toolbar dedicated to extraction is displayed.
+
+![Extract Pages secondary toolbar](../images/extract-page-secondary-toolbar.png)
+
+## Extract pages using the UI
+
+You can extract by typing page numbers/ranges or by selecting thumbnails.
+
+1. Click Extract Pages in the Organize Pages panel.
+2. In the input box, enter the pages to extract. Supported formats include:
+   - Single pages: 1,3,5
+   - Ranges: 2-6
+   - Combinations: 1,4,7-9
+3. Alternatively, select the page thumbnails you want instead of typing values.
+4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool.
+
+![Extract Pages with selected thumbnails](../images/extract-page-selected-thumbnail.png)
+
+ N> Page numbers are 1-based (first page is 1). Invalid or out-of-range entries are ignored.
+
+## Extraction options (checkboxes)
+
+Two options appear in the secondary toolbar:
+
+- **Delete Pages After Extracting:**
+  - 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.
+
+- **Extract Pages As Separate Files:**
+  - 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.
+
+![Checkboxes for extract options](../images/extract-page-checkboxes.png)
+
+## Programmatic options and APIs
+
+### Enable/disable or show/hide Extract Pages
+
+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`.
+
+Use the following code snippet to enable or disable the Extract Pages option:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import {
+  LinkAnnotationService,
+  BookmarkViewService,
+  MagnificationService,
+  ThumbnailViewService,
+  ToolbarService,
+  NavigationService,
+  AnnotationService,
+  TextSearchService,
+  TextSelectionService,
+  FormFieldsService,
+  FormDesignerService,
+  PrintService,
+  PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="content-wrapper">
+      <ejs-pdfviewer 
+        id="pdfViewer"
+        [resourceUrl]="resourceUrl"
+        [documentPath]="document"
+        [pageOrganizerSettings]= {canExtractPages: false}
+        style="height: 640px; display: block;">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  providers: [
+    LinkAnnotationService,
+    BookmarkViewService,
+    MagnificationService,
+    ThumbnailViewService,
+    ToolbarService,
+    NavigationService,
+    AnnotationService,
+    TextSearchService,
+    TextSelectionService,
+    FormFieldsService,
+    FormDesignerService,
+    PrintService,
+    PageOrganizerService,
+  ]
+})
+export class AppComponent implements OnInit {
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+  ngOnInit(): void { }
+}
+{% endhighlight %}
+{% endtabs %}
+
+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`.
+
+Use the following code snippet to remove the Extract Pages option:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import {
+  LinkAnnotationService,
+  BookmarkViewService,
+  MagnificationService,
+  ThumbnailViewService,
+  ToolbarService,
+  NavigationService,
+  AnnotationService,
+  TextSearchService,
+  TextSelectionService,
+  FormFieldsService,
+  FormDesignerService,
+  PrintService,
+  PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="content-wrapper">
+      <ejs-pdfviewer 
+        id="pdfViewer"
+        [resourceUrl]="resourceUrl"
+        [documentPath]="document"
+        [pageOrganizerSettings]={showExtractPagesOption: false}
+        style="height: 640px; display: block;">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  providers: [
+    LinkAnnotationService,
+    BookmarkViewService,
+    MagnificationService,
+    ThumbnailViewService,
+    ToolbarService,
+    NavigationService,
+    AnnotationService,
+    TextSearchService,
+    TextSelectionService,
+    FormFieldsService,
+    FormDesignerService,
+    PrintService,
+    PageOrganizerService,
+  ]
+})
+export class AppComponent implements OnInit {
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+  ngOnInit(): void { }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Extract pages and load the result programmatically
+
+You can extract pages programmatically using the `extractPages` method.
+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.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit } from '@angular/core';
+import {
+  LinkAnnotationService,
+  BookmarkViewService,
+  MagnificationService,
+  ThumbnailViewService,
+  ToolbarService,
+  NavigationService,
+  AnnotationService,
+  TextSearchService,
+  TextSelectionService,
+  FormFieldsService,
+  FormDesignerService,
+  PrintService,
+  PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="content-wrapper">
+    <button (click)="onExtract()">Extract Pages</button>
+      <ejs-pdfviewer 
+        id="pdfViewer"
+        [resourceUrl]="resourceUrl"
+        [documentPath]="document"
+        [pageOrganizerSettings]={showExtractPagesOption:true}
+        style="height: 640px; display: block;">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  providers: [
+    LinkAnnotationService,
+    BookmarkViewService,
+    MagnificationService,
+    ThumbnailViewService,
+    ToolbarService,
+    NavigationService,
+    AnnotationService,
+    TextSearchService,
+    TextSelectionService,
+    FormFieldsService,
+    FormDesignerService,
+    PrintService,
+    PageOrganizerService,
+  ]
+})
+export class AppComponent implements OnInit {
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+  ngOnInit(): void { }
+
+
+  onExtract() {
+    const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+     // Extract pages 1 and 2
+    const array = (viewer as any).extractPages('1,2');
+     // Load the extracted pages back into the viewer
+    (viewer as any).load(array,"");
+    console.log(array);
+  }
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
+
+## See also
+
+- [Overview](../overview)
+- [UI interactions](../ui-interactions)
+- [Programmatic support](../programmatic-support)
+- [Toolbar](../toolbar)
+- [Events](../events)
+- [Mobile view](../mobile-view)