4,070 lectures

Un guide pour créer des champs de formulaire personnalisés à l'aide du SDK Foxit PDF pour le Web

par Foxit Software8m2023/11/17

Trop long; Pour lire

Ce didacticiel vous apprendra à créer des champs de formulaire personnalisés dans les documents PDF de votre navigateur Web à l'aide de Foxit PDF Library for Web.

featured image - Un guide pour créer des champs de formulaire personnalisés à l'aide du SDK Foxit PDF pour le Web

Le format PDF est devenu indispensable dans les logiciels modernes, constituant une solution polyvalente pour divers types de documents. Pour les entreprises à la recherche de PDF sécurisés, modifiables et conviviaux, Foxit apparaît comme un choix précieux. Les bibliothèques PDF SDK de Foxit offrent une riche gamme de fonctionnalités destinées à divers secteurs.

Les fichiers PDF basés sur un navigateur Web, en particulier, trouvent une myriade d'applications dans la gestion de documents. Ils jouent un rôle central dans de nombreux systèmes bancaires, facilitant des tâches telles que la génération de relevés mensuels. De plus, le secteur de la conformité s'appuie sur les fichiers PDF Web pour la collecte et le stockage sécurisés des données.

Ce didacticiel vous guide dans l'utilisation du SDK Foxit PDF pour le Web afin de créer des champs de formulaire personnalisés dans les documents PDF de votre navigateur Web. Le référentiel GitHub qui l'accompagne vous permet de suivre et de mettre en œuvre les étapes décrites dans le didacticiel.

Qu'est-ce que le SDK Foxit PDF pour le Web ?

Le Foxit PDF SDK for Web , parmi les divers SDK PDF proposés par Foxit, se distingue comme une bibliothèque PDF complète qui exploite les avantages du moteur de rendu de Foxit. Ce SDK vous permet d'intégrer de manière transparente une visionneuse PDF complète et entièrement personnalisable dans vos applications.

Les PDF Web créés avec le SDK de Foxit permettent aux utilisateurs de visualiser, remplir, annoter et signer sans effort des documents dans différentes langues directement depuis leur navigateur mobile ou de bureau à l'aide de JavaScript. Le SDK est compatible avec tous les principaux navigateurs, notamment Firefox, Safari, Chrome et Opera.

Pour illustrer la fonctionnalité, vous allez créer un nouveau projet PDF à partir d'un modèle, en utilisant le SDK Foxit PDF pour le Web pour fournir la structure nécessaire. Cette approche pratique offrira une démonstration pratique de la manière dont le SDK améliore les fonctionnalités PDF au sein de vos projets Web.

Implémentation du SDK Foxit PDF pour le Web

Téléchargez le SDK Foxit PDF pour le Web. Le fichier ZIP doit contenir le SDK, la documentation et des exemples.

Vous pouvez prévisualiser ces exemples en exécutant un serveur HTTP à partir du répertoire décompressé.

 # NPX available with NPM v5.2 or newer npx http-server

Configurer le projet

Ce didacticiel utilise Vite pour les outils frontend. Il est basé sur des modules ES (ESM), rapide et livré avec tout ce dont vous avez besoin pour utiliser le SDK prêt à l'emploi. Pour créer un nouveau projet à partir d'un modèle et démarrer le serveur de développement, assurez-vous que vous disposez de Node.js version 12.2.0 ou plus récente et exécutez les commandes suivantes :

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

Déplacez le SDK dans le répertoire créé. Pour le reste de ce didacticiel, le SDK est supposé être disponible dans ./FoxitPDFSDKForWeb , par rapport au répertoire du projet parent.

Chargement du PDF

Vous aurez besoin d'une visionneuse PDF avec un document téléchargé pour commencer à expérimenter. Pour initialiser la visionneuse PDF, créez d'abord la structure HTML et chargez le SDK.

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

De plus, dans style.css , ajoutez du CSS pour styliser les éléments :

 /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; }

Dans main.js , utilisez le SDK pour créer une instance de pdfViewer :

 import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, });

Vous pouvez trouver vos valeurs pour LicenseSN et LicenseKey dans le fichier ./FoxitPDFSDKForWeb/examples/license-key.js .

Le pdfViewer est créé en fournissant au constructeur un objet de configuration contenant :

libPath : le chemin relatif vers le dossier lib du package SDK décompressé
jr : options de configuration pour le moteur JR qui incluent, surtout, des informations sur les licences
Customs.ScrollWrap : un composant personnalisé qui contrôle le dimensionnement et le défilement du PDF, où sa configuration ajuste la visionneuse au conteneur.

Une fois pdfViewer créé, il ne vous reste plus qu'à l'initialiser et charger le document :

 // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf");

L'extrait ci-dessus récupère le fichier PDF sous forme de blob et l'ouvre dans la visionneuse à l'aide de sa méthode openPDFByFile() . Le document PDF utilisé est un guide de démonstration issu de la documentation incluse dans le SDK.

L'espace supplémentaire à droite servira de menu pour les champs de formulaire déplaçables.

Création de champs de formulaire personnalisés

Tout ce dont vous avez besoin pour créer un champ de formulaire avec le SDK Foxit est une visionneuse, les métadonnées du champ de formulaire (telles que le type de champ ou les options de sélection) et la position du champ de formulaire. Pour cet exemple, vous allez créer un ensemble de champs de formulaire prédéfinis avec des métadonnées prêtes que l'utilisateur peut faire glisser et déposer dans la visionneuse.

Définir des métadonnées

Commencez par définir les métadonnées des champs autorisés, ainsi que les assistants supplémentaires :

 // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions;

La fonction randomId() générera des identifiants pour identifier les champs de formulaire dans le document. FieldTypes est un raccourci permettant de référencer plus rapidement les types de champs prédéfinis disponibles dans le SDK. Chaque entrée de champ de formulaire contient :

Une étiquette pour informer l'utilisateur sur son utilisation
Un nom pour faire correspondre les éléments déplacés aux entrées de métadonnées
Un type pour indiquer le type du champ
Une largeur et height pour calculer la position du rectangle dans le PDF

Enfin, comboBoxOptions et listBoxOptions contiennent des exemples d'options pour les champs qui nécessitent que les utilisateurs en sélectionnent un.

Création d'éléments glisser-déposer

Une fois les métadonnées prêtes, vous pouvez créer une fonction pour gérer la logique du glisser-déposer, ainsi que le placement des champs de formulaire :

 // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); };

La fonction accepte PDFDoc , un objet SDK représentant un document PDF, comme argument. Il est utilisé pour récupérer un objet PDFForm , qui sera utilisé pour ajouter et configurer les champs du formulaire, une fois ces champs traités en éléments déplaçables et ajoutés au menu latéral.

Chaque élément possède un attribut déplaçable défini sur true pour permettre le glisser, ainsi qu'un identifiant correspondant au nom unique de chaque champ de formulaire pour les faire correspondre aux métadonnées sous-jacentes. Cet identifiant est ensuite utilisé dans l'écouteur d'événement dragstart pour le transférer lors de l'action glisser-déposer.

Pour obtenir le paramètre PDFDoc requis pour la fonction loadFormFieldsMenu() , vous devrez obtenir la promesse résultante de la fonction loadPDF() en la modifiant comme ci-dessous :

 // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } );

Une fois les éléments de menu créés, l'application ressemble maintenant à ceci :

Implémentation de la fonctionnalité glisser-déposer

Après avoir créé les éléments déplaçables, il est temps d'implémenter pleinement la fonctionnalité glisser-déposer et de permettre la création de champs de formulaire dans la visionneuse :

 // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ...

Dans le code ci-dessus, l'écouteur d'événement dragover transmet l'interaction à gérer dans l'événement drop en appelant PreventDefault() .

Dans le gestionnaire d'événements drop , les métadonnées correspondantes sont d'abord récupérées à l'aide des données de l'élément déplacé. Ensuite, la position de la souris à partir de l'événement est transformée en coordonnées PDF à l'aide de la méthode convertClientCoordToPDFCoord() disponible sur l'instance pdfViewer .

La position, les métadonnées et l'ID généré aléatoirement sont utilisés dans l'appel de la méthode addControl() à partir de l'objet PDFForm créé précédemment dans la fonction. La méthode accepte les arguments suivants :

L'index de la page où placer le champ du formulaire (récupéré de l'appel convertClientCoordToPDFCoord() )
L'ID généré aléatoirement pour le champ de formulaire nouvellement créé
Le type du champ du formulaire selon les constantes fournies (récupérées des métadonnées)
L'argument qui définit l'emplacement du champ de formulaire sous la forme d'un rectangle, calculé en utilisant la largeur et la hauteur pour que la souris coordonne le centre du champ de formulaire.

Enfin, si le champ accepte une liste d'options, il est d'abord accédé par la méthode getField() de l'objet PDFForm à l'aide de l'ID. Les options sont définies en conséquence à l'aide de la méthode setOptions() .

L'application finale, avec quelques champs de formulaire déjà placés, ressemble à ceci :

Conclusion

L'ajout de fonctionnalités à vos PDF peut en effet apporter des avantages significatifs à votre organisation et à vos utilisateurs. Les mises à jour et les signatures électroniques permettent d'économiser du temps, de l'argent et des efforts, tandis que les documents personnalisés et sécurisés renforcent la confiance dans votre entreprise.

Comme démontré précédemment, l'outil PDF multilingue de Foxit , associé au SDK Foxit PDF pour le Web, fournit une solution robuste. Vous pouvez créer des champs de formulaire personnalisés, implémenter une fonctionnalité glisser-déposer et débloquer une gamme de fonctionnalités. Toutefois, ce n’est que la pointe de l’iceberg. Le Foxit PDF SDK for Web offre un ensemble complet de fonctionnalités pour améliorer davantage vos fonctionnalités PDF.

Pour approfondir les possibilités, reportez-vous à la documentation officielle et aux ressources supplémentaires fournies par le SDK. La documentation vous guidera à travers les fonctionnalités avancées, les options de personnalisation et les meilleures pratiques.

Si vous souhaitez consulter le didacticiel ou vérifier votre travail, vous pouvez vous référer au référentiel GitHub associé au didacticiel. Le référentiel contient probablement le code source, des exemples et des documents supplémentaires pour vous aider à comprendre et à mettre en œuvre les concepts abordés dans le didacticiel.