一行代码集成 DWG/DXF 图纸查看:测量批注,数据不出站

如何用纯浏览器端的 CAD 查看器,凭 URL 直接显示图纸------支持测量与批注------同时让文件始终不离开你自己的站点。

多数「在浏览器里看 CAD」的小工具,套路其实一样:把图纸交给别人的服务器。文件被上传或代理,在你无法掌控的基础设施上渲染,再塞进一个 iframe。方便是方便------但对建筑事务所、工厂,以及把图纸当作机密资产的产品来说,这同时也是隐私隐患。还有另一条路。

把 iframe 指向你公开的 DWG 或 DXF 地址。图纸在访问者浏览器中拉取,完全在客户端解析与渲染,并以 review 模式打开,用户可以测量和批注------却不能改图,也不能新建图元。因为这是一套全前端技术栈,图纸不必经过任何 CAD 后端。文件留在你的网站上(或任何你已经信任的源站)。 这既是更简单的集成方式,也是更强的数据安全叙事。

这正是 MLightCAD iframe 插件要解决的问题。

用一句话讲清隐私差异

传统嵌入式查看器往往是:你的文件 → 对方云端 → 对方查看器。

MLightCAD 的嵌入方式是:你的文件 URL → 访问者的浏览器 → 本机解析与渲染。

没有 CAD 转换集群,没有强制上传链路,也不会因为「只是想展示一张图」就把图纸堆进第三方仓库。如果 DWG 已经放在你的 CDN 或静态站点上,并且 CORS 允许嵌入页拉取,那么字节路径就是:从你的主机到用户的浏览器。这是架构级保证,而不是条款里的一句话。

iframe 里你能得到什么

只需一个 iframe,即可:

  • 通过查询参数(url=...)打开 .dwg / .dxf
  • 默认 review 模式:平移、缩放、测量、批注------不是编辑,也不是新建几何
  • 可选显示工具栏与命令行
  • 选择语言、主题,以及缩放至全图范围,还是恢复文件中保存的视口

最小示例:

html 复制代码
<iframe 
  src="https://mlightcad.com/embed.html?url=https://example.com/plans/floor.dwg&mode=review&toolbar=1"
  style="width:100%;height:600px;border:0"
  allowfullscreen
>
</iframe>

https://example.com/plans/floor.dwg 换成你基础设施上任意可公开访问的图纸即可。

为什么默认用「review」很重要

嵌入页常常会分享给客户、承包商或公众。在小部件里默认开放完整写权限,等于邀请误操作。

MLightCAD 的嵌入默认使用 mode=review

模式 用户能做什么
review(默认) 查看、测量、批注 --- 不可修改图纸或创建图元
read 仅查看
write 你显式开启时,完整编辑

保留有用的审阅工具,却不会把每次嵌入都变成无人看管的编辑器。

值得了解的查询参数

参数 默认 作用
url --- .dwg / .dxf 的绝对 HTTPS 地址
mode review review / read / write
view extents extents(缩放到全图)或 saved(文件 VPORT)
lang en 查看器界面:enzhtrcs
toolbar 0 设为 1 显示工具栏
commandline 0 设为 1 显示命令行
theme dark darklight

可在文档页现场组装并预览这些参数:mlightcad.com/iframe-plug...

一个实际要求:CORS

因为由浏览器拉取文件,若图纸不与嵌入页同源,图纸所在主机必须允许跨域读取。这是零后端设计的代价:你在自己的文件主机上配置响应头,而不是把图纸交给专有查看器云。

若你已经用合理的 CORS 策略托管静态资源,就足够了。把 url 指向文件,再嵌入即可。

它如何融入更大的 MLightCAD 技术栈

MLightCAD 的 cad-viewer 是一套 浏览器原生 CAD 栈:DWG/DXF 解析、WebGL 渲染与编辑逻辑,都按「无需 CAD 服务器」来设计。iframe 插件是同一理念面向「丢进任意 CMS」的交付面------与产品其余部分一样坚持架构级隐私,适合产品站、文档站,以及只需查看与审阅的门户。

结语

嵌入 CAD 曾经意味着二选一:「自己做查看器」,或「把图纸送到别人的服务器」。

现在有了第三种选择:把文件发布在你本来就托管的地方,传入 URL,让浏览器完成其余工作------在 review 模式下支持测量与批注,并且不需要任何必须「看见」图纸的后端。

如果你的产品承诺客户图纸始终由客户掌控,那你的嵌入小部件也应该兑现同一承诺。

相关推荐
小林ixn1 小时前
单例模式:从弹窗管理到全局状态,一个模式搞定
前端·javascript·设计模式
AI编程实验室1 小时前
Node.js Agent Handoff 仓库扫描 MVP:忽略规则、include 通配与稳定输出实现
前端·ai编程
猫不易1 小时前
从 Virtual DOM 到 Vapor:Vue 3.6 的另一条路
前端·vue.js
光影少年1 小时前
react navite性能优化 & 常见坑
前端·react native·掘金·金石计划
八角丶1 小时前
Node.js Cluster 详解
前端·node.js
名字还没想好☜1 小时前
React 用 useEffect 做轮询实战:setInterval 拿到旧 state 的闭包陷阱与正确清理
前端·javascript·react.js·react·useeffect
hiahiahia1231 小时前
AI Web 项目的文件到底应该怎么放?
前端·人工智能
愚公搬代码1 小时前
【愚公系列】《Web应用安全》003-测试环境的搭建
前端·安全
_codemonster2 小时前
主流前端技术分层选型
前端