Leggere i valori dei campi modulo PDF per tipo con JavaScript

Quando qualcuno compila un modulo PDF e lo salva, i valori inseriti risiedono all'interno delle strutture dei campi del documento — non come testo semplice che puoi cercare o copiare in blocco. Per un modulo con trenta o quaranta campi, la trascrizione manuale diventa un collo di bottiglia. Il problema più profondo è che ogni tipo di campo memorizza il proprio valore in modo diverso: una casella di testo espone una stringa, una casella di controllo restituisce un booleano, una casella combinata separa le opzioni dalla selezione e un pulsante di opzione memorizza l'elemento scelto. Non esiste una singola chiamata uniforme "dammi il valore".

Questo articolo illustra come estrarre i valori dei campi modulo da un PDF usando Spire.PDF per JavaScript. La libreria viene eseguita su WebAssembly nel browser, quindi il documento viene analizzato localmente tramite un file system virtuale senza alcun round-trip verso il server. Vedrai come scorrere la raccolta di campi, effettuare il dispatch in base al tipo di ciascun campo e leggere la proprietà corretta per caselle di testo, caselle di riepilogo, caselle combinate, pulsanti di opzione e caselle di controllo.

Per l'installazione e la configurazione del progetto, consulta Integrare Spire.PDF per JavaScript in un progetto React. Il codice seguente presuppone che Spire.PDF sia installato e che il modulo WASM sia inizializzato.

Tipi di campo a colpo d'occhio

Prima di immergerti nell'implementazione, è utile mappare come ogni tipo di campo espone il proprio valore. Spire.PDF per JavaScript rappresenta i campi modulo come classi widget, e la proprietà che contiene il valore corrente varia da un tipo all'altro:

Il modello è chiaro: non esiste un'unica proprietà universale. La logica di estrazione deve verificare il tipo di ciascun campo e leggere la proprietà corrispondente, che è esattamente ciò che implementa la sezione successiva.

Iterare i campi e leggere per tipo

Il flusso di lavoro principale prevede tre passaggi: caricare il PDF, ottenere il suo modulo come PdfFormWidget, quindi scorrere la raccolta FieldsWidget e diramare in base alla classe di ciascun campo con instanceof. In ogni ramo, leggi la proprietà specifica del tipo e aggiungi il risultato a una stringa di report. Poiché il dispatch copre ogni tipo supportato, non è necessario sapere in anticipo quali campi contiene il documento — i campi non riconosciuti ricadono semplicemente in un'etichetta predefinita.

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;

Dopo che il ciclo è terminato, la stringa del report contiene una riga per campo con il suo nome, il tipo e il valore corrente. Il file viene scritto nel file system virtuale e quindi scaricato come file di testo:

La catena di instanceof è il cuore dell'approccio. Ogni ramo sa esattamente quale proprietà leggere, quindi l'output è corretto indipendentemente da quanti tipi di campo il documento combina insieme. Le tre sezioni successive affrontano le insidie che sorgono quando la proprietà del valore di un campo non è quella che potresti aspettarti.

Caselle di controllo: Checked vs Value

Un errore comune quando si leggono i campi casella di controllo è cercare una proprietà Value. Il widget casella di controllo — PdfCheckBoxWidgetFieldWidget — non espone affatto Value; tentare di leggerla restituisce undefined. Sotto il cofano, una casella di controllo tiene traccia del proprio stato tramite valori di esportazione: Off quando non è selezionata, e Yes o una stringa di esportazione personalizzata quando è selezionata. Una stringa grezza non può indicarti in modo affidabile se la casella è selezionata, quindi l'API omette deliberatamente Value e offre invece Checked.

La soluzione è semplice — usa sempre la proprietà booleana Checked:

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

Questa restituisce true quando la casella è selezionata e false in caso contrario, fornendoti un booleano pulito per la logica a valle senza alcuna analisi di stringhe.

Caselle di riepilogo e caselle combinate: SelectedValue vs Values

Le caselle di riepilogo e le caselle combinate condividono un modello dati in due parti che manda in confusione molti sviluppatori. Sia PdfListBoxWidgetFieldWidget sia PdfComboBoxWidgetFieldWidget espongono una raccolta Values e una stringa SelectedValue, ed è facile supporre che Values contenga il valore inserito dall'utente. Non è così.

Values è l'insieme completo delle opzioni disponibili. Ogni elemento della raccolta è un oggetto PdfListWidgetItem, quindi devi estrarlo con .Value per ottenere il testo dell'opzione. Scorrere Values ti dice cosa l'utente poteva scegliere, non cosa ha effettivamente selezionato. La selezione reale dell'utente si trova in SelectedValue come stringa semplice.

Usa SelectedValue per il valore corrente e scorri Values solo quando devi enumerare le scelte disponibili:

// 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);
}

Tenere distinte queste due proprietà è essenziale: trattare Values come la risposta ti dà l'elenco delle opzioni invece del risultato compilato, e le due cose raramente hanno la stessa lunghezza.

Gestione dei PDF crittografati

L'estrazione dei moduli inizia con l'apertura del documento. Se il PDF è protetto da password, chiamare LoadFromFile con il solo nome file genera un errore — "Impossibile aprire un documento crittografato. La password non è valida." — e non viene restituito alcun oggetto documento. I campi modulo non vengono mai raggiunti.

La soluzione è passare la password di apertura come secondo argomento:

doc.LoadFromFile(inputFileName, 'spire123');

Una volta che il documento si apre correttamente, il resto del flusso di estrazione — creare il PdfFormWidget, scorrere i campi, effettuare il dispatch per tipo — funziona esattamente allo stesso modo di un file non crittografato. La password controlla solo il caricamento iniziale; non cambia il modo in cui vengono letti i valori dei campi.

Vedi anche

• Integrare Spire.PDF per JavaScript in un progetto React — configurazione, installazione e inizializzazione WASM
• Compilare i campi modulo PDF con Spire.PDF per JavaScript — scrivere valori nei campi modulo a livello di codice
• Importare ed esportare i dati dei moduli PDF con Spire.PDF per JavaScript — serializzare i dati del modulo in file FDF/XFDF

Se desideri rimuovere il messaggio di valutazione dal documento risultante o eliminare le limitazioni delle funzionalità, contatta l'assistenza commerciale per ottenere una licenza temporanea valida per 30 giorni.