View PDF, edit in browser and save on server

Question

I would like to be able to pull an PDF from a SQL server into Viewer, (that works)
Than have the user complete the form and sign the PDF, this works
Than I would like to save the edited form back in the SQL Server.

I am not able to save a edited PDF in the PDFviewer and see only how to save the original PDF.

Vasugi Sivajothi · Answer

Hi Brian,

You can save the edited PDF document in the server side using the below code snippet. We have shared the UG documentation for save the document in the server.

Code snippet:

<button onclick="save()">SaveDocument</button>

function save() {

var pdfViewer = document.getElementById('pdfviewer1').ej2_instances[0];

pdfViewer.serverActionSettings.download = "SaveDocument";

pdfViewer.download();

pdfViewer.serverActionSettings.download = "Download";

}

</script>

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,

Vasugi

foswha · Answer

Excuse me, in your example the document is save as ouput.pdf as I would do if I want to save it with a name that I send from the client. thank you

Dhivyabharathi Mohan · Answer

Hi Foswha, 
 
You can use the ajaxRequestInitiate event to send the extra parameters to the service and utilize it in the save method. We have shared the code snippet for your reference. 
 
 
Code snippet: 
 




 
viewer.ajaxRequestInitiate = (args) => { 
  if (args.JsonData.action == 'SaveDocument') { 
    args.JsonData['path'] = ''; 
    viewer.setJsonData(args.JsonData); 
  } 
}; 
 
 
 
 
Code snippet to use the path argument in the PDFViewerController.cs file: 
 




 
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); 
                jsonObject["path"] = _hostingEnvironment.ContentRootPath; 
                System.IO.File.WriteAllBytes(jsonObject["path"] + "/ouptut.pdf", byteArray); 
            } 
            return Content(string.Empty); 
        } 
 
 
 
 
Kindly try this and revert us, if you have any concerns. 
 
Regards, 
Dhivya.

Zachariah Schulist · Answer

Is there any way to show success message after saving pdf file. I don't want to download the file

Chinnamunia Karthik Chinna Thambi · Answer

Hi Zachariah,We have a downloadEnd event that is triggered after the downloading/saving the document. You can utilize this event to display a success message. Below is the code snippet and sample for implementing this functionality.Code snippet: function downloadEnd(args) { alert("Document saved successfully") } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ShowAlertMessageAfterDownload709294105.zipSteps to show the success message: Run the sample. Click the "SaveDocument" button. This action will save the document in the server location. It will then display an alert message stating "Document saved successfully" within the downloadEnd event.