Skip to content

965510: Updated Page Organize Zoom UG documentation for Hot-fix branch #4346

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 3 commits into from
Jul 3, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 22 additions & 15 deletions ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/organize-pdf.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,13 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota
* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.

![Alt text](./images/rotate.gif)

### Rearranging PDF pages

You can easily change the sequence of pages within your document using the drag and drop method:

* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.

![Alt text](./images/rearrange.gif)
![Alt text](./images/rotate-rearrange.gif)

### Inserting new pages

Expand All @@ -44,24 +42,20 @@ Effortlessly add new pages to your document with the following options:
* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.

![Alt text](./images/insert.gif)

### Deleting PDF pages

Removing unwanted pages from your document is straight forward:

* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.

![Alt text](./images/delete.gif)

### Copying PDF pages

Duplicate the pages within your PDF document effortlessly:

* `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.

![Alt text](./images/copy.gif)
![Alt text](./images/insert-delete-copy.gif)

### Importing a PDF Document

Expand All @@ -75,7 +69,19 @@ Seamlessly import a PDF document into your existing document:

Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.

![Alt text](./images/selectall.gif)
![Alt text](./images/selectall.png)

### Zooming Page Thumbnails

Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:

* Increase or decrease the size of page thumbnails using the zoom slider
* See more details on pages when zoomed in
* View more pages simultaneously when zoomed out

This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.

![Alt text](./images/zoomOrganize.png)

### Real-time updates

Expand Down Expand Up @@ -125,20 +131,20 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
{% endhighlight %}
{% endtabs %}

**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages. By default, all these actions are enabled.
**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.

{% tabs %}
{% highlight html tabtitle="Standalone" %}

<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true }).Render()
@Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 }).Render()
</div>

{% endhighlight %}
{% highlight html tabtitle="Server-Backed" %}

<div style="width:100%;height:600px">
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true }).Render()
@Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 }).Render()
</div>

{% endhighlight %}
Expand Down Expand Up @@ -175,7 +181,7 @@ import { LinkAnnotationService, BookmarkViewService,
export class AppComponent implements OnInit {
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
public resource: string = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true };
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 };
ngOnInit(): void {
}
}
Expand Down Expand Up @@ -211,7 +217,7 @@ import { LinkAnnotationService, BookmarkViewService,
export class AppComponent implements OnInit {
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
public service: string = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true };
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 };
ngOnInit(): void {
}
}
Expand Down Expand Up @@ -298,8 +304,9 @@ The following keyboard shortcuts are available at the organize pages dialog.

* **Ctrl+Z** : Undo the last action performed.
* **Ctrl+Y** : Redo the action that was undone
* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.

![Alt text](./images/undo-redo.gif)
![Alt text](./images/undo-redo.png)

#### Conclusion

Expand Down
33 changes: 20 additions & 13 deletions ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/organize-pdf.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,13 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota
* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.

![Alt text](./images/rotate.gif)

### Rearranging PDF pages

You can easily change the sequence of pages within your document using the drag and drop method:

* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.

![Alt text](./images/rearrange.gif)
![Alt text](./images/rotate-rearrange.gif)

### Inserting new pages

Expand All @@ -44,24 +42,20 @@ Effortlessly add new pages to your document with the following options:
* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.

![Alt text](./images/insert.gif)

### Deleting PDF pages

Removing unwanted pages from your document is straight forward:

* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.

![Alt text](./images/delete.gif)

### Copying PDF pages

Duplicate the pages within your PDF document effortlessly:

* `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.

![Alt text](./images/copy.gif)
![Alt text](./images/insert-delete-copy.gif)

### Importing a PDF Document

Expand All @@ -75,7 +69,19 @@ Seamlessly import a PDF document into your existing document:

Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.

![Alt text](./images/selectall.gif)
![Alt text](./images/selectall.png)

### Zooming Page Thumbnails

Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:

* Increase or decrease the size of page thumbnails using the zoom slider
* See more details on pages when zoomed in
* View more pages simultaneously when zoomed out

This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.

![Alt text](./images/zoomOrganize.png)

### Real-time updates

Expand Down Expand Up @@ -135,7 +141,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
{% endhighlight %}
{% endtabs %}

**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages. By default, all these actions are enabled.
**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.

{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
Expand All @@ -144,7 +150,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
style="height:600px"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
pageOrganizerSettings= pageOrganizerSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerPageOrganizerSettings
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true })">
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 })">
</ejs-pdfviewer>
</div>
{% endhighlight %}
Expand All @@ -155,7 +161,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
serviceUrl="/api/PdfViewer"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
pageOrganizerSettings= pageOrganizerSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerPageOrganizerSettings
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true })">
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 })">
</ejs-pdfviewer>
</div>
{% endhighlight %}
Expand Down Expand Up @@ -294,8 +300,9 @@ The following keyboard shortcuts are available at the organize pages dialog.

* **Ctrl+Z** : Undo the last action performed.
* **Ctrl+Y** : Redo the action that was undone
* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.

![Alt text](./images/undo-redo.gif)
![Alt text](./images/undo-redo.png)

#### Conclusion

Expand Down
Binary file removed ej2-asp-core-mvc/pdfviewer/images/copy.gif
Binary file not shown.
Binary file removed ej2-asp-core-mvc/pdfviewer/images/delete.gif
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ej2-asp-core-mvc/pdfviewer/images/insert.gif
Binary file not shown.
Binary file removed ej2-asp-core-mvc/pdfviewer/images/rearrange.gif
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ej2-asp-core-mvc/pdfviewer/images/rotate.gif
Binary file not shown.
Binary file removed ej2-asp-core-mvc/pdfviewer/images/selectall.gif
Binary file not shown.
Binary file added ej2-asp-core-mvc/pdfviewer/images/selectall.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ej2-asp-core-mvc/pdfviewer/images/undo-redo.gif
Binary file not shown.
Binary file added ej2-asp-core-mvc/pdfviewer/images/undo-redo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.