Lire les valeurs des champs de formulaire PDF par type avec JavaScript

Lorsqu'une personne remplit un formulaire PDF et l'enregistre, les valeurs saisies résident dans les structures de champs du document — et non sous forme de texte brut que vous pouvez rechercher ou copier en masse. Pour un formulaire comportant trente ou quarante champs, la transcription manuelle devient un goulot d'étranglement. Le problème plus profond est que chaque type de champ stocke sa valeur différemment : une zone de texte expose une chaîne, une case à cocher renvoie un booléen, une zone de liste déroulante sépare les options de la sélection, et un bouton radio stocke son élément choisi. Un appel uniforme et unique « donnez-moi la valeur » n'existe pas.

Cet article explique comment extraire les valeurs des champs de formulaire d'un PDF à l'aide de Spire.PDF for JavaScript. La bibliothèque s'exécute sur WebAssembly dans le navigateur, de sorte que le document est analysé localement via un système de fichiers virtuel, sans aller-retour vers le serveur. Vous verrez comment parcourir la collection de champs, effectuer une répartition selon le type de chaque champ, et lire la propriété correcte pour les zones de texte, les zones de liste, les zones de liste déroulante, les boutons radio et les cases à cocher.

Pour l'installation et la configuration du projet, reportez-vous à Intégrer Spire.PDF for JavaScript dans un projet React. Le code ci-dessous suppose que Spire.PDF est installé et que le module WASM est initialisé.

Types de champs en un coup d'œil

Avant de plonger dans l'implémentation, il est utile de cartographier la manière dont chaque type de champ expose sa valeur. Spire.PDF for JavaScript représente les champs de formulaire sous forme de classes de widgets, et la propriété qui contient la valeur actuelle diffère d'un type à l'autre :

Le schéma est clair : il n'existe pas de propriété universelle unique. La logique d'extraction doit tester le type de chaque champ et lire la propriété correspondante, ce que la section suivante met précisément en œuvre.

Parcourir les champs et lire selon le type

Le flux de travail principal comporte trois étapes : charger le PDF, obtenir son formulaire sous forme de PdfFormWidget, puis parcourir la collection FieldsWidget et effectuer un branchement sur la classe de chaque champ à l'aide de instanceof. À chaque branche, lisez la propriété spécifique au type et ajoutez le résultat à une chaîne de rapport. Comme la répartition couvre tous les types pris en charge, vous n'avez pas besoin de connaître à l'avance les champs que contient le document — les champs non reconnus passent simplement à une étiquette par défaut.

function App() {
  const getAllFieldValues = async () => {
    // Get the Spire.PDF WASM module
    const pdfModule = window.wasmModule?.spirepdf;

    // Check that the module is ready
    if (!pdfModule) {
      alert('Spire.PDF is not ready yet');
      return;
    }

    // Load the PDF file to be read into the VFS
    const inputFileName = 'ApplicationForm.pdf';
    await window.spire.FetchFileToVFS(inputFileName, "", `${process.env.PUBLIC_URL}/data/`);

    // Create a PdfDocument object and load the PDF document
    const doc = new pdfModule.PdfDocument();
    doc.LoadFromFile(inputFileName);

    // Build a PdfFormWidget from the document's form handle; FieldsWidget is its field collection
    const formWidget = new pdfModule.PdfFormWidget(doc.Form.H);
    const fields = formWidget.FieldsWidget;

    let report = '';

    // Walk the field collection, check each type, and read the matching value
    for (let i = 0; i < fields.Count; i++) {
      const field = fields.get_Item({ index: i });

      // Both the type name and the value are filled in by the type dispatch
      let type = 'Unknown';
      let value = '(Unrecognized field type)';

      if (field instanceof pdfModule.PdfTextBoxFieldWidget) {
        // Text box field: read Text directly
        type = 'TextBox';
        value = field.Text;
      } else if (field instanceof pdfModule.PdfListBoxWidgetFieldWidget) {
        // List box field: Values holds every option, SelectedValue is the current one
        const options = [];
        for (let j = 0; j < field.Values.Count; j++) {
          options.push(field.Values.get_Item(j).Value);
        }
        type = 'ListBox';
        value = `Selected ${field.SelectedValue}, options ${options.join(', ')}`;
      } else if (field instanceof pdfModule.PdfComboBoxWidgetFieldWidget) {
        // Combo box field: like a list box, it has an option collection and a selected value
        const options = [];
        for (let j = 0; j < field.Values.Count; j++) {
          options.push(field.Values.get_Item(j).Value);
        }
        type = 'ComboBox';
        value = `Selected ${field.SelectedValue}, options ${options.join(', ')}`;
      } else if (field instanceof pdfModule.PdfRadioButtonListFieldWidget) {
        // Radio button field: Value is the selected item
        type = 'RadioButton';
        value = `Selected ${field.Value}`;
      } else if (field instanceof pdfModule.PdfCheckBoxWidgetFieldWidget) {
        // Check box field: Checked gives the state, not Value
        type = 'CheckBox';
        value = field.Checked ? 'Checked' : 'Not checked';
      }

      report += `Field "${field.Name}" (${type}): ${value}\n`;
    }

    const outputFileName = 'AllFieldValues.txt';
    window.dotnetRuntime.Module.FS.writeFile(outputFileName, report);
    doc.Close();

    // Read the generated file from the VFS and trigger the download
    const fileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
    const blob = new Blob([fileArray], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = outputFileName;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div style={{ textAlign: 'center', height: '300px' }}>
      <h1>Extract Form Field Values</h1>
      <button onClick={getAllFieldValues}>
        Extract values
      </button>
    </div>
  );
}

export default App;

Une fois la boucle terminée, la chaîne de rapport contient une ligne par champ avec son nom, son type et sa valeur actuelle. Le fichier est écrit dans le système de fichiers virtuel, puis téléchargé sous forme de fichier texte :

La chaîne instanceof est au cœur de l'approche. Chaque branche sait exactement quelle propriété lire, de sorte que la sortie est correcte quel que soit le nombre de types de champs que le document mélange. Les trois sections suivantes abordent les pièges qui surviennent lorsque la propriété de valeur d'un champ n'est pas celle que vous pourriez attendre.

Cases à cocher : Checked vs Value

Une erreur courante lors de la lecture des champs de case à cocher consiste à se tourner vers une propriété Value. Le widget de case à cocher — PdfCheckBoxWidgetFieldWidget — n'expose pas du tout Value ; toute tentative de lecture renvoie undefined. En interne, une case à cocher suit son état au moyen de valeurs d'exportation : Off lorsqu'elle n'est pas cochée, et Yes ou une chaîne d'exportation personnalisée lorsqu'elle est cochée. Une chaîne brute ne peut pas vous indiquer de manière fiable si la case est sélectionnée, c'est pourquoi la surface de l'API omet délibérément Value et propose Checked à la place.

La solution est simple — utilisez toujours la propriété booléenne Checked :

// Check the state with Checked, not Value
const checked = field.Checked;

Cela renvoie true lorsque la case est cochée et false sinon, vous offrant un booléen propre pour la logique en aval, sans aucune analyse de chaîne.

Zones de liste et zones de liste déroulante : SelectedValue vs Values

Les zones de liste et les zones de liste déroulante partagent un modèle de données en deux parties qui déroute de nombreux développeurs. PdfListBoxWidgetFieldWidget et PdfComboBoxWidgetFieldWidget exposent tous deux une collection Values et une chaîne SelectedValue, et il est facile de supposer que Values contient la saisie de l'utilisateur. Ce n'est pas le cas.

Values est l'ensemble complet des options disponibles. Chaque élément de la collection est un objet PdfListWidgetItem, vous devez donc le déballer avec .Value pour obtenir le texte de l'option. Parcourir Values vous indique ce que l'utilisateur aurait pu choisir, et non ce qu'il a réellement sélectionné. La véritable sélection de l'utilisateur réside dans SelectedValue sous forme de chaîne simple.

Utilisez SelectedValue pour la valeur actuelle, et parcourez Values uniquement lorsque vous devez énumérer les choix disponibles :

// The text of the currently selected item
const selected = field.SelectedValue;

// Every available option
const options = [];
for (let j = 0; j < field.Values.Count; j++) {
  options.push(field.Values.get_Item(j).Value);
}

Il est essentiel de bien distinguer ces deux propriétés : traiter Values comme la réponse vous donne la liste des options au lieu du résultat rempli, et les deux ont rarement la même longueur.

Gestion des PDF chiffrés

L'extraction du formulaire commence par l'ouverture du document. Si le PDF est protégé par mot de passe, appeler LoadFromFile avec seulement le nom du fichier génère une erreur — « Impossible d'ouvrir un document chiffré. Le mot de passe n'est pas valide. » — et aucun objet de document n'est renvoyé. Les champs de formulaire ne sont jamais atteints.

La solution consiste à passer le mot de passe d'ouverture en tant que second argument :

doc.LoadFromFile(inputFileName, 'spire123');

Une fois le document ouvert avec succès, le reste du flux d'extraction — construction du PdfFormWidget, parcours des champs, répartition par type — fonctionne exactement de la même manière qu'avec un fichier non chiffré. Le mot de passe ne conditionne que le chargement initial ; il ne modifie pas la manière dont les valeurs des champs sont lues.

Voir aussi

• Intégrer Spire.PDF for JavaScript dans un projet React — installation, configuration et initialisation de WASM
• Remplir les champs de formulaire PDF avec Spire.PDF for JavaScript — écrire des valeurs dans les champs de formulaire par programmation
• Importer et exporter des données de formulaire PDF avec Spire.PDF for JavaScript — sérialiser les données de formulaire dans des fichiers FDF/XFDF

Si vous souhaitez supprimer le message d'évaluation du document résultant, ou vous débarrasser des limitations de fonctionnalités, contactez le service commercial pour une licence temporaire valable 30 jours.