Organize Pages Events in ASP.NET Core PDF Viewer

28 Feb 20265 minutes to read

The PDF Viewer provides events to track and respond to actions within the page organizer, allowing for the customization of page manipulation features.

pageOrganizerSaveAs

The pageOrganizerSaveAs event fires when a save action occurs in the page organizer.

  • Occurs when the Save as button in the page organizer toolbar is clicked after modifying the document structure.

Event arguments provide the save event information:

  • fileName: The name of the currently loaded PDF document.
  • downloadDocument: A base64 string of the modified PDF document data.
  • cancel: A boolean that, when set to true, prevents the default save action from proceeding.
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageOrganizerSaveAs="pageOrganizerSaveAs">
    </ejs-pdfviewer>
</div>

<script>
    function pageOrganizerSaveAs(args) {
        console.log('File Name is' + args.fileName);
        console.log('Document data' + args.downloadDocument);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageOrganizerSaveAs="pageOrganizerSaveAs">
    </ejs-pdfviewer>
</div>

<script>
    function pageOrganizerSaveAs(args) {
        console.log('File Name is' + args.fileName);
        console.log('Document data' + args.downloadDocument);
    }
</script>

pageOrganizerZoomChanged

The pageOrganizerZoomChanged event is triggered when the zoom level of the page organizer is changed.

  • 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.

Event arguments:

  • previousZoomValue: The previous zoom value.
  • currentZoomValue: The current zoom value.
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })" 
                   pageOrganizerZoomChanged="pageOrganizerZoomChanged">
    </ejs-pdfviewer>
</div>

<script>
    function pageOrganizerZoomChanged(args) {
        console.log('Previous Zoom Value is' + args.previousZoom);
        console.log('Current Zoom Value is' + args.currentZoom);
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   style="height:600px"
                   serviceUrl="/api/PdfViewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/form-designer.pdf"
                   pageOrganizerSettings="@(new {CanDelete= false, CanInsert= false, CanRotate= false, canCopy= false, canRearrange= false, canImport= false, imageZoom= 1, showImageZoomingSlider= true, imageZoomMin= 1, imageZoomMax= 5 })" 
                   pageOrganizerZoomChanged="pageOrganizerZoomChanged">
    </ejs-pdfviewer>
</div>

<script>
    function pageOrganizerZoomChanged(args) {
        console.log('Previous Zoom Value is' + args.previousZoom);
        console.log('Current Zoom Value is' + args.currentZoom);
    }
</script>