PdfViewer: send changes back to server

[Domenico Thöni]

Hi there,

is there a possibility to add a save Button to the viewer to send the changed document back to the server?

Preferably I'd like to get the changes as they happen (adding / changing an annotation for example) to be sent back to the server instead of the whole document. This would prevent a condition where the last one that saves the documents gets all his changes into the document on the server side.

I'm using Angular on the frontend and a ASP.NET Core ApiController on the backend.

kind regards

Menico

[Dhivyabharathi Mohan]

Hi Domenico,

 

 

Thank you for contacting Syncfusion support. 

 

 

We cannot save only the changes which we made in the PDF document like adding or editing the annotations in the server. However, we can save the entire document in the server using the below code snippet. We have shared the UG documentation for your reference. 

 

 

Web Service: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Web_Service1318414652  

 

 

Run the web service and then run the Angular sample. 

 

 

Angular: https://stackblitz.com/edit/angular-1cders?file=app.component.ts 

 

 

Code snippet: 

 

public ActionResult SaveDocument([FromBody] Dictionary<string, string> jsonObject) 

        { 

            PdfRenderer pdfviewer = new PdfRenderer(_cache); 

            string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject); 

            string base64String = documentBase.Split(new string[] { "data:application/pdf;base64," }, StringSplitOptions.None)[1]; 

            if (base64String != null || base64String != string.Empty) 

            { 

                byte[] byteArray = Convert.FromBase64String(base64String); 

 

                MemoryStream ms = new MemoryStream(byteArray); 

                var path = _hostingEnvironment.ContentRootPath; 

                System.IO.File.WriteAllBytes(path + "/ouptut.pdf", byteArray); 

            } 

            return Content(string.Empty); 

        } 

 

 

 

UG documentation: https://ej2.syncfusion.com/aspnetcore/documentation/pdfviewer/how-to/save-original-document-at-the-server-side/  

 

 

Kindly try this and revert us, if you have any concerns. 

 

 

Regards, 

Dhivya. 

[Domenico Thöni]

Thanks for the answer. I'm currently testing it.

Is there a way to:

1. Get rid of the openFile button.
2. Put the "saveDocument" button there instead.
3. Enable the saveDocument button only if there are pending changes to the document.

[Domenico Thöni]

Got the first one.

But do I really have to create a custom toolbar with all the elements just to add one simple custom button?

[Domenico Thöni]

Additionally the SaveDocument does not trigger the ajaxRequestSuccess / ajaxRequestFailure.

[Dhivyabharathi Mohan]

Hi Domenico, 

 

 

Please find the details, 

 

 

 

Query	Details
Is there a way to:  Get rid of the openFile button.  Put the "saveDocument" button there instead.  Enable the saveDocument button only if there are pending changes to the document.  But do I really have to create a custom toolbar with all the elements just to add one simple custom button?	There is no direct support to add the items in the toolbar. However, you can add the items to the existing toolbar as a workaround using the created event after loading the PDF Viewer component. And using the toolbarItems property in the toolbarSettings property, you can hide the Open Icon present in the toolbar. We have shared the sample for your reference.      UG documentation: https://ej2.syncfusion.com/angular/documentation/pdfviewer/toolbar/      Sample: https://stackblitz.com/edit/angular-1cders-gypitl?file=app.component.html          Code snippet to hide the open icon in the toolbar:      public toolbarSettings = {      toolbarItems: [        'PageNavigationTool',        'PanTool',        'SelectionTool',        'SearchOption',        'PrintOption',        'DownloadOption',        'UndoRedoTool',        'AnnotationEditTool',        'FormDesignerEditTool',        'CommentTool',        'SubmitForm',      ],    };          Kindly try this and let us know if you have any concerns about this.
Additionally the SaveDocument does not trigger the ajaxRequestSuccess / ajaxRequestFailure.	PDF Viewer triggers the ajaxRequestSuccess or ajaxRequestFailure events for all the server action methods. Since an empty string is returned in the saveDocument() method the ajaxRequestSuccess event is not triggered. However, we can use the downloadEnd event to get the success message once the document is saved successfully.        Note: If we return the base64 string from the saveDocument method then the ajaxRequestSuccess event will be triggered, and the PDF document will be downloaded.        Code snippet for downloadEnd event:         <ejs-pdfviewer        id="pdfViewer"        [serviceUrl]="service"        [documentPath]="document"        [toolbarSettings]="toolbarSettings"        (created)="created($event)"        (downloadEnd)="downloadEnd($event)"        style="height:640px;display:block"      ></ejs-pdfviewer>          downloadEnd(args) {      console.log(args);    }               Please revert to us, if you need further assistance.

 

 

 

Regards, 

Dhivya.