We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to integrate Digital signature in the PDF Viewer?

Platform: ASP.NET Web Forms |
Control: PdfViewer |
Published Date: April 13, 2018 |
Last Revised Date: June 7, 2019

PDF Viewer

The ASP.NET MVC PDF Viewer control supports viewing, reviewing, and printing PDF files in ASP.NET MVC applications. The hyperlink and table of contents support provides easy navigation within and outside the PDF files. The form-filling support provides a platform to fill, flatten, save, and print PDF files with AcroForm. PDF files can be reviewed with text markup annotation tools.

Integrating Digital Signature

Currently, PDF viewer does not support Digital Signature, but you can integrate Digital Signature in the PDF viewer control.

The following code illustrates how to upload the PdfCertificate(.pfx) file on the ‘PageClick’ event of the PDF viewer and send the uploaded file to the Server side using Ajax request.

JavaScript

   <script type="text/javascript">
        var xPos= null;
        var yPos= null;
        var jsonResult = new Object();
        document.getElementById('fileUpload').addEventListener('change', readFile, false);
       // Uploads the digital signature
        function readFile(evt) {
            var upoadedFiles = evt.target.files;
            var uploadedFile = upoadedFiles[0];
            var reader = new FileReader();
            reader.readAsDataURL(uploadedFile);
            reader.onload = function () {
         //Sends the uploaded data as base64 string, X-Coordinate, Y-Coordinate and Page Number to the sever side using the Ajax request
                var obj = $("#pdfviewer").data("ejPdfViewer");
                var uploadedFileUrl = this.result;
                jsonResult["pageNum"] = obj._currentPage;
                jsonResult["sign"] = (this.result).split(",")[1];
                jsonResult["xPos"] = xPos;
                jsonResult["yPos"] = yPos;
                jsonResult["id"] = obj._fileId;
                $.ajax({
                    url: '../api/PdfViewer/SignatureDownload',
                    method: 'POST',
                   crossDomain: true,
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    data: JSON.stringify(jsonResult),
                    traditional: true,
                    success: function (data) {
                         alert(data);
                    },
                    error: function (jqXHR, textStatus) {
                        alert("Request failed: " + textStatus);
                    }
                });
            }
        }
          $(function () {
               //Hooks the pageClick event to the PDF Viewer
               var _ejPdfViewer = $("#pdfviewer").data("ejPdfViewer");
                _ejPdfViewer.model.pageClick = "pageClicked";
            });
            function pageClicked(sender) {
                xPos = sender.XCoordinate;
                yPos = sender.YCoordinate;
                var _ejPdfViewer = $("#pdfviewer").data("ejPdfViewer");
               $('#fileUpload').click();
                }
    </script>

 

The following code illustrates how to integrate the uploaded Digital Signature file with the PDF document.

 

C#

public object SignatureDownload(Dictionary<string, string> jsonResult)
        {
            PdfViewerHelper helper = new PdfViewerHelper();           
            object pdfData = (object)helper.GetDocumentData(jsonResult);              
            //Gets the X Coordinate, Y coordinate and Page number from the Json data            
            var x = JsonConvert.DeserializeObject<float>(jsonResult["xPos"]);
            var y = JsonConvert.DeserializeObject<float>(jsonResult["yPos"]);
            var pageNum = JsonConvert.DeserializeObject<float>(jsonResult["pageNum"]);
            byte[] byteArray = Convert.FromBase64String(jsonResult["sign"]);
            MemoryStream stream = new MemoryStream(byteArray);
            //storing the .pfx file locally.                                                        File.WriteAllBytes(HttpContext.Current.Server.MapPath("~/Data/PDFsign.pfx"), byteArray);
          //Get the document stream as base64 string            
           var propertyInfo = pdfData.GetType().GetProperty("documentStream");
            string value = propertyInfo.GetValue(pdfData, null).ToString();
            byte[] byteContents = Convert.FromBase64String(value);
            MemoryStream memoryStreams = new MemoryStream(byteContents);
            //load the document again for including the signature.
            PdfLoadedDocument pdfldoc = new PdfLoadedDocument(memoryStreams);
            PdfLoadedPage page = pdfldoc.Pages[(int)pageNum-1] as PdfLoadedPage;
            PdfSignatureField signatureField = new PdfSignatureField(page, "SignatureField");
           //Adding bounds for the signature field.
            signatureField.Bounds = new RectangleF((float)x, (float)y, 100, 100);
            signatureField.Signature = new PdfSignature();
            //Adds certificate to the signature field.
            signatureField.Signature.Certificate = new PdfCertificate(HttpContext.Current.Server.MapPath("~/Data/PDFsign.pfx"), "syncfusion");           
            signatureField.Signature.Reason = "I am author of this document";
            //Adds the field.
            pdfldoc.Form.Fields.Add(signatureField);
            //Saves the certified PDF document in Data folder.
           pdfldoc.Save(HttpContext.Current.Server.MapPath("~/Data/Output.pdf"));                        
           pdfldoc.Close(true);
            string output ="Document is saved in " + HttpContext.Current.Server.MapPath("~/Data");
            return output;                  
        }

 

Sample link:

 

Find the sample for integrating the Digital Signature to the PDF viewer control from http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1094583529

The previous sample uploads the Digital Signature(PdfCertificate(.pfx)) on the ‘PageClick’ event of the PDF Viewer and sends the uploaded file to the server side using the Ajax request. In the server side the digital signature is added to the PDF document as a signature field using the Syncfusion Pdf library, then the PDF document along with the signature is saved locally in the server side.

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon