Signature manuelle d’un fichier PDF avec RadSignature pour ASP.NET AJAX

L’interface utilisateur Telerik pour ASP.NET AJAX RadSignature vous permet d’ajouter une zone de signature aux PDF et inclut des options de personnalisation telles que le pinceau, le trait et la couleur d’arrière-plan. Découvrez comment l’ajouter à votre PDF.

Dans le monde des signatures numériques, la possibilité de signer des documents PDF change la donne. Et avec le RadSignature composant de Progress
Interface utilisateur Telerik pour ASP.NET AJAXce processus n’a jamais été aussi simple !

Lisez la suite pour savoir comment enregistrer sans effort une signature dans un fichier PDF en utilisant le Bibliothèques de traitement de documents Telerik (DPL) et de présenter le document signé dans le champ RadPdfViewer.

Que vous soyez un développeur souhaitant intégrer une signature numérique dans votre projet ou que vous cherchiez simplement à explorer le monde des signatures numériques, cet article de blog est le point de départ idéal.

Rejoignez-nous pour vous montrer comment :

• Extraire la signature appliquée au format PDF
• Créer un nouveau document PDF qui inclut votre signature
• Charger le document signé dans un PdfViewer

Avec l’aide de Interface utilisateur Telerik pour ASP.NET AJAX, nous montrerons comment convertir le contenu de la signature en PDF et en représentation sous forme de chaîne base64. Et le meilleur, vous pouvez prévisualiser le fichier PDF à l’aide de la fonction intégrée RadPdfViewer, et même enregistrer le nouveau document d’un simple clic. Alors pourquoi attendre ? Plongeons dans le monde des signatures numériques et explorons les possibilités avec RadSignature pour ASP.NET AJAX.

Conditions préalables

Commençons par déclarer les contrôles nécessaires sur la page :

1. RadSignature est nécessaire pour appliquer la signature que nous voulons transférer dans le fichier PDF.

ASPX

<telerik:RadSignature  runat="server"  ID="RadSignature1"  Maximizable="false"  Height="150"  Width="100%"  Rounded="None"></telerik:RadSignature>

2. RadPdfViewer est nécessaire pour afficher le fichier PDF sur lequel nous travaillons actuellement tout en exposant certaines de ses fonctionnalités intégrées utiles telles que le zoom, le téléchargement, l’impression, la recherche, la sélection à bascule et la pagination.

ASPX

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

Dans cet exemple, nous transmettons le fichier PDF non signé par un chemin relatif via les FileSettings de PdfViewer. Pourtant, il existe plusieurs autres façons de remplir la visionneuse. Les plus courants que vous pouvez trouver expliqués dans le 5 différentes approches de configuration du contenu dans RadPdfViewer pour ASP.NET AJAX article de blog.

3. RadToolBar contient les boutons et les sélecteurs de couleurs nécessaires qui permettent aux utilisateurs de personnaliser l’apparence de la signature et de l’aligner par eux-mêmes sur leurs préférences personnelles.

ASPX

<telerik:RadToolBar runat="server" ID="RadToolBar1" AutoPostBack="false" OnClientButtonClicked="clientToolBarButtonClicked">
    <Items>
        ...
    </Items>
</telerik:RadToolBar>

La barre d’outils n’est pas sous le feu des projecteurs maintenant, nous n’allons donc pas creuser dans ses détails maintenant. C’est ici juste pour adoucir l’UX de la démo.

4. RadButton est nécessaire pour déclencher l’ensemble du processus avant de signer le document et de le prévisualiser.

ASPX

<telerik:RadButton  runat="server"  ID="RadButton1"  Text="Place Your Signature"  Icon-PrimaryIconCssClass="rbSave"  AutoPostBack="false"  Primary="true"  OnClientClicked="processSignature"  />

Tous les héros ne portent pas de capes, n’est-ce pas ? Juste comme ça, tous les composants ne sont pas sur le devant de la scène – certains restent dans les coulisses mais sont toujours nécessaires :

5. RadClientExportManager est nécessaire pour exporter la signature appliquée au format PDF et obtenir ses données sous forme de chaîne base64.

ASPX

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

6. RadAjaxManager est là pour améliorer l’expérience utilisateur en effectuant des requêtes AJAX pour transmettre la signature au serveur et le pdf manipulé au navigateur.

ASPX

<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>

7. Panneau de chargement RadAjax est nécessaire pour afficher un graphique d’indicateur de progression lors du traitement des données côté serveur.

ASPX

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

Outre tous les composants mentionnés ci-dessus, nous devrons également référencer les bibliothèques de traitement de documents Telerik (DPL) et plus particulièrement les assemblages de bibliothèques RadPdfProcessing nécessaires à la manipulation du contenu d’un fichier PDF. Retrouvez la liste des fichiers .dll requis pour le RadPdfProcessing dans le page de documentation dédiée.

Une fois les composants définis, le DPL référencé et le PDF non signé chargé dans la vue, nous pouvons continuer avec la logique.

Je parie que vous avez remarqué que les gestionnaires d’événements que nous allons utiliser sont déjà définis dans les extraits de contrôle ci-dessus. Passons donc en revue le processus une fois que l’utilisateur a appliqué sa signature et cliqué sur le bouton bleu « Placez votre signature ».

Le OnClientClicked L’événement du bouton se déclenche lorsque vous cliquez sur le bouton bleu. Dans son écouteur, nous pouvons obtenir l’élément canvas avec la signature appliquée avec un peu d’aide jQuery, et également obtenir le contrôle côté client ClientExportManager. Via le exportToPdf() méthode du gestionnaire d’exportation, nous pouvons déclencher l’exportation du canevas vers un pdf :

Javascript

processSignature = function (sender, args) {
    
    var clientExportManager = $telerik.findControl(document, "RadClientExportManager1");
    
    var signatureElement = $(".k-signature-canvas > canvas");
    
    clientExportManager.exportPDF(signatureElement);
}

Après cela, le OnClientPdfExporting en cas de licenciement du responsable export. Ici, nous pouvons obtenir la représentation PDF de la signature sous forme de base64string directement à partir des arguments de l’événement (get_dataURI()). Obtenez le gestionnaire AJAX et envoyez une requête AJAX au serveur avec les données de signature éventuellement accompagnées d’un nom de fichier personnalisé :

Javascript

clientPdfExporting = function (sender, args) {
    
    var dataRaw = args.get_dataURI();
    
    var ajaxManager = $telerik.findControl(document, "RadAjaxManager1");
    var fileName = "signature.png";
    
    ajaxManager.ajaxRequest(fileName + ";" + dataRaw);

    
    args.set_cancel(true);
}

Une fois que la requête atteint le serveur, l’événement AjaxRequest du RadAjaxManager se déclenche. Là, nous pouvons obtenir la chaîne base64 de la signature et la transmettre à la fonction chargée de générer un PDF signé. Enfin, passez la représentation sous forme de chaîne base64 du PDF signé en tant que contenu du PdfViewer.

C#

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    var base64 = e.Argument.Split(',')[1];

    RadPdfViewer1.PdfjsProcessingSettings.FileSettings.Data = PreparePdf(base64);
}

Créer un nouveau document PDF qui inclut votre signature

Explorons le but exact de la PreparePdf() méthode.

Avec l’aide des bibliothèques de traitement de documents (DPL), nous pouvons facilement générer une toute nouvelle copie du document PDF non signé que nous avons. Ensuite, nous pouvons ajouter le contenu de la signature que nous avons déjà extrait dans le nouveau document Pdf à la position souhaitée.

C#

public string PreparePdf(string pdfData)
{
    byte[] resultingBytes = null;
    byte[] finalBytes = null;

    
    PdfFormatProvider provider = new PdfFormatProvider();

    byte[] renderedBytes = Convert.FromBase64String(pdfData);

    RadFixedDocument document1 = null;
    
    RadFixedDocument document2 = provider.Import(renderedBytes);

    
    string filePath = Server.MapPath("Documents/Document.pdf");
    using (FileStream input = new FileStream(filePath, FileMode.Open, FileAccess.Read))
    {
        document1 = provider.Import(input);
    }

    
    using (MemoryStream ms = new MemoryStream())
    {
        provider.Export(document1, ms);
        resultingBytes = ms.ToArray();
    }

    
    finalBytes = AppendContent(resultingBytes, document2);

    
    string result = Convert.ToBase64String(finalBytes);
    return result;
}

La manipulation réelle du contenu PDF se produit dans le AppendContent() méthode. Sa logique repose fortement sur les fonctionnalités exposées par le Bibliothèque RadPdfProcessing:

C#

private byte[] AppendContent(byte[] resultingBytes, RadFixedDocument document2)
{
    RadFixedPage foregroundContentOwner = document2.Pages[0];

    MemoryStream ms = new MemoryStream();
    byte[] renderedBytes = null;
    using (MemoryStream stream = new MemoryStream(resultingBytes))
    {
        using (PdfFileSource fileSource = new PdfFileSource(stream))
        {
            using (PdfStreamWriter fileWriter = new PdfStreamWriter(ms, true))
            {
                foreach (PdfPageSource pageSource in fileSource.Pages)
                {
                    using (PdfPageStreamWriter pageWriter = fileWriter.BeginPage(pageSource.Size, pageSource.Rotation))
                    {
                        pageWriter.WriteContent(pageSource);

                        using (pageWriter.SaveContentPosition())
                        {
                            double xCenteringTranslation = (pageSource.Size.Width - foregroundContentOwner.Size.Width) - 320;
                            double yCenteringTranslation = (pageSource.Size.Height - foregroundContentOwner.Size.Height) - 110;
                            pageWriter.ContentPosition.Translate(xCenteringTranslation, yCenteringTranslation);
                            pageWriter.WriteContent(foregroundContentOwner);
                        }
                    }
                }
            }
        }
    }
    renderedBytes = ms.ToArray();
    return renderedBytes;
}

Nous ne passerons pas en revue chaque classe et méthode distincte du DPL utilisé, mais je recommande fortement de passer un peu de temps à se familiariser avec le RadPdfProcessing Modèle et Notions.

Tout ce qui est écrit ici est en direct et accessible dans cette démo. Allez-y et essayez-le tout de suite!

Si vous aimez ce que vous voyez, vous pouvez continuer à jouer avec RadSignature dans les démos en ligne ou téléchargez son essai absolument gratuit et entièrement fonctionnel et donnez-lui un tour.

Nous apprécions tous les commentaires et la voix de la communauté, que vous pouvez partager sur le portail de commentaires aussi.

Démarrer un essai gratuit