如何实现从HTML输入到Swagger/OpenAPI规范文件的转换？

Absolutely! This is totally doable—you can build a simple frontend solution (or pair it with backend logic if needed) that takes user input from HTML fields like title and version, then generates a valid Swagger/OpenAPI specification file with the corresponding info section filled in.

Frontend-only Implementation (Vanilla JavaScript) #

This approach works entirely in the browser, no server required. Here's a quick, practical example:

Step 1: HTML Input Form #

First, create a simple form to capture the core info fields you need (you can expand this with more fields like contact or license later):

<form id="swaggerGeneratorForm">
  <div>
    <label for="title">API Title:</label>
    <input type="text" id="title" required placeholder="My Awesome API">
  </div>
  <div>
    <label for="version">API Version:</label>
    <input type="text" id="version" required placeholder="1.0.0">
  </div>
  <div>
    <label for="description">API Description:</label>
    <textarea id="description" placeholder="A brief overview of your API's purpose"></textarea>
  </div>
  <button type="submit">Generate Swagger Spec</button>
</form>
<a id="downloadLink" style="display:none; margin-top:1rem;">Download Swagger JSON</a>

Step 2: JavaScript to Generate & Download the Spec #

Add this script to handle form submission, build the Swagger/OpenAPI structure, and let users download the final file:

document.getElementById('swaggerGeneratorForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Grab values from input fields
  const title = document.getElementById('title').value;
  const version = document.getElementById('version').value;
  const description = document.getElementById('description').value;
  
  // Build a valid base Swagger/OpenAPI spec
  const swaggerSpec = {
    openapi: '3.0.0', // Swap to `swagger: '2.0'` if you need Swagger 2.0 instead
    info: {
      title: title,
      version: version,
      description: description || ''
      // Add extra fields like `contact` or `license` here if you added inputs for them
    },
    paths: {} // You can predefine paths or let users extend this later
  };
  
  // Convert to human-readable JSON
  const formattedSwagger = JSON.stringify(swaggerSpec, null, 2);
  
  // Create a downloadable file
  const blob = new Blob([formattedSwagger], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.getElementById('downloadLink');
  
  downloadLink.href = url;
  downloadLink.download = 'swagger-spec.json';
  downloadLink.style.display = 'block';
  downloadLink.textContent = 'Grab your generated Swagger Spec';
});

Extending the Solution #

If you need more advanced functionality, you can:

• Add more input fields for additional Swagger sections (like servers, paths, or components)
• Integrate a JSON editor component (such as CodeMirror) to let users edit the full spec alongside the form fields
• Pair it with a backend (e.g., Node.js or Python) to validate the generated spec against official Swagger/OpenAPI schemas before downloading

Quick Tips #

• Add input validation (e.g., enforce semantic versioning for the version field) to ensure the generated spec is valid
• For Swagger 2.0 compatibility, just replace the openapi: '3.0.0' line with swagger: '2.0' in the spec structure

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