mxGraph本地保存功能失效问题咨询及配置需求求助

Absolutely, you can get the save feature working locally with mxGraph—you just need to work around browser security restrictions and tweak some default configurations. The core issue here is that the out-of-the-box save setup expects a backend server, which isn't present when you're running the app directly from your local filesystem. Let's break down how to fix this:

1. Why the Default Save Fails Locally #

When you click the save button, the default mxGraph code tries to send your diagram data to a server-side script (like save.php). Since you're running the app via the file:// protocol (opening the HTML file directly), browsers block this request for security reasons—hence the error you're seeing.

2. Quick Fix: Run a Local Web Server #

The easiest way to bypass local file restrictions is to host the app on a simple local server:

• Python: Open your terminal, navigate to the mxGraph project folder, and run:
  • For Python 3: python -m http.server 8000
  • For Python 2: python -m SimpleHTTPServer 8000
• Node.js: If you have Node installed, use npx http-server (install it first with npm install -g http-server if needed)
• Then load the app at http://localhost:8000 instead of opening the HTML file directly. This will let the default save logic communicate with the included server scripts (like save.php) if you have PHP running, or you can adjust it to save locally as below.

3. Custom Fix: Modify Save Logic for Client-Side Downloads #

If you don't want to run a server, you can rewrite the save function to download the diagram directly to your computer without a backend:

• Locate the save function in your mxGraph code (usually in editor.js or the main app script)
• Replace the existing save code with this client-side download snippet:

  function handleSave() {
    // Encode the diagram to XML
    const encoder = new mxCodec();
    const diagramNode = encoder.encode(graph.getModel());
    const diagramXml = mxUtils.getXml(diagramNode);
  
    // Create a downloadable blob
    const blob = new Blob([diagramXml], { type: "application/xml" });
    const downloadUrl = URL.createObjectURL(blob);
  
    // Trigger the download
    const downloadLink = document.createElement("a");
    downloadLink.href = downloadUrl;
    downloadLink.download = "my-mxgraph-diagram.xml";
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    URL.revokeObjectURL(downloadUrl);
  }
  

• Update the save button's click event to call this handleSave() function instead of the original server-facing one.

4. Troubleshooting Common Errors #

• CORS/File Access Errors: Double-check that you're loading the app via http://localhost and not file://. Browsers block cross-origin requests (even to local files) for security.
• Missing mxGraph Utilities: If you see errors about mxCodec or mxUtils not being defined, make sure all required mxGraph scripts are loaded correctly in your HTML file—verify the script paths match your project structure.
• Download Blocked: Some browsers might block the automatic download prompt. Check your browser's notification center or settings to allow downloads from localhost.

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