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,   apparaît comme un choix précieux.   offrent une riche gamme de fonctionnalités destinées à divers secteurs. Foxit Les bibliothèques PDF SDK de Foxit  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   qui l'accompagne vous permet de suivre et de mettre en œuvre les étapes décrites dans le didacticiel. référentiel GitHub   Qu'est-ce que le SDK Foxit PDF pour le 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. Le Foxit PDF SDK for Web  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    le SDK Foxit PDF pour le Web. Le fichier ZIP doit contenir le SDK, la documentation et des exemples. Téléchargez  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   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 : Vite   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   , par rapport au répertoire   parent. ./FoxitPDFSDKForWeb du projet   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.     <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   , ajoutez du CSS pour styliser les éléments : style.css   /* 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   , utilisez le SDK pour créer une instance de   : main.js 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   et   dans le fichier   . LicenseSN LicenseKey ./FoxitPDFSDKForWeb/examples/license-key.js  Le pdfViewer est créé en fournissant au constructeur un objet de configuration contenant :    le chemin relatif vers le dossier   du package SDK décompressé libPath : lib    options de configuration pour le moteur JR qui incluent, surtout, des informations sur les licences jr :    un composant personnalisé qui contrôle le dimensionnement et le défilement du PDF, où sa configuration ajuste la visionneuse au conteneur. Customs.ScrollWrap :  Une fois   créé, il ne vous reste plus qu'à l'initialiser et charger le document : pdfViewer   // ... 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   et l'ouvre dans la visionneuse à l'aide de sa méthode   . Le document PDF utilisé est un guide de démonstration issu de la documentation incluse dans le SDK.  blob openPDFByFile()  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   générera des identifiants pour identifier les champs de formulaire dans le document.   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 : randomId() FieldTypes  Une   pour informer l'utilisateur sur son utilisation étiquette  Un   pour faire correspondre les éléments déplacés aux entrées de métadonnées nom  Un   pour indiquer le type du champ type  Une   et   pour calculer la position du rectangle dans le PDF largeur height  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   , un objet SDK représentant un document PDF, comme argument. Il est utilisé pour récupérer un objet   , 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. PDFDoc PDFForm  Chaque élément possède un attribut   défini sur   pour permettre le glisser, ainsi qu'un   correspondant au nom unique de chaque champ de formulaire pour les faire correspondre aux métadonnées sous-jacentes. Cet   est ensuite utilisé dans l'écouteur d'événement   pour le transférer lors de l'action glisser-déposer. déplaçable true identifiant identifiant dragstart  Pour obtenir le paramètre   requis pour la fonction   , vous devrez obtenir la   résultante de la fonction   en la modifiant comme ci-dessous : PDFDoc loadFormFieldsMenu() promesse loadPDF()   // ... 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   transmet l'interaction à gérer dans l'événement   en appelant   . dragover drop PreventDefault()  Dans le gestionnaire d'événements   , 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   disponible sur l'instance   . drop convertClientCoordToPDFCoord() 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   à partir de l'objet   créé précédemment dans la fonction. La méthode accepte les arguments suivants : addControl() PDFForm  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   et   pour que la souris coordonne le centre du champ de formulaire. la largeur la hauteur  Enfin, si le champ accepte une liste d'options, il est d'abord accédé par la méthode   de l'objet   à l'aide de l'ID. Les options sont définies en conséquence à l'aide de la méthode   . getField() PDFForm 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   , 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. de Foxit  Pour approfondir les possibilités, reportez-vous à la   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. documentation officielle  Si vous souhaitez consulter le didacticiel ou vérifier votre travail, vous pouvez vous référer au   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. référentiel GitHub  Également publié   . ici

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Free Trial

Now Hiring

Cet audio est produit dans la langue originale de l'histoire !

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

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Guide de l'architecte pour créer une architecture de référence pour un datalake IA/ML

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps