Branched from ~ 159889 ~ How can I add a button to the "SfPdfViewerServer" Toolbar with a label "My signature"

[Razvan Iacobescu]

Razvan Iacobescu

Apr 12, 2023 09:38 PM

Thank you! We have manage to create a windows application that sign the document and send it to the web.

My question is how can I add a button to the "SfPdfViewerServer" Toolbar with a label "My signature", and when the user click on it it will be able to draw a rectangle on a pdf page and after that an event will fired like "mouseup", and retrieve the x,y,w,h of the rectangle.

We have created something custom but in this context does not work.

Thank you!

[Visvesvar Venkatesan]

We can add a button externally but not inside a toolbar. To add inside the toolbar you have to create a customized toolbar and add it inside the toolbar.

Kindly find the documentation below for customizing the toolbar.

Documentation: https://blazor.syncfusion.com/documentation/pdfviewer/toolbar-customization

We have provided code Snippet for creating an external button and you can add a rectangle with it.  You can get the annotation details in the annotationAdd event (#AnnotationAddEventArgs).

<div class="control-section">

    <SfButton OnClick="OnClick">Click Here</SfButton>

    <SfPdfViewerServer Width="1060px"  RectangleSettings="@RectangleSettings" @ref="viewer" Height="500px" DocumentPath="@DocumentPath">

        <PdfViewerEvents AnnotationAdded="annotationAdd"  ></PdfViewerEvents>

</SfPdfViewerServer>

</div>

 

@code {

    public string DocumentPath { get; set; } = "wwwroot/data/PDF_Succinctly.pdf";

    SfPdfViewerServer viewer;

    PdfViewerRectangleSettings RectangleSettings = new PdfViewerRectangleSettings { FillColor = "yellow", Opacity = 0.6, StrokeColor = "orange" };

 

    public void OnClick(MouseEventArgs args)

    {

        viewer.SetAnnotationMode(AnnotationType.Rectangle);

   }

 

    public async void annotationAdd(AnnotationAddEventArgs args)

    {

       //JSRuntime.console.log(args);

        await this.JSRuntime.InvokeVoidAsync("console.log", args);

    }

 

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/LOAD_S~2348071370.zip

Kindly try this and let us know if you have any concerns.