使用vis.js的JavaScript项目：如何创建并存储数据至.json等文件？

No worries, let's figure this out together! I get that even simple tasks can feel tricky when you can't find docs for them, so let's extend your existing saveData function to handle saving as .txt, .xml, or .json files directly in the browser. Here's how to do it:

First, we'll create a generic file download helper function that works for all formats—this handles the browser's file-saving logic so we don't repeat code:

// Helper function to trigger file download in the browser
function downloadFile(content, filename, contentType) {
  const blob = new Blob([content], { type: contentType });
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  
  link.href = downloadUrl;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  
  // Clean up to free browser resources
  document.body.removeChild(link);
  URL.revokeObjectURL(downloadUrl);
}

Next, we'll update your existing saveData function to format the data into your desired file type and trigger the download. We'll add logic to handle all three formats, with options to either hardcode the format or let users choose:

function saveData(data, callback) {
  // Your existing data preparation logic
  data.id = document.getElementById('node-id').value;
  data.label = document.getElementById('node-label').value;
  clearPopUp();

  // Option 1: Hardcode the format (replace with 'txt' or 'xml' as needed)
  // let saveFormat = 'json';

  // Option 2: Let users choose via a dropdown (add the HTML below first)
  const saveFormat = document.getElementById('save-format').value;

  let fileContent, fileName, mimeType;

  switch(saveFormat) {
    case 'json':
      // Format data into pretty-printed JSON (easy to re-import later)
      fileContent = JSON.stringify(data, null, 2);
      fileName = `node-data-${data.id}.json`;
      mimeType = 'application/json';
      break;

    case 'txt':
      // Format into human-readable plain text
      fileContent = `Node Details:\nID: ${data.id}\nLabel: ${data.label}\n`;
      // Add extra properties if your data has them (e.g., color, size)
      if (data.color) fileContent += `Color: ${data.color}\n`;
      fileName = `node-data-${data.id}.txt`;
      mimeType = 'text/plain';
      break;

    case 'xml':
      // Build basic XML structure (extend for nested properties if needed)
      fileContent = `<node>\n  <id>${data.id}</id>\n  <label>${data.label}</label>\n`;
      if (data.color) fileContent += `  <color>${data.color}</color>\n`;
      fileContent += '</node>';
      fileName = `node-data-${data.id}.xml`;
      mimeType = 'application/xml';
      break;

    default:
      console.error('Unsupported file format selected');
      return;
  }

  // Trigger the download
  downloadFile(fileContent, fileName, mimeType);

  // Call your original callback
  callback(data);
}

If you want users to pick the format themselves, add this simple dropdown to your HTML:

<!-- Add this where you want the format selector to appear -->
<label for="save-format">Save as:</label>
<select id="save-format">
  <option value="json">JSON</option>
  <option value="txt">Plain Text (.txt)</option>
  <option value="xml">XML</option>
</select>

Quick Notes: #

• JSON: This is the most straightforward format for reusing data in vis.js later—just use JSON.parse() to convert the file content back into a JavaScript object.
• TXT: Great for quick, human-readable exports. Adjust the fileContent string to include any additional properties your nodes have.
• XML: The example uses a basic structure; if your data has nested properties (like node positions or styles), you'll want to add recursive logic to build the full XML tree.

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