diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index d49d2b69b..e97b1b594 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -202,6 +202,7 @@
  • Programmatic Support for Organize Page
  • UI Interactions in Organize Page
  • Toolbar
  • +
  • Extract Pages
  • Organize Page in Mobile View
  • Events in Organize Page
  • @@ -377,6 +378,7 @@
  • Programmatic Support
  • UI Interactions
  • Toolbar
  • +
  • Extract Pages
  • Mobile View
  • Events
  • @@ -562,6 +564,7 @@
  • Programmatic Support
  • UI Interactions
  • Toolbar
  • +
  • Extract Pages
  • Mobile View
  • Events
  • @@ -897,6 +900,7 @@
  • Programmatic Support
  • UI Interactions
  • Toolbar
  • +
  • Extract Pages
  • Mobile View
  • Events
  • @@ -1068,6 +1072,7 @@
  • Programmatic Support
  • UI Interactions
  • Toolbar
  • +
  • Extract Pages
  • Mobile View
  • Events
  • @@ -1242,6 +1247,7 @@
  • Programmatic Support
  • UI Interactions
  • Toolbar
  • +
  • Extract Pages
  • Mobile View
  • Events
  • diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/angular/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md new file mode 100644 index 000000000..302a5394e --- /dev/null +++ b/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: ` +
    + + +
    + `, + 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: ` +
    + + +
    + `, + 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: ` +
    + + + +
    + `, + 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) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-core/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/extract-pages.md new file mode 100644 index 000000000..8f1ac16f7 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-core/organize-pages/extract-pages.md @@ -0,0 +1,136 @@ +--- +layout: post +title: Extract Pages in ASP.NET Core PDF Viewer | Syncfusion +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. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Extract pages in ASP.NET Core PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +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 + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable 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 cshtml tabtitle="Standalone" %} +
    + + +
    +{% 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 cshtml tabtitle="Standalone" %} +
    + + +
    +{% 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 cshtml tabtitle="Standalone" %} +
    + + + +
    + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/asp-core-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) diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md new file mode 100644 index 000000000..85968b982 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/asp-net-mvc/organize-pages/extract-pages.md @@ -0,0 +1,120 @@ +--- +layout: post +title: Extract Pages in ASP.NET MVC PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion ASP.NET MVC PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +--- + +# Extract pages in ASP.NET MVC PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +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 + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable 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 cshtml tabtitle="Standalone" %} +
    +@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new {canExtractPages = false}).Render() +
    +{% 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 cshtml tabtitle="Standalone" %} +
    +@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new {showExtractPagesOption = false}).Render() +
    +{% 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 cshtml tabtitle="Standalone" %} + +
    +@Html.EJS().PdfViewer("pdfviewer").ResourceUrl("https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new {CanExtractPages = true}).Render() +
    + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/mvc-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) diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/javascript-es5/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md new file mode 100644 index 000000000..b5124bf54 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pages/extract-pages.md @@ -0,0 +1,116 @@ +--- +layout: post +title: Extract Pages in JavaScript PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion JavaScript PDF Viewer control of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in JavaScript 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). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. 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. + - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. + - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable 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: + +```js +// Enable the Extract Pages Tool +viewer.pageOrganizerSettings = { canExtractPages: true }; +``` + +```js +// Disable the Extract Pages Tool +viewer.pageOrganizerSettings = { canExtractPages: false }; +``` + +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: +```js +// Remove the Extract Pages option entirely from the UI (redacted example as provided) +viewer.pageOrganizerSettings = { showExtractPagesOption: false } +``` + +### 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. + +```html + +``` + +```js +document.getElementById('extractPage').addEventListener('click', function () { + // Extract pages 1 and 2 + var array = viewer.extractPages("1,2"); + + // Load the extracted pages back into the viewer + viewer.load(array,""); + + // Inspect the result if needed + console.log(array); +}); +``` + +[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-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) diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/react/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md new file mode 100644 index 000000000..4fab3cd57 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/organize-pages/extract-pages.md @@ -0,0 +1,184 @@ +--- +layout: post +title: Extract Pages in React PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion React PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in React PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +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). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. 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. + - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. + - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable 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 * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // Enable Extract Pages Tool + const pageOrganizerSettings = { canExtractPages: true}; + return (
    +
    + + + +
    +
    ); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% 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 * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // Enable Extract Pages Tool + const pageOrganizerSettings = { showExtractPagesOption: false}; + return (
    +
    + + + +
    +
    ); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% 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 * as ReactDOM from 'react-dom/client'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject, PageOrganizer} from '@syncfusion/ej2-react-pdfviewer'; +export function App() { + // Enable Extract Pages Tool + const pageOrganizerSettings = { canExtractPages: true}; + return (
    +
    + + + + +
    +
    ); +} +function extractPage(){ +// Get the PDF viewer instance + var viewer = document.getElementById('container').ej2_instances[0]; + //Extract Pages 1,2 + const array = viewer.extractPages('1,2'); + //Load in viewer + viewer.load(array,''); + + //print base64 to ensure + console.log(array); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/react-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) diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-checkboxes.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-checkboxes.png new file mode 100644 index 000000000..df6efa3ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-checkboxes.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-secondary-toolbar.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-secondary-toolbar.png new file mode 100644 index 000000000..f310ffd39 Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-secondary-toolbar.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-selected-thumbnail.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-selected-thumbnail.png new file mode 100644 index 000000000..6576e7b7a Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page-selected-thumbnail.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page.png b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page.png new file mode 100644 index 000000000..3ae5965ba Binary files /dev/null and b/Document-Processing/PDF/PDF-Viewer/vue/images/extract-page.png differ diff --git a/Document-Processing/PDF/PDF-Viewer/vue/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/vue/organize-pages/extract-pages.md new file mode 100644 index 000000000..dc28eb51e --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/organize-pages/extract-pages.md @@ -0,0 +1,214 @@ +--- +layout: post +title: Extract Pages in Vue PDF Viewer | Syncfusion +description: Learn here all about Extract Pages in Organize Pages in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more. +platform: document-processing +control: PDF Viewer +documentation: ug +domainurl: ##DomainURL## +--- + +# Extract pages in Vue PDF Viewer + +The PDF Viewer component lets you extract pages from a document using the Extract Pages option in the Organize Pages UI. +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). You can start anywhere—enter single pages or ranges like 2-3, 5, or 7-9. 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. + - Example: If you enter 1,2 and extract, a PDF containing pages 1 and 2 is downloaded, and pages 1 and 2 are removed from the currently loaded document in the viewer. + +- **Extract Pages As Separate Files:** + - When enabled, every selected page is exported as an individual PDF file. + - Example: If you select pages 3, 5, and 6, three separate PDFs are downloaded (3.pdf, 5.pdf, and 6.pdf). If you enter a range (e.g., 2-4), pages 2, 3, and 4 are each downloaded as separate PDFs. + +![Checkboxes for extract options](../images/extract-page-checkboxes.png) + +## Programmatic options and APIs + +You can control the Extract Pages experience via settings and invoke extraction through code. + +### Enable/disable 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 html tabtitle="Standalone" %} + + +{% 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 html tabtitle="Standalone" %} + + +{% 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 html tabtitle="Standalone" %} + + +{% endhighlight %} +{% endtabs %} + +[View sample in GitHub](https://github.com/SyncfusionExamples/vue-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)