Skip to content

Commit b95fc62

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
1010807: Revamped organize pages files using diataxis approach
1 parent 757e215 commit b95fc62

9 files changed

Lines changed: 452 additions & 96 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1013,7 +1013,13 @@
10131013
<ul>
10141014
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/overview">Overview</a></li>
10151015
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/programmatic-support">Programmatic Support</a></li>
1016-
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/ui-interactions">UI Interactions</a></li>
1016+
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/copy-pages">Copy pages</a></li>
1017+
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/import-pages">Import pages</a></li>
1018+
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/insert-blank-pages">Insert blank pages</a></li>
1019+
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/remove-pages">Remove pages</a></li>
1020+
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/reorder-pages">Reorder pages</a></li>
1021+
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/rotate-pages">Rotate pages</a></li>
1022+
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/zoom-thumbnails">Zoom page thumbnails</a></li>
10171023
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/toolbar">Toolbar</a></li>
10181024
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/extract-pages">Extract Pages</a></li>
10191025
<li><a href="/document-processing/pdf/pdf-viewer/react/organize-pages/mobile-view">Mobile View</a></li>

‎Document-Processing/PDF/PDF-Viewer/react/organize-pages/copy-pages.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
layout: post
3+
title: Copy pages in Organize Pages in React PDF Viewer | Syncfusion
4+
description: How to duplicate pages using the Organize Pages UI in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Copy Pages in React PDF Viewer
12+
13+
## Overview
14+
15+
This guide explains how to duplicate pages within the current PDF using the Organize Pages UI.
16+
17+
**Outcome**: Copied pages are inserted adjacent to the selection and included in exported PDFs.
18+
19+
## Prerequisites
20+
21+
- EJ2 React PDF Viewer installed
22+
- PDF Viewer injected with `PageOrganizer` module
23+
24+
## Steps
25+
26+
1. Open the Organize Pages view
27+
28+
- Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
29+
30+
2. Select pages to duplicate
31+
32+
- Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
33+
34+
3. Duplicate selected pages
35+
36+
- Click the **Copy Pages** button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails.
37+
38+
4. Duplicate multiple pages at once
39+
40+
- When multiple thumbnails are selected, the Copy action duplicates every selected page in order.
41+
42+
![Copy pages in organize view](../images/organize-copy.png)
43+
44+
5. Undo or redo changes
45+
46+
- Use **Undo** (Ctrl+Z) or **Redo** to revert or reapply recent changes.
47+
48+
![Undo and redo Organize Pages toolbar](../images/undo-redo.png)
49+
50+
6. Persist duplicated pages
51+
52+
- Click **Save** or **Save As** to include duplicated pages in the saved/downloaded PDF.
53+
54+
## Expected result
55+
56+
- Selected pages are duplicated and included in the saved PDF.
57+
58+
## Troubleshooting
59+
60+
- If duplicates are not created: verify that the changes are persisted using **Save**.
61+
62+
## Related topics
63+
64+
- [Organize pages toolbar customization](./toolbar)
65+
- [Organize pages event reference](./events)

‎Document-Processing/PDF/PDF-Viewer/react/organize-pages/import-pages.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
---
2+
layout: post
3+
title: Import pages in Organize Pages in React PDF Viewer | Syncfusion
4+
description: How to import pages from another PDF into the current document using the Organize Pages UI in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Import pages using the Organize Pages tool
12+
13+
## Overview
14+
15+
This guide explains how to import pages from another PDF into the current document using the **Organize Pages** UI in the EJ2 React PDF Viewer.
16+
17+
**Outcome**: Imported pages appear as thumbnails and are merged into the original document when saved or exported.
18+
19+
## Prerequisites
20+
21+
- EJ2 React PDF Viewer installed
22+
- PDF Viewer is injected with `PageOrganizer` service
23+
- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server-backed) configured when required
24+
25+
## Steps
26+
27+
1. Open the Organize Pages view
28+
29+
- Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
30+
31+
2. Start import
32+
33+
- Click **Import Document** and choose a valid PDF file from your local file system.
34+
35+
3. Place imported pages
36+
37+
- Imported pages appear as thumbnails. If a thumbnail is selected, the imported pages are inserted to the right of the selection; otherwise they are appended at the start of the document.
38+
39+
![Import PDF animation showing thumbnail insertion](../images/import.gif)
40+
41+
4. Persist changes
42+
43+
- Click **Save** or **Save As** (or download) to persist the merged document.
44+
45+
## Expected result
46+
47+
- Imported pages display as a single thumbnail in Organize Pages and are merged into the original PDF when saved or exported.
48+
49+
## Troubleshooting
50+
51+
- **Import fails**: Ensure the selected file is a valid PDF and the browser file picker is permitted.
52+
- **Imported pages not visible**: Confirm that the import is persisted using **Save** or **Save As**.
53+
- **Import option disabled**: Ensure [`pageOrganizerSettings.canImport`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canimport) is set to `true` to enable import option.
54+
55+
## Related topics
56+
57+
- [Organize pages toolbar customization](./toolbar)
58+
- [Organize pages event reference](./events)

‎Document-Processing/PDF/PDF-Viewer/react/organize-pages/insert-blank-pages.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
layout: post
3+
title: Insert blank pages in Organize Pages in React PDF Viewer | Syncfusion
4+
description: How to insert blank pages into a PDF using the Organize Pages UI in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Insert blank pages using the Organize Pages tool
12+
13+
## Overview
14+
15+
This guide describes inserting new blank pages into a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer.
16+
17+
**Outcome**: A blank page is added at the chosen position and will appear in thumbnails and exports.
18+
19+
## Prerequisites
20+
21+
- EJ2 React PDF Viewer installed
22+
- `PageOrganizer` services injected into `PdfViewerComponent`
23+
- [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode configured as required
24+
25+
## Steps
26+
27+
1. Open the Organize Pages view
28+
29+
- Click the **Organize Pages** button in the viewer navigation toolbar to open the panel.
30+
31+
2. Select insertion point
32+
33+
- Hover over the thumbnail before or after which you want the blank page added.
34+
35+
3. Insert a blank page
36+
37+
- Click the **Insert Left** / **Insert Right** option and choose the position (Before / After). A new blank thumbnail appears in the sequence.
38+
39+
![Insert pages in Organize Pages](../images/organize-insert.png)
40+
41+
4. Adjust and confirm
42+
43+
- Reposition or remove the inserted blank page if needed using drag-and-drop or delete options.
44+
45+
5. Persist the change
46+
47+
- Click **Save** or **Save As** to include the blank page in the exported PDF.
48+
49+
## Expected result
50+
51+
- A blank page thumbnail appears at the chosen position and is present in any saved or downloaded PDF.
52+
53+
## Troubleshooting
54+
55+
- **Organize Pages button missing**: Verify `PageOrganizer` is included in `Inject` and `Toolbar` is enabled.
56+
- **Inserted page not saved**: Confirm [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) is configured for your selected processing mode.
57+
- **Insert options disabled**: Ensure [`pageOrganizerSettings.canInsert`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#caninsert) is set to `true` to enable insert option.
58+
59+
## Related topics
60+
61+
- [Organize pages toolbar customization](./toolbar)
62+
- [Organize pages event reference](./events)
63+
- [Remove pages in Organize Pages](./remove-pages)
64+
- [Reorder pages in Organize Pages](./remove-pages)

‎Document-Processing/PDF/PDF-Viewer/react/organize-pages/remove-pages.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
layout: post
3+
title: Remove pages using Organize Pages in React PDF Viewer | Syncfusion
4+
description: How to remove one or more pages from a PDF using the Organize Pages view in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Remove pages using the Organize Pages tool
12+
13+
## Overview
14+
15+
This guide shows how to delete single or multiple pages from a PDF using the **Organize Pages** UI in the EJ2 React PDF Viewer.
16+
17+
**Outcome**: You will remove unwanted pages and save or download the updated PDF.
18+
19+
## Prerequisites
20+
21+
- EJ2 React PDF Viewer installed in your project
22+
- Basic PDF Viewer setup ([`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) for server-backed mode)
23+
24+
## Steps
25+
26+
1. Open the Organize Pages view
27+
28+
- Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
29+
30+
2. Select pages to remove
31+
32+
- Click a thumbnail to select a page. Use Shift+click or Ctrl+click to select multiple pages. Use the **Select all** button to select every page.
33+
34+
3. Delete selected pages
35+
36+
- Click the **Delete Pages** icon in the Organize Pages toolbar to remove the selected pages. The thumbnails update immediately to reflect the deletion.
37+
38+
- Delete a single page directly from its thumbnail: hover over the page thumbnail to reveal the per-page delete icon, then click that icon to remove only that page.
39+
40+
![Delete selected pages using the Organize Pages delete control](../images/organize-delete.png)
41+
42+
4. Multi-page deletion
43+
44+
- When multiple thumbnails are selected, the Delete action removes all selected pages at once.
45+
46+
5. Undo or redo deletion
47+
48+
- Use **Undo** (Ctrl+Z) to revert the last deletion.
49+
- Use **Redo** (Ctrl+Y) to revert the last undone deletion.
50+
51+
![Undo and redo Organize Pages toolbar](../images/undo-redo.png)
52+
53+
6. Save the PDF after deletion
54+
55+
- Click **Save** to apply changes to the currently loaded document, or **Save As** / **Download** to download a copy with the removed pages permanently applied.
56+
57+
## Expected result
58+
59+
- Selected pages are removed from the document immediately in the Organize Pages dialog.
60+
- After clicking **Save** or **Save As**, the resulting PDF reflects the deletions.
61+
62+
## Troubleshooting
63+
64+
- **Delete button disabled**: Ensure `PageOrganizer` is injected and [`pageOrganizerSettings.canDelete`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#candelete) is not set to `false`.
65+
- **Selection not working**: Verify that the Organize Pages dialog has focus; use Shift+click for range selection.
66+
67+
## Related topics
68+
69+
- [Organize pages toolbar customization](./toolbar)
70+
- [Organize pages event reference](./events)

‎Document-Processing/PDF/PDF-Viewer/react/organize-pages/reorder-pages.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
layout: post
3+
title: Reorder pages in Organize Pages in React PDF Viewer | Syncfusion
4+
description: How to rearrange pages using drag-and-drop and grouping in the Organize Pages UI of the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Reorder pages using the Organize Pages view
12+
13+
## Overview
14+
15+
This guide describes how to rearrange pages in a PDF using the **Organize Pages** UI.
16+
17+
**Outcome**: Single or multiple pages can be reordered and the new sequence is preserved when the document is saved or exported.
18+
19+
## Prerequisites
20+
21+
- EJ2 React PDF Viewer installed
22+
- `Toolbar` and `PageOrganizer` services injected into the viewer
23+
24+
## Steps
25+
26+
1. Open the Organize Pages view
27+
28+
- Click the **Organize Pages** button in the navigation toolbar to open the page thumbnails panel.
29+
30+
2. Reorder a single page
31+
32+
- Drag a thumbnail to the desired position. The thumbnails update instantly to show the new order.
33+
34+
3. Reorder multiple pages
35+
36+
- Select multiple thumbnails using Ctrl or Shift, then drag the selected group to the new location.
37+
38+
![Rearrange pages animation showing drag-and-drop behavior](../images/rotate-rearrange.gif)
39+
40+
4. Verify and undo
41+
42+
- Use **Undo** / **Redo** options to revert accidental changes.
43+
44+
![Undo and redo Organize Pages toolbar](../images/undo-redo.png)
45+
46+
5. Persist the updated order
47+
48+
- Click **Save** or download the document using **Save As** to persist the new page sequence.
49+
50+
## Expected result
51+
52+
- Thumbnails reflect the new page order immediately and saved / downloaded PDFs preserve the reordered sequence.
53+
54+
## Troubleshooting
55+
56+
- **Thumbnails won't move**: Confirm [`pageOrganizerSettings.canRearrange`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/pageorganizersettingsmodel#canrearrange) is is not set to `false`.
57+
- **Changes not saved**: Verify [`serviceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#serviceurl) (server) or [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) (standalone) is configured correctly.
58+
59+
## Related topics
60+
61+
- [Organize pages toolbar customization](./toolbar)
62+
- [Organize pages event reference](./events)

0 commit comments

Comments
 (0)