基于FormIO表单生成并下载指定内容文件的技术求助

Hey John, let's work through this problem to get you that clean #define file download exactly how you want it!

Core Approach #

The key here is to intercept FormIO's submit event, filter out only the radio button data from the submission, format it into the #define syntax you need, and then trigger a file download—bypassing the default metadata-heavy submission output.

Step-by-Step Solution #

Assuming your FormIO form is initialized in your HTML like this, here's the modified code to add the custom download behavior:

<div id="formio"></div>
<script src="https://cdn.form.io/formio.min.js"></script>
<script>
  // Initialize your FormIO form
  Formio.createForm(document.getElementById('formio'), 'YOUR_FORM_URL').then(function(form) {
    // Listen for the form submit event
    form.on('submit', function(submission) {
      // Prevent the default FormIO submission (remove this if you still need to send data to their server)
      event.preventDefault();

      // Recursively find all radio button components (handles nested fieldsets too)
      const getRadioComponents = (components) => {
        let radios = [];
        components.forEach(comp => {
          if (comp.type === 'radio') {
            radios.push(comp);
          } else if (comp.components) {
            radios = [...radios, ...getRadioComponents(comp.components)];
          }
        });
        return radios;
      };

      const radioComponents = getRadioComponents(form.components);
      let defineContent = '';

      // Build the #define content from selected radio values
      radioComponents.forEach(component => {
        const fieldKey = component.key;
        const selectedValue = submission.data[fieldKey];
        // Match the selected value to its human-readable label
        const optionLabel = component.values.find(opt => opt.value === selectedValue)?.label || selectedValue;
        
        // Format into #define syntax (adjust naming convention as needed)
        const macroName = optionLabel.toUpperCase().replace(/\s+/g, '_');
        defineContent += `#define ${macroName} ${selectedValue}\n`;
      });

      // Create and trigger the file download
      const blob = new Blob([defineContent], { type: 'text/plain' });
      const downloadUrl = URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      
      downloadLink.href = downloadUrl;
      downloadLink.download = 'config_defines.h'; // Customize your filename here
      document.body.appendChild(downloadLink);
      downloadLink.click();
      
      // Clean up temporary resources
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(downloadUrl);

      // Uncomment below if you still want to submit data to FormIO's backend
      // form.submit(submission);
    });
  });
</script>

Key Details Explained #

1. Intercept Submit Event: We hook into FormIO's submit event to take control of what happens after the user clicks submit.
2. Filter Radio Components: The recursive getRadioComponents function ensures we find all radio buttons, even if they're nested inside fieldsets or other containers.
3. Map Values to Labels: FormIO's submission only stores the raw value of the selected radio option—we match that value back to its human-friendly label from the form component's configuration.
4. Generate #define Syntax: We convert each radio selection into the #define MACRO_NAME VALUE format, adjusting the macro name to be uppercase with underscores (easy to tweak if you prefer a different style).
5. Trigger Download: Using the Blob API, we create a text file from our formatted content and trigger a browser download without needing any server-side code.

Troubleshooting Tip #

If you were struggling with traversing the submission variable before, remember that all form field values live under submission.data—the rest of the submission object is just FormIO's metadata (like _id, createdAt, etc.), which we're intentionally ignoring here.

内容的提问来源于stack exchange，提问作者John