New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Signing Pdf Documents

  • Brush:
    Pick Color(Current Color is #000000)
  • Stroke
    • Thin Line
    • Thick Line
  • Background:
    Pick Color(Current Color is #FFFFFF)
Add your Signature and Export the PDF File

This demo about the Telerik UI for ASP.NET AJAX RadSignature component demonstrates how to save the Signature within a PDF file.

It makes use of the capabilities provided by the Telerik Document Processing Libraries to extract the PDF file within a memory file and then re-apply the Signature bytes to create a new PDF document.

The content of the Signature component is converted to PDF and its base64 string representation with the help of a Telerik UI for ASP.NET AJAX RadClientExportManager

The initial PDF file is conveniently displayed to the user with another component called Telerik UI for ASP.NET AJAX RadPdfViewer. This component also provides a built-in Download Button which can be used to Save the new PDF document with the new Signature applied.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="Telerik.Web.Examples.Signature.SigningPdfDocuments.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js"></script>
    <script type="text/javascript">
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';
    </script>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadCodeBlock>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadPdfViewer1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1" OnClientPdfExporting="clientPdfExporting"></telerik:RadClientExportManager>

    <div class="demo-containers">
        <div class="demo-container">

            <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="700px">
                <PdfjsProcessingSettings>
                    <FileSettings Url="Documents/Document.pdf" />
                </PdfjsProcessingSettings>
            </telerik:RadPdfViewer>

        </div>
        <div class="demo-container size-medium no-bg" runat="server">
            <div class="signature-container">
                <telerik:RadToolBar runat="server" ID="RadToolBar1" AutoPostBack="false" OnClientButtonClicked="clientToolBarButtonClicked">
                    <Items>
                        <telerik:RadToolBarButton>
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <asp:Label Text="Brush:" Height="100%" runat="server" /></td>
                                        <td>
                                            <telerik:RadColorPicker RenderMode="Lightweight" AutoPostBack="false" OnClientColorChange="clientBrushColorChange" runat="server"
                                                SelectedColor="#000" ID="RadColorPicker1" ShowIcon="true" Preset="Standard">
                                            </telerik:RadColorPicker>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarDropDown Text="Stroke">
                            <Buttons>
                                <telerik:RadToolBarButton Text="Thin Line" Value="thin"></telerik:RadToolBarButton>
                                <telerik:RadToolBarButton Text="Thick Line" Value="thick"></telerik:RadToolBarButton>
                            </Buttons>
                        </telerik:RadToolBarDropDown>
                        <telerik:RadToolBarButton>
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <asp:Label Text="Background:" Height="100%" runat="server" /></td>
                                        <td>
                                            <telerik:RadColorPicker RenderMode="Lightweight" AutoPostBack="false" OnClientColorChange="clientBackGroundColorChange" runat="server"
                                                SelectedColor="#FFFFFF" ID="RadColorPicker2" ShowIcon="true" Preset="Standard">
                                            </telerik:RadColorPicker>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>

                <div class="signature-wrapper">
                    <telerik:RadSignature runat="server" ID="RadSignature1" Maximizable="false" Height="150" Width="100%" Rounded="None"></telerik:RadSignature>
                </div>
                <div class="notes">
                    Add your Signature and Export the PDF File
                </div>
                <div class="notes">
                    <telerik:RadButton runat="server" ID="RadButton1" Text="Place Your Signature" Icon-PrimaryIconCssClass="rbSave" AutoPostBack="false" Primary="true" OnClientClicked="processSignature" />
                </div>
            </div>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance