Vous pouvez facilement ajouter un formulaire en ligne à votre site Web, afin qu’il puisse être rempli et téléchargé au format PDF. Lisez ce billet de blog et apprenez comment le faire.
Une brève présentation
Nous supposons que vous connaissez déjà nos tout nouveaux formulaires. Si ce n’est pas le cas, voici un petit rappel. À partir de la version 7.0 de ONLYOFFICE Docs, vous pouvez créer, modifier et collaborer sur des formulaires en ligne, autoriser d’autres utilisateurs à les remplir et enregistrer les formulaires au format PDF.
Dans les formulaires ONLYOFFICE, il est possible de travailler avec deux formats principaux. Le format DOCXF est destiné à créer des modèles de formulaires à partir de fichiers DOCX existant ou à partir de zéro. Le format OFORM est utilisé pour remplir les formulaires prêts à l’emploi.
Ouvrir le fichier DOCXF pour l’éditer à partir d’une page web
Trouvez et ouvrez le fichier index.html de votre ONLYOFFICE Document Server. Ensuite, connectez-le à l’API de Document Server. Vous devez spécifier les paramètres de configuration pour ouvrir un modèle de formulaire.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script type="text/javascript" src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script> // Specify the path to the API JavaScript file. <button onclick="open_form_template()">Open Form Template</button> // Add a button to open the form. <div id="placeholder"></div> // Add the element where the editor will be opened. <script> function open_form_template() { // Close the editor in case it is open. if (this.docEditor) { this.docEditor.destroyEditor() } // Create the full URL address to the form template you need to open. const url = window.location.protocol + "//" + window.location.hostname + “:” + window.location.port + ”/” + filename + ”.docxf”; // Add the key to identify the file for co-editing. const key = filename + ”.docxf”; // Create DocsAPI object with the document config and open the editor in the placeholder element. this.docEditor = new DocsAPI.DocEditor("placeholder", { “document”: { “fileType”: “docxf”, “key”: key, “title”: “Form Template”, “url”: url }, “documentType”: “word” }); } </script> |
Une fois fait, un modèle de formulaire peut être ouvert pour être édité. Après avoir modifié ce document, vous pouvez enregistrer le formulaire. Pour ce faire, cliquez sur le bouton “Enregistrer comme OFORM”.
Ouvrir le formulaire au format OFORM pour le remplir à partir d’un page web
Vous devez ajouter un bouton qui ouvre le formulaire à remplir. Ensuite, ajoutez la fonction open_form_template().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script type="text/javascript" src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script> // Specify the path to the API JavaScript file. <button onclick="open_form()">Open Form</button> // Add a button to open the form. <div id="placeholder"></div> // Add the element where the editor will be opened. <script> function open_form_template() { // Close the editor in case it is open. if (this.docEditor) { this.docEditor.destroyEditor() } // Create the full URL address to the form you need to open. const url = window.location.protocol + "//" + window.location.hostname + ”:” + window.location.port + ”/” + filename + ”.oform”; const key = filename + ”.oform”; // Create DocsAPI object with the document config and open the editor in the placeholder element. this.docEditor = new DocsAPI.DocEditor("placeholder", { “document”: { “fileType”: “oform”, “title”: “Form”, “url”: url }, “documentType”: “word” }); } </script> |
Il faut tenir compte du fait que le champ clé n’est pas transmis à la configuration des éditeurs. Ce champ sera automatiquement généré comme un nombre aléatoire. Cela permet de rendre indépendantes toutes les sessions d’ouverture du formulaire. Ainsi, la collaboration sur le fichier OFORM est désactivée. C’est pourquoi n’importe qui peut ouvrir le formulaire et le remplir sans déranger les autres.
Une fois fait, un formulaire peut être ouvert pour être rempli. Après avoir rempli les champs (les champs obligatoires sont mis en évidence par une bordure rouge), vous pouvez obtenir un fichier PDF. Pour ce faire, cliquez sur le bouton “Télécharger comme PDF”.
