在完成了环境搭建、视图控制、命令行驱动以及图纸编辑的全流程探索之后，数据持久化这一步，可以说是实现完整云端工程设计系统的关键环节。在实际工程项目中，图纸不仅需要能够在浏览器中流畅渲染，更重要的是，编辑后的数据必须能够安全地回传给服务器，或者转换为DWG、PDF等通用格式进行归档存储。

可能有人会误以为MxCAD的保存功能仅仅是简单的“文件下载”，事实并非如此。这背后是一个依赖前端与后端紧密协作的复杂过程。本文将详细拆解这一完整流程，帮助你真正打通云端设计的闭环。

核心原理：MxCAD云图开发包的架构逻辑

在编写代码之前，必须明确MxCAD的文件架构逻辑。为了实现在Web端的高性能渲染，MxCAD采用了一种专有的mxweb格式作为核心数据载体。

这里有一个需要明确的核心逻辑：浏览器中的JavaScript，无法直接将图形数据转换为AutoCAD那样复杂的DWG格式。因此，保存图纸的本质，是将前端的mxweb数据上传到服务器，再由服务器端的转换引擎（也就是MxCAD云图开发包）进行还原和转码，最终生成标准格式。

简而言之，就是“前端负责交互与展示，后端负责存储与转码”。这一架构思路将贯穿整个实现过程。

实战步骤详解

完整的图纸保存流程，可以分解为四个标准步骤：前端序列化、数据上传、后端转码、前端下载。

步骤一：前端序列化（生成 mxweb 数据）

在MxCAD的架构中，前端是用户操作的入口，所有的绘图、编辑、图层管理等操作，均在浏览器内存中进行。要将这些动态数据持久化保存，第一步就是为当前绘图环境生成一份“快照”。

MxCpp.getCurrentMxCAD().saveFile() 这个方法，就是MxCAD提供的核心API。它能够将当前绘图区中的所有图形数据、图层状态、视图配置等信息，全部序列化为mxweb格式的二进制数据。mxweb是专为Web环境优化的轻量级格式，浏览器解析和渲染速度极快。

此核心API包含以下参数：

• filename：可选参数，用于指定文件名。若不填写，则使用系统默认名称。
• call：可选回调函数。文件保存完成后会被调用，参数data包含序列化后的文件数据（通常是ArrayBuffer或Blob类型）。
• isDownland：布尔值，默认值为true。为true时，保存后会触发浏览器自动下载；为false时，则仅生成数据，适用于后续上传至服务器的场景。
• isShowSaveFileDialog：布尔值，默认值为true。为true时会弹出系统保存对话框，让用户选择保存位置；为false时则进行静默保存，适合自动化流程。
• parameter：可选对象，用于传递额外参数，例如自定义元数据、版本号等。

代码示例一：直接在当前界面下载图纸文件

import { MxCpp } from "mxcad"
const btn = document.createElement("button")
btn.addEventListener("click",()=>{
    MxCpp.getCurrentMxCAD().sa veFile(void 0, void 0, true, true, {compression: 0 })
})
document.body.appendChild(btn)

代码示例二：获取图纸Blob 对象

import {MxCpp } from "mxcad";
MxCpp.getCurrentMxCAD().sa veFile(void 0, (data) => {
    // 处理 Safari 兼容性
    let isSafari = /^((?!chrome|android).)*safari/i.test(na vigator.userAgent);
    let blob = new Blob([data.buffer], {type: isSafari ? "application/octet-stream" : "application/octet-binary" });
    // 调用上传函数
    uploadFileToServer(blob);
}, false, // 不触发下载
false, // 静默保存
{compression: 0 } // 不压缩
);

步骤二：上传至后端（数据传输）

前端获取到Blob数据后，需要通过HTTP协议将其传输到服务端。

传输逻辑相对标准：使用FormData封装文件数据，通过fetch或axios发起一个POST请求即可。

代码示例：标准上传逻辑

const uploadFileToServer = async (fileData, fileName) => {
    const formData = new FormData();
    formData.append("file", fileData, fileName); // 封装文件
    formData.append("bizId", "project_12345"); // 携带业务参数
    try {
        const response = await fetch("localhost:1337/api/upload", {
            method: "POST",
            body: formData,
        });
        const result = await response.json();
        console.log("上传成功，服务器返回路径:", result.filePath);
        return result.filePath;
    } catch (error) {
        console.error("上传失败:", error);
    }
};

步骤三：后端转码（格式转换）

后端收到.mxweb文件后，需要调用本地的MxCAD转换服务（例如mxcadassembly）进行“无头”转换。

核心转换流程如下：

• 定位文件：获取前端上传的.mxweb文件在服务器上的临时存储路径。
• 构建命令：组装转换指令，指定输入文件（源文件）、输出文件（目标文件）以及目标格式（如DWG、PDF）。
• 执行转换：通过子进程调用转换引擎，完成格式转换。

下面以转换为DWG图纸格式为例：

命令格式为 ./mxcadassembly '{"srcpath":"输入路径","outpath":"输出目录", "outname":"文件名"}'。

Node.js 后端核心代码片段：

const {exec } = require('child_process');
const path = require('path');
function convertMxWebToDwg(mxwebFilePath, outputDwgPath, response) {
    const converterPath = '/path/to/mxcadassembly'; // 转换工具路径
    // 构建参数对象
    const params = {
        srcpath: mxwebFilePath,
        outpath: path.dirname(outputDwgPath),
        outname: path.basename(outputDwgPath, '.dwg'),
        compression: 0
    };
    // 组装命令 (注意 JSON 字符串外层的单引号)
    const command = `"${ converterPath}" '${ JSON.stringify(params)}'`;
    console.log("执行命令:", command);
    // 执行转换
    exec(command, (error, stdout, stderr) => {
        if (error) {
            return response.json({ret: 'ConvertFailed', error: error.message });
        }
        try {
            const result = JSON.parse(stdout.trim());
            if (result.code === 0) {
                response.json({ret: 'Ok', file: `/mxcad/file/${ path.basename(outputDwgPath)}` });
            }
        } catch (e) {
            response.json({ret: 'Error', message: '解析失败' });
        }
    });
}

需要特别注意的是，后端转码服务通常依赖Windows环境或特定的Linux容器环境，并且需要提前安装好对应的MxCAD服务端组件。

步骤四：前端下载（本地归档）

后端转换完成后，文件已变成用户熟悉的.dwg或.pdf等标准格式。此时，前端只需提供一个文件访问入口，让用户将这些标准文件下载到本地进行归档，整个操作闭环即可告成。

尽管saveFile方法本身支持直接下载（设置isDownland: true），但在上述“上传-转码”流程中，下载通常是一个独立的后续操作，需要与整体流程协同完成。

基于 Node 服务的快速实现方案

如果不想从零搭建后端服务，可以直接使用MxCAD云图开发包预置的转换服务，快速完成集成。

快速启动

• 下载并解压 MxCAD 云图开发包。
• 进入目录：MxDrawCloudServer/Bin/MxDrawServer/Windows。
• 启动服务：在终端执行 node app.js。
• 端口：服务默认监听 1337 端口。

核心接口速查

服务启动后，只需调用内置的接口，配合saveFileToUrl方法，即可完成保存操作，无需手动处理上传和转码等繁琐细节。以下表格展示了常用接口的详细信息：

核心 API：saveFileToUrl

saveFileToUrl 是MxCAD云图开发包中封装好的核心API，用于将当前图纸数据异步传输到指定的后端服务地址。这个接口的优势在于通用性：开发者无需编写复杂的上传逻辑，只需根据需求传入不同的后端接口URL，即可实现保存为DWG、MXWEB或PDF等不同格式。

sa veFileToUrl(sSa veProgramUrl: string,
    call: (iResult: number, sServerResult: string) => void,
    filename?: string,
    param?: any): boolean;

API参数说明：

• sSa veProgramUrl：目标后端接口地址，决定文件保存的格式。
• call：回调函数，用于接收服务端的响应结果。
• filename：指定保存的文件名（可选）。
• param：额外的JSON参数（例如PDF的宽高设置）。

调用示例一：保存为 DWG

import {MxCpp } from "mxcad"
// 1. 获取当前 MxCAD 对象
const mxcad = MxCpp.getCurrentMxCAD()
// 2. 调用接口，传入保存 DWG 的后端地址
mxcad.sa veFileToUrl("localhost:1337/mxcad/sa vedwg",
    (iResult, sServerResult) => {
        // 3. 处理服务端返回结果
        if (iResult === 0) {
            // sServerResult 是服务端返回的 JSON 字符串
            // 结构示例: { "ret": "ok", "file": "test.dwg" }
            const retData = JSON.parse(sServerResult);
            if (retData.ret === "ok") {
                console.log("文件保存成功，服务器路径：",
                    `localhost:1337/mxcad/file/${ retData.file}`);
                // 此时 retData.file 即为保存后的文件访问路径（相对路径或完整URL）
                // 开发者可将其用于后续的文件下载或归档逻辑
            }
        } else {
            console.error("文件上传失败");
        }
    });

调用示例二：保存为 PDF 并携带参数

如需保存为PDF并指定图纸尺寸，可通过第四个参数param传递配置：

import {MxCpp } from "mxcad"
const mxcad = MxCpp.getCurrentMxCAD()
// 传入第四个参数 JSON.stringify({ width: "2000", height: "2000" }) 设置 PDF 尺寸
mxcad.sa veFileToUrl("localhost:1337/mxcad/sa vepdf",
    (iResult, sServerResult) => {
        const ret = JSON.parse(sServerResult);
        if (ret.ret === "ok") {
            // 获取生成的 PDF 下载链接
            const pdfUrl = "localhost:1337/mxcad/file/" + ret.file;
            console.log("PDF生成成功:", pdfUrl);
        }
    },
    "my_drawing", // 文件名
    JSON.stringify({width: "2000", height: "2000"}) // 额外参数
);

文件存储路径管理

默认情况下，转换后的文件会被存放在云图开发包的 public/mxcad/file/ 目录下。

• 访问地址：localhost:1337/mxcad/file/文件名
• 路径修改：如果需要更改存储位置，可以编辑 ini.js 配置文件中的 uploadPath 字段。

// 修改 MxDrawCloudServerBinMxDrawServerWindows 下的 ini.js 文件
this.mxcad = {
    uploadPath: "./public/mxcad/file/", // 修改此处为你自定义的路径
    mxbinPath: "../../MxCAD/Release/"
};

总结

本文详细拆解了MxCAD图纸保存的“四步走”策略。核心在于充分理解并灵活运用这一前后端协同的架构：前端负责交互与展示，生成轻量级的mxweb数据；后端负责存储与转码，利用转换引擎将mxweb还原为标准格式。

通过MxCAD云图开发包提供的Node服务，开发者可以跳过复杂的底层转换逻辑，快速实现DWG、PDF等格式的导出功能。从“看图”、“编辑”到“保存”，图纸管理的整个生命周期得以完整串联。