在线CAD中实现打开CAD图纸的方式.docx

文件(F)«0(V)R)CAD梦想画图1.0fg(A16(O)(D)M(E)侬0)帮助(H)Q figByLayer邮羊(0MS8W宏 什QtSS安普如由在线CAD中实现打开CAD图纸的方式前百随着云端化数字经济时代的到来，越来越多的用户需要在网页端对图纸进行查看 和审批，今天给大家详细讲一下在线的方式打开CAD图纸的方法，示例项目地 址：https:3000/mxcad/CAD梦想画图就MXDraW帮助瓯÷-> C 30mxcadModel LayoutlMxZoomE1306X)18,14,7050栅格 正文 极轴对象捕捉对象追踪DYN在示例项目中可以直接打开CAD图纸，这依赖于mxcad(https:mxcadx.gitee.io/mxcad docszh)这个前端库可以读取 MxDraw 云图开发包(https: CAD 图纸转换成 mxweb 格式的文件。有了图纸转换和文件渲染之后，就可以做到读取和编辑CAD图纸。原理首先上传CAD图纸到我们Node服务进行处理，它会调用MxDraw云图开发包将CAD图纸转换成mxweb文件，然后返回给前端对应的访问地址。该示例项目对应的NOde服务 参考具体的NOde代码，请点击查看该链接了解详情https: = Il5我们可以直接在开发包找到对应的NOde服务源码，也可以直接使用对应接口， 但是可能它并不能完全满足你的需求，需要自己修改甚至重写，为此我们将详细 讲解一下应该如何来实现图纸转换的接口。后端具体实现首先我们需要Node环境点击查看安装(https: WWW如果你不是使用的NOde作为后端开发语言，那么只需要理解如何转换就好，然 后自行实现。验证是否安装成功node -V下面我们可以直接通过Node child_process使用子进程调用云图开发包中的mxcadassembly 程序mxcadassembly程序所在目录windows 目录：MxDrawCloudServerBinMxCADReleasemxcadassembly.exeIiniIX 目录：MxDrawCloudServerBinLinuxBinlvlxCADmxcadassemblyconst exec = require(,child-process,);/如果是要将mxweb格式文件转成服务器 那么SrCPath就是mxweb文件路径而C)Utname的后缀名应该是对应图纸的后缀名，如:test.dwgconst param = srcpath: “要转换的文件在服务器上的路径“，outpath: “转换后生成的文件在服务器上的目录路径“，OUtname:,转换后的文件名称,，)execC"mxcadassembly 程序在服务器所在位置,，5JS0N.stringify(param),'', ()=>)如上所知，我们要将mxweb文件保存为dwg图纸只需要改变srcpath和outname 就可以了将CAD图纸上传到服务器上，请自行实现，这里建议点击查看(https: = Il5)然后结合云图开发包 MXDraWCIOUdSerVer BinMxCADMxCADSaveF ileserver. js 文件查看到源码可以非常清晰的知道如何上传CAD实现转换和保存dwg图纸。最后我们将转换的文件放在了服务器上，当然你也可以上传到OSS或者其他云存 储上，然后返回对应的访问地址就可以了。前端具体实现前端直接调用后端提供的接口上传CAD图纸，等成功转换成mxweb文件后在 前端用mxcad打开,打开mxweb文件点击查看参考(https:mxcadx.gitee.io/mxcad docszhl.%E6%8C%87%E5%8D%97l.%E5 %BF%AB%E9%80%9F%E5%85%A5%E9%97%A8.htmH%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95)这里主要讲解一下如何将目前网页上打开渲染好并且编辑了的mxweb文件保存 成CAD图纸。首先我们需要得到现在修改后的mxweb文件数据,然后上传到服务器，后端将 mxweb格式的数据写在一个mxweb格式的文件中,最后使用mxcadassembly程序 将mxweb格式文件转换为CAD图纸的文件，然后返回对应的访问地址。默认情况下，我们提供SaVeFiIeTOUrI来实现保存CAD图纸，它实际上帮我们将 当前的mxweb数据上传到了你指定的一个后端接口中，下面是它的使用方法：import MxCppz MxTooIs from "mxcad"MxCpp.getCurrentMxCAD0.saveFileToUrl("http:/localhost:3337/mxcacl/savefil edwg,z (iResultz SserverResuIt)= > *这个就是对应接口的返回数据结果*/console.log(sserverResult)/我们可以直接拿到请求结果中携带的CAD图纸的访问地址下载对应的图 纸/假设返回结果是filePathconst filePath = JSON.parse(sserverResult).filePathfetch(filePath).then(async (res)=> const blob = await res.blob()/默认使用了一些新的特性，如果不支持则会自动降级使用a标签下载MxTools.saveAsFileDialog(blobzfilename: ,test.dwg,ztypes: description: "dwg 图纸”，accept: ,applicationoctet-stream": ',.dwg,z,)http:/localhost: 3337/mxcad/savefiledwg接口实际就是云图开发包中提供的对 应的Node服务。但是在实际使用时，这种常规的方法并不能完全满足你的需求，这个时候我们可 以自己来实现这个保存dwg的功能，请参考如下代码：import MxCpp from "mxcad"const mxcad = MxCpp.getCurrentMxCADQ/这里直接拿到mxweb数据mxcad.saveFile(void 0, (data) = > let blob: Blobconst isSafari 二/A(?!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: ,applicationoctet-binary");)/这里直接将blob转成fileconst file = new File(blobz ,test.mxweb,z type: isSafari ?"application/octet-stream": ,applicationoctet-binary")/上传文件转CAD图纸fetch(,httplocalhost3337mxcadsavefiledwg,z method:'PoS，body: file)z false, true)以上代码只是参考代码，其核心是需要利用云图开发包，下载好后，它能够最快让你看到实际效果，详情参考文档：https:heD?Pid=32前端 mxcad 文档:https:mxcadx.gitne.io/mxcad docszh完整演示在网页打开保存CAD图纸的DEMO如果下载了云图开发包你阅读了其中前后端源码还是无法理解如何实现打开和 保存图纸，在这里给你准备了一个最简完整DEMO只需要js + html就可以完整实现网页打开和保存CAD图纸的页面，方便你快速理解如何打开和保存CAD 图纸。首先该DEMO是一个Node服务，需要安装Node环境(https:/WWW 查看是否安装 完成node -V然后可以下载我们的demo源码： 打开保存 CAD 图纸/demo.zip下载好demo后 解压进入demo目录执行如下命令： node app.js最后控制台会提示访问:http:IoCalhoSt:3333/注意：DEMO中的mxcad和mxdraw库是通过CDN方式引入的，如果你发现打 开页面后没有CAD图纸显示，可能是你无法访问CDN资源，这时可以选择通过 npm安装下载mxcad和mxdraw库 然后引入其中对应的文件：npm init npm install mxcad mxdraw 然后将CDN引入的改成本地引入就行。