Question

打开和保存图纸

::: tip 重要提示

mxcad 只支持打开和保存mxweb格式的文件, mxweb格式文件和CAD图纸互转相关教程 在图纸转换中有详细说明

:::

打开保存mxweb文件

打开和保存图纸实际上是指打开和保存mxweb文件, 将mxweb文件转成CAD图纸请参考图纸转换

在快速入门中, 创建的mxcad控制实例中存在如下方法:

openWebFile 打开

首先传入的参数需要的是mxweb文件的网络路径, 就是通过互联网可以访问到对应的mxweb文件。

有时候我们希望在本地直接打开mxweb文件, 应该如何做呢？

代码如下:

const input = document.createElement("input")
input.type = "file"
input.addEventListener("change", (e)=> {
    const filePath = URL.createObjectURL(e.target.files[0])
    mxcad.openWenFile(filePath)
})
document.body.appendChild(input)

当我们选择文件后，会将文件创建一个DOMString用于访问该本地文件资源，我们将这个DOMString 作为参数传入就可以了

saveFile 保存

1.最好是在用户触发的事件(一般为点击事件)中调用, 这样才有权限浏览器提供的保存文件对话框, 否则可能会报错或者直接下载mxweb文件

2.如果希望保存的mxweb文件不进行压缩(打开速度更快，文件体积变大)，那么可以查看saveFile有个parameter参数, 我们设置成{ compression: 0 } 保存的文件就是不压缩的文件了

mxcad.saveFile(void 0, void 0, true, true, { compression: 0 })

3.在某些特殊情况，我们不希望直接下载, 那么我们可以通过设置对应的参数，让它不下载，而是在回调函数中得到它的二进制数据.

mxcad.saveFile(void 0, (data)=> {
      let blob: Blob
      let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
      if (isSafari) {
        blob = new Blob([data.buffer], { type: "application/octet-stream" });
      } else {
        blob = new Blob([data.buffer], { type: "application/octet-binary" });
      }
}, false, true, { compression: 0 })

实现打开CAD图纸的方式

示例项目地址: https://demo.mxdraw3d.com:3000/mxcad/

在示例项目中，可以直接打开CAD图纸，它是怎么做到的呢？

本质上还是需要转换成mxweb文件, mxcad也只能打开mxweb文件, 只是行为上看起来像直接打开了CAD图纸。

首先 上传CAD图纸到我们Node服务进行处理，

它会调用图纸转换中提供的程序将CAD图纸转换成mxweb文件，然后返回给前端对应的访问地址就好了。

我们该示例项目对应的Node服务, 方便参考具体的Node代码, 请点击查看该链接了解详情:https://help.mxdraw.com/?pid=115