Skip to content

Commit a6cf403

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
984540: JS documentation restructuring - page organizer module
1 parent af26ff4 commit a6cf403

File tree

6 files changed

+537
-0
lines changed

6 files changed

+537
-0
lines changed

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf-overview.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
---
2+
layout: post
3+
title: Organize pages in JavaScript PDF Viewer | Syncfusion
4+
description: Learn how to reorder, rotate, insert, delete, and save pages with the Syncfusion JavaScript PDF Viewer component.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Organize pages in JavaScript PDF Viewer
12+
13+
The JavaScript PDF Viewer component provides an Organize Pages panel that helps you prepare documents before sharing them. Use it to tidy scanned files, move pages into the right order, and duplicate important content without leaving the viewer.
14+
15+
To open the Organize Pages panel, load a document, ensure that the Organize Pages toolbar item is enabled, and choose **Organize Pages** from the left vertical toolbar. The document must allow page-level edits; otherwise, the toolbar item is hidden.
16+
17+
The Organize Pages panel supports the following actions:
18+
19+
* **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages.
20+
* **Rearrange pages**: Drag and drop thumbnails to update the reading order.
21+
* **Insert new pages**: Add blank pages at the required position.
22+
* **Delete pages**: Remove pages that are no longer needed.
23+
* **Copy pages**: Duplicate selected pages to reuse content elsewhere in the document.
24+
* **Import a PDF document**: Merge the current document with pages from another PDF file.
25+
* **Select all pages**: Apply bulk actions, such as rotation or deletion, to every page.
26+
* **Save updates**: Review changes in real time and use **Save** or **Save As** to download the revised document.
27+
28+
After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order.

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf/organize-page-mobile-view.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
layout: post
3+
title: Organize Pages in Mobile PDF Viewer | Syncfusion
4+
description: Learn how to organize pages in the mobile PDF viewer, including rotating, rearranging, inserting, deleting, and copying pages on mobile devices
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Organize Pages in Mobile PDF Viewer
12+
13+
The PDF Viewer offers a mobile-responsive layout for the `Organize Pages` feature, ensuring a seamless experience on smaller devices. When viewed on a mobile device, the toolbar and navigation elements adapt to the screen size, providing easy access to all page management tools.
14+
15+
## Mobile-Friendly Toolbar
16+
17+
In the mobile view, the `Organize Pages` toolbar is displayed at the bottom of the screen for easy one-handed access. The toolbar includes the same set of tools as the desktop version, such as insert, delete, and rotate, but with a mobile-optimized layout.
18+
19+
## Context Menu for Page Operations
20+
21+
To perform actions on a page thumbnail, tap and hold on the thumbnail to open a context menu. This menu contains all the available page operations:
22+
23+
* **Rotate Clockwise**: Rotate the selected page 90 degrees clockwise.
24+
* **Rotate Counter-Clockwise**: Rotate the selected page 90 degrees counter-clockwise.
25+
* **Insert Page**: Insert a new page.
26+
* **Copy Page**: Duplicate the selected page.
27+
* **Delete Page**: Remove the selected page.
28+
* **Select All**: Select all pages in the document.
29+
30+
31+
![Page Organizer Operations](../images/Context-Menu-Page-Operations1.png)
32+
33+
## Rearranging Pages on Mobile
34+
35+
To rearrange pages, tap and hold a page thumbnail to select it, then drag it to the desired position. A blue line will indicate the drop location.
36+
37+
By providing a mobile-friendly interface, the PDF Viewer ensures that users can efficiently manage their PDF documents from any device, anywhere.

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf/organize-pdf-events.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
layout: post
3+
title: Organize Pages Events in JavaScript PDF Viewer | Syncfusion
4+
description: Learn how to organize pages Events in the PDF viewer, including rotating, rearranging, inserting, deleting, and copying pages on mobile devices.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Organize Pages Events in PDF Viewer
12+
13+
The PDF Viewer provides events to track and respond to actions within the page organizer, allowing for the customization of page manipulation features.
14+
15+
## pageOrganizerSaveAs
16+
17+
The `pageOrganizerSaveAs` event is triggered when a save action is performed in the page organizer.
18+
19+
- Occurs when the **Save as** button in the page organizer toolbar is clicked after modifying the document structure.
20+
21+
The event arguments provide the necessary information about the save event:
22+
23+
- `fileName`: The name of the currently loaded PDF document.
24+
- `downloadDocument`: A base64 string of the modified PDF document data.
25+
- `cancel`: A boolean that, when set to `true`, prevents the default save action from proceeding.
26+
27+
```javascript
28+
ej.pdfviewer.PdfViewer.Inject(
29+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation,
30+
ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation,
31+
ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer
32+
);
33+
34+
var pdfviewer = new ej.pdfviewer.PdfViewer({
35+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
36+
pageOrganizerSaveAs: function (args) {
37+
console.log('File Name is ' + args.fileName);
38+
console.log('Document data ' + args.downloadDocument);
39+
}
40+
});
41+
42+
pdfviewer.appendTo('#PdfViewer');
43+
```
44+
45+
## pageOrganizerZoomChanged
46+
47+
The `pageOrganizerZoomChanged` event is triggered when the zoom level of the page organizer is changed.
48+
49+
- This event is fired when the user interacts with the zoom slider in the page organizer. The `showImageZoomingSlider` property in `pageOrganizerSettings` must be set to `true` for the slider to be visible.
50+
51+
52+
Event arguments:
53+
54+
- `previousZoomValue`: The previous zoom value.
55+
- `currentZoomValue`: The current zoom value.
56+
57+
```javascript
58+
ej.pdfviewer.PdfViewer.Inject(
59+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.LinkAnnotation,
60+
ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation,
61+
ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer
62+
);
63+
64+
var pdfviewer = new ej.pdfviewer.PdfViewer({
65+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
66+
pageOrganizerZoomChanged: function (args) {
67+
console.log('Previous Zoom Value is ' + args.previousZoom);
68+
console.log('Current Zoom Value is ' + args.currentZoom);
69+
}
70+
});
71+
72+
pdfviewer.pageOrganizerSettings = { showImageZoomingSlider: true };
73+
pdfviewer.appendTo('#PdfViewer');
74+
```
75+
76+
## Related event documentation
77+
78+
- Overall Viewer events: [Event](../event.md)
79+
- Annotation events: [Annotation events](../annotations/annotation-event.md)
80+
- Form designer events: [Form field events](../form-designer/form-field-events.md)

‎Document-Processing/PDF/PDF-Viewer/javascript-es5/organize-pdf/programmatic-support-for-organize-page.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
layout: post
3+
title: Programmatic Support for Organize Pages in JavaScript PDF Viewer control | Syncfusion
4+
description: Learn here all about Programmatic Support for Organize Pages in Syncfusion JavaScript PDF Viewer control of Syncfusion Essential JS 2 and more.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Programmatic Support for Organize Pages in JavaScript PDF Viewer control
12+
13+
The PDF Viewer provides comprehensive programmatic support for organizing pages, allowing you to integrate and manage PDF functionalities directly within your application. This section details the available APIs to enable, control, and interact with the page organization features.
14+
15+
## Enable or disable the page organizer
16+
17+
The page organizer feature can be enabled or disabled using the `enablePageOrganizer` property. By default, this feature is enabled.
18+
19+
{% tabs %}
20+
{% highlight js tabtitle="Standalone" %}
21+
22+
ej.pdfviewer.PdfViewer.Inject(
23+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
24+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection,
25+
ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner, ej.pdfviewer.PageOrganizer
26+
);
27+
28+
var pdfviewer = new ej.pdfviewer.PdfViewer();
29+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
30+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
31+
pdfviewer.enablePageOrganizer = true;
32+
pdfviewer.appendTo('#PdfViewer');
33+
34+
{% endhighlight %}
35+
{% highlight js tabtitle="Server-Backed" %}
36+
37+
ej.pdfviewer.PdfViewer.Inject(
38+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
39+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection,
40+
ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner, ej.pdfviewer.PageOrganizer
41+
);
42+
43+
var pdfviewer = new ej.pdfviewer.PdfViewer();
44+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
45+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
46+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
47+
pdfviewer.enablePageOrganizer = true;
48+
pdfviewer.appendTo('#PdfViewer');
49+
50+
{% endhighlight %}
51+
{% endtabs %}
52+
53+
## Open the page organizer on document load
54+
55+
You can control whether the page organizer dialog opens automatically when a document is loaded using the `isPageOrganizerOpen` property. The default value is `false`.
56+
57+
{% tabs %}
58+
{% highlight js tabtitle="Standalone" %}
59+
60+
ej.pdfviewer.PdfViewer.Inject(
61+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
62+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection,
63+
ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner, ej.pdfviewer.PageOrganizer
64+
);
65+
66+
var pdfviewer = new ej.pdfviewer.PdfViewer();
67+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
68+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
69+
pdfviewer.isPageOrganizerOpen = true;
70+
pdfviewer.appendTo('#PdfViewer');
71+
72+
{% endhighlight %}
73+
{% highlight js tabtitle="Server-Backed" %}
74+
75+
ej.pdfviewer.PdfViewer.Inject(
76+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
77+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection,
78+
ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner, ej.pdfviewer.PageOrganizer
79+
);
80+
81+
var pdfviewer = new ej.pdfviewer.PdfViewer();
82+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
83+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
84+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
85+
pdfviewer.isPageOrganizerOpen = true;
86+
pdfviewer.appendTo('#PdfViewer');
87+
88+
{% endhighlight %}
89+
{% endtabs %}
90+
91+
## Customize page organizer settings
92+
93+
The `pageOrganizerSettings` API allows you to customize the page management functionalities. You can enable or disable actions such as deleting, inserting, rotating, copying, importing, and rearranging pages, as well as configure thumbnail zoom settings. By default, all actions are enabled, and standard zoom settings are applied.
94+
95+
{% tabs %}
96+
{% highlight js tabtitle="Standalone" %}
97+
98+
ej.pdfviewer.PdfViewer.Inject(
99+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
100+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection,
101+
ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner, ej.pdfviewer.PageOrganizer
102+
);
103+
104+
var pdfviewer = new ej.pdfviewer.PdfViewer();
105+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
106+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
107+
pdfviewer.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}
108+
pdfviewer.appendTo('#PdfViewer');
109+
110+
{% endhighlight %}
111+
{% highlight js tabtitle="Server-Backed" %}
112+
113+
ej.pdfviewer.PdfViewer.Inject(
114+
ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Navigation, ej.pdfviewer.Annotation,
115+
ej.pdfviewer.LinkAnnotation, ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection,
116+
ej.pdfviewer.TextSearch, ej.pdfviewer.FormFields, ej.pdfviewer.FormDesigner, ej.pdfviewer.PageOrganizer
117+
);
118+
119+
var pdfviewer = new ej.pdfviewer.PdfViewer();
120+
pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
121+
pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
122+
pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib';
123+
pdfviewer.pageOrganizerSettings = {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}
124+
pdfviewer.appendTo('#PdfViewer');
125+
126+
{% endhighlight %}
127+
{% endtabs %}
128+
129+
## Open the page organizer dialog
130+
131+
The `openPageOrganizer` method programmatically opens the page organizer dialog, providing access to page management tools.
132+
133+
```html
134+
<button id="openPageOrganizer">Open PageOrganizer Pane</button>
135+
```
136+
137+
```js
138+
document.getElementById('openPageOrganizer').addEventListener('click', function () {
139+
viewer.pageOrganizer.openPageOrganizer();
140+
});
141+
```
142+
143+
## Close the page organizer dialog
144+
145+
The `closePageOrganizer` method programmatically closes the page organizer dialog.
146+
147+
```html
148+
<button id="closePageOrganizer">Close PageOrganizer Pane</button>
149+
```
150+
151+
```js
152+
document.getElementById('closePageOrganizer').addEventListener('click', function () {
153+
viewer.pageOrganizer.closePageOrganizer();
154+
});
155+
```

0 commit comments

Comments
 (0)