Fermer

avril 23, 2021

Modification de fichiers PDF dans le navigateur Ajout de signature, de texte, d'images


Les fichiers PDF font partie de la vie quotidienne. L'interface utilisateur Telerik pour ASP.NET Core a rendu encore plus facile la modification de fichiers PDF directement dans votre navigateur. Voyons comment ajouter du texte, des images et même un pinceau pour les signatures.

deux documents imprimés devant un ordinateur portable

Introduction

Il y a quelques mots logiciels qui sont si courants que les connaître le fait ne faites pas de vous un geek – des mots comme navigateur, pilotes, version, .NET, Java, lecteur multimédia, etc.

L'un de ces termes est PDF . Dans le monde des documents, de la communication et des affaires, il est devenu un standard si solide qu'il est tout simplement étonnant de constater l'ampleur de sa marge. À tel point que « Envoyez-moi le fichier », de nos jours peut généralement être remplacé par « Envoyez-moi le PDF ».

Dans de nombreuses entreprises, c'est la pratique acceptée pour utiliser PDF pour la communication avec des fichiers. Souvent, ces fichiers nécessitent des modifications en cours de route, comme l'ajout d'une signature de données textuelles supplémentaires ou d'une image graphique pour une visualisation descriptive.

Et quelle meilleure façon de le faire à la volée que directement dans l'application en ligne de votre entreprise, tout en restant dans le confort de votre navigateur.

Chez Telerik, nous suivons de près les demandes de nos utilisateurs et avons décidé de vous montrer qu'il est possible de mettre en œuvre une telle fonctionnalité en utilisant les fonctionnalités intégrées de notre composant PDFViewer.

Exemple de document Telerik - n'hésitez pas à Éditer. Essayez de télécharger une image dans cette zone - avec un carré vert autour d'une image de graphique à barres. Vous pouvez ajouter du texte après le paragraphe, un paragraphe de lorem ipsum, puis une case verte avec des mots tapés dedans. Vous pouvez également dessiner votre signature - la case verte permet une signature de style crayon dessiné.

Dans ce billet de blog, nous allons passer par les étapes pour y parvenir en utilisant le Telerik PDFViewer pour ASP.NET Core et Bibliothèques de traitement de documents . Si vous préférez passer directement au projet exécutable, n'hésitez pas à le faire en allant à la section Conclusion .

PDFViewer est un composant de l'interface utilisateur Telerik pour le jeu d'outils ASP.NET Core, qui fournit -dans des widgets avec des fonctionnalités riches qui facilitent la mise en œuvre des applications Core complexes en temps réel.

Les bibliothèques de traitement de documents sont un outil puissant pour générer, gérer et exporter des formats de documents courants tels que pdf, docx, xlsx, html, txt, archives zip, etc.

The Reach of PDF

Portable Document Format (PDF) – la norme ISO ouverte mondiale depuis 2008 – a été publié pour la première fois en 1993 par Adobe avec l'idée d'obtenir un affichage cohérent des documents avec exactement le même contenu et la même mise en page, quel que soit le système d'exploitation, le périphérique ou l'application logicielle. vu le. C'est le principal avantage du format PDF: intégrité graphique . Il est utile pour présenter du texte, des graphiques et des feuilles de calcul sur une seule page, sachant que tout se ressemblera peu importe où et comment vous le présentez.

une tablette avec du matériel de lecture sur une plage [19659005] Quelques autres avantages du PDF incluent:

  • Archivage compact
  • Documents commerciaux et juridiques
  • Commodité
  • Accessibilité et conformité
  • Fonctionnalité hors ligne
  • Flexibilité du flux de travail
  • Impression haut de gamme
  • ] Multi-dimensionnel
  • Signatures numériques
  • Prise en charge générique (navigateur)

Vous avez probablement rencontré des sites Web d'applications en ligne où l'exigence était que le fichier joint soit au format PDF. Cela ne devrait pas surprendre, étant donné qu'il existe littéralement des billions de PDF dans le monde en raison de sa popularité.

Un article récent sur Medium révèle une pépite concernant l'utilisation du PDF:

«… Adobe rapporte que dans son Rien que pour l'année fiscale 2020, environ 303 milliards de PDF ont été ouverts à l'aide de son service Document Cloud, soit une augmentation annuelle de 17% … »

Comme l'article le souligne à juste titre, le PDF« a prévalu »et est« … devenu celui véritable standard — le papier du monde numérique émergent. "

Lire" L'histoire intérieure de la façon dont le modeste PDF a joué le jeu le plus long de la technologie "sur Medium.

Source: [19659035] https://www.pdfa.org/pdf-plays-the-longest-game-in-tech/

Ceci peut également être clairement vu dans la popularité de recherche au fil des ans:

A le graphique linéaire montre une augmentation de l'intérêt pour le 'pdf' au fil du temps, de 2006 à 2021, d'environ 30 à un maximum de 100

Figure 1: «pdf» se arches depuis 15 ans. Données: Google Trends

La courbe devient plus raide ces dernières années pour l'édition réelle des fichiers PDF:

Un graphique linéaire similaire montre une montée plus lente de l'intérêt pour «éditer pdf» au fil du temps, de 2006 à 2021, d'environ 30 à un pic récent à un maximum de 100

Figure 2: «edit pdf» recherche pour les 15 dernières années. Données: Google Trends

L'un des principaux avantages du PDF par rapport à ses concurrents est le support mobile et la disponibilité des applications. Par exemple, lorsque vous achetez un billet d'avion, il y a de fortes chances que le code QR vous soit fourni au format PDF. Et vous pouvez assister au vol simplement en ouvrant le billet avec votre téléphone intelligent, ce qui vous évite l'effort d'impression physique réelle.

«La fabrication du papier a un impact négatif sur l'environnement ] de diverses manières, y compris la production de quantités massives de déchets, l'utilisation de ressources naturelles précieuses telles que l'eau, les arbres et les combustibles fossiles non renouvelables, ainsi que le rejet de pollution atmosphérique dans l'atmosphère. »

Source: https://blog.greenoffice.co.za/the-environmental-costs-of-office-printing

Trois lignes sur un graphique indiquant l'utilisation du bureau (tendance à la baisse d'environ 95% à environ 50% à mi-chemin de notre chronologie); mobile (l'inverse du bureau, commençant près de 5% et planant autour de 50% à peu près à mi-chemin dans la chronologie); et tablette (à partir de 0%, puis à environ 5%).

Figure 3: Part de marché des appareils pour les 10 dernières années. Données: https://gs.statcounter.com/

Constructions clés

Nous pouvons maintenant procéder à l'exemple. Notre objectif est d'ajouter des éléments aux fichiers PDF existants directement dans le site Web du navigateur. Pour réaliser une implémentation en ligne fonctionnelle, nous utiliserons les outils suivants:

  1. Telerik PDFViewer pour ASP.NET Core
  2. pdf.js (déjà intégré dans PDFViewer) [19659020] Kendo Drawing (est intégré à la bibliothèque Telerik UI pour ASP.NET Core)
  3. Telerik Document Processing (bibliothèques externes disponibles dans Telerik UI for ASP .NET Core Package)

Game Plan

Voici le plan:

  1. Premièrement, nous allons brancher le composant PDFViewer pour ASP.NET Core .
  2. Ensuite, nous ajoutera nos boutons personnalisés pour le texte, la signature et l'image.
  3. Ensuite, nous allons créer un div de superposition qui sera notre surface de dessin. Il sera transparent afin que nous puissions simuler visuellement l'édition du fichier PDF.
  4. Une fois que l'utilisateur entre en mode d'édition avec l'un des boutons, il pourra effectuer des modifications et cliquer sur «Enregistrer».
  5. Ensuite, nous générerons le Tableau d'octets PDF de cette surface et envoyez-le au serveur sous forme de fichier PDF séparé.
  6. Maintenant, le travail sera effectué par les bibliothèques Telerik Document Processing. Nous chargerons notre fichier PDF original et le fusionnerons avec le fichier PDF généré.
  7. Et nous transmettrons le fichier PDF unique résultant au PDFViewer.

Implémentation

  1. Création d'un Telerik PDFViewer pour ASP.NET Core. Cette partie utilise la puissance du jeu d'outils Telerik qui permet une fonctionnalité plug-n-play pour plus de 100 composants. Cela économise certainement beaucoup de temps de développement:

@ (Html.Kendo (). PDFViewer ()

.Name ( "pdfViewer" )

.PdfjsProcessing (pdf => pdf.File (Url.Content) ( "../ TelerikSampleDocument.pdf" )))

.Scale (1)

.Height (1200)

)

  1. Ajout de nouveaux boutons pour le texte, l'image et la signature:

$ (document) .ready ( function () {

var pdfViewer = $ ( "# pdfViewer" ). data (). kendoPDFViewer;

addButtons (pdfViewer);

});

function addButtons (pdfViewer) {

var toolBar = pdfViewer.toolbar;

toolBar.add ({

type: "bouton"

// texte: "Texte",

attributs: {titre: "Texte" },

icône: "edit-tools" [19659005] cliquez: function (e) {

showOverlay ( "Texte" );

}

});

…

Le résultat ressemblera à ceci:

La ​​barre d'outils montre trois petits carrés boutons d'icônes à droite: un A avec un crayon, une image avec un signe plus et un pinceau

  1. Ajout d'une superposition invisible en haut de la page PDF visible:

pdfViewer.one ( "render" [19659068] function () {

pdfViewer.element.find ( ". K- page "). append ("

");

} );

  1. Création d'un élément correspondant en fonction du bouton cliqué:

if (mode == "Text" ) {

$ ( ". PageOverlay" ). Append (`<div id = [19659067] "dragContainer" >

<div id = 'textContainer' contentEditable = "true"

ondblclick = "divDblClick (this);" classe = 'dragContent'

onblur = "divBlur (this);" onfocus = 'divFocus (this);' >

Nouvel exemple de texte

`) ;

registerDragging ();

}

  1. Envoi du PDF généré à partir du PDF de superposition au serveur. Cela se produit après que l'utilisateur clique sur le bouton "Enregistrer":

$ ( "# saveButton" ). Off ( "click" ). Click ([19659077] function () {

// Convertit l'élément DOM en dessin à l'aide de kendo.drawing.drawDOM

kendo.drawing.drawDOM ($ ( "# surface" ))

.then ( function (group) {

// Rendre le résultat sous forme de document pdf

return [19659078] kendo.drawing.exportPDF (groupe);

})

.done ( function (data) { ]

// Enregistrer le document pdf

refreshPdfViewer (données);

});

});

  1. Il est temps pour le traitement de documents de faire son travail et de fusionner 2 fichiers PDF l'un sur l'autre:

privé octet [] AppendContent ( octet [] résultantBytes, document RadFixedDocument2)

{ [19659005] RadFixedPage foregroundContentOwner = document2.Pages [0];

MemoryStream ms = nouveau MemoryStream ();

octet [] renduBytes = null ;

using (MemoryStream stream = new MemoryStream (résultantBytes))

{

en utilisant (PdfFileSource fileSource = new PdfFileSource (stream))

{

using (PdfStreamWriter fileWriter = new PdfStreamWriter (ms, true) ))

{

forea ch (PdfPageSource pageSource in fileSource.Pages)

{

utilisant (PdfPageStreamWriter pageWriter = fileWriter.BeginPage (pageSource.Size, pageSource.Rotation)) [1945990440] [1945900440]

{

pageWriter .WriteContent (pageSource);

en utilisant (pageWriter.SaveContentPosition ())

{

double xCenteringTranslation = (pageSource.Size.Width - premier planContentOwner.Size.Width) / 2;

double yCenteringTranslation = (pageSource.Size.Height - foregroundContentOwner.Size.Height) / 2;

pageWriter.ContentPosition.Translate (xCenteringTranslation, yCenteringTranslation);

pageWriter.WriteContent (foregroundContentOwner);

}

}

}

}

} [19659005] }

renduBytes = ms.ToArray ();

return rendusBytes;

}

  1. Et le dernier bit est d'actualiser PDFViewer avec les nouvelles données:

finalBytes = AppendContent (résultantBytes, document2) ;

PdfResult = finalBytes;

string result = Convert.ToBase64String (finalBytes);

return result;

JavaScript part:

function refreshPdfViewer (data) {

$. post ( "/ PdfViewer / PreparePdf" {

pdfData: data. remplacer ( "data: application / pdf; base64," "" )

},

function (réponse) {

…

Voici le contenu crucial et l'essentiel de l'implémentation. Il existe également d'autres logiques JavaScript et CSS qui permettent d'afficher tout ce qui est ordonné et ordonné , mais je les ignorerai par souci de concision. L'ensemble du code peut être trouvé dans la section suivante.

Vous pouvez dessiner votre signature, avec une case verte où l'utilisateur a utilisé un outil de style de pinceau pour signer.

Conclusion

Tirer parti des capacités de la bibliothèque Telerik Document Processing en combinaison avec un ensemble d'outils d'interface utilisateur moderne comme Telerik UI pour ASP.NET Core offre un bond en avant en termes de commodité, ce qui peut rendre la vie de chaque utilisateur PDF tellement plus facile, ainsi que la vie du développeur. 😊

Et le plus intéressant, c'est que tout cela est disponible sous la forme d'un package produit unique:

Telerik UI pour ASP.NET Core

Si vous utilisez plusieurs frameworks pour le développement et créez un bureau , applications mobiles et Web Je vous encourage à consulter l'intégralité de Telerik DevCraft:

Telerik DevTools

Vous avez l'exemple complet prêt à être téléchargé et exécuté ici: PDFViewerBlogPostSample.zip

La mise en œuvre est actuellement effectuée pour une seule page en tant que preuve de concept mais elle peut être encore améliorée pour fonctionner avec plusieurs pages. N'hésitez pas à le vérifier et à nous faire savoir si vous avez des commentaires, des idées d'amélioration ou des questions.

Voici une vidéo montrant à quoi ressemble le résultat final (la mise au point du texte se fait par double-clic): Avancé PDFViewer dans YouTube .

Le meilleur outil 2023 pour ta croissance Instagram !



Source link