在浏览器中解析DWG文件,这个以前是一个老大难问题。市面上常见的方案都是采用将文件上传到后端,解析为DXF、JSON或SVG文件后返回给前端。这样,前端可以进行解析或显示DWG文件。之所以这么做的核心原因是:在浏览器端没有一个可用的DWG文件解析器。现在,有了 libredwg-web (Gitlab or Github)后,我们就可以彻底摆脱对后端的依赖,直接在浏览器中解析和显示DWG文件了。
libredwg-web
libredwg-web是基于开源项目libredwg构建一个基于Web Assembly技术的DWG/DXF解析器,它能够脱离后端在浏览器和Node.js环境中直接解析DWG/DXF文件。
使用方法
该库有两种使用方式。
npm install @mlightcad/libredwg-web
注意:需要注意的是该项目将wasm文件直接打包到了js文件中,所以你看不到wasm文件。
使用原始 WebAssembly 接口
原始的 Web Assembly 模块位于 wasm 目录下:
import { createModule } from "@mlightcad/libredwg-web/wasm/libredwg-web.js";
// 创建 libredwg 模块实例
const libredwg = await createModule();
// 将 DWG 文件内容写入临时文件并读取
const fileName = 'tmp.dwg';
libredwg.FS.writeFile(
fileName,
new Uint8Array(fileContent)
);
const result = libredwg.dwg_read_file(fileName);
if (result.error != 0) {
console.log('读取 DWG 文件失败,错误码: ', result.error);
}
libredwg.FS.unlink(fileName);
// 获取 Dwg_Data 指针
const data = result.data;
使用 WebAssembly 封装类
封装后的模块位于 dist 目录,提供了一个名为 LibreDwg 的类,用于简化 WebAssembly 的调用。它提供以下功能:
- 将 DWG 数据转换为强类型定义的 DwgDatabase 实例,便于使用;
- 提供更多原始 API 不支持的方法。
typescript
复制编辑
import { Dwg_File_Type, LibreDwg } from '@mlightcad/libredwg-web';
const libredwg = await LibreDwg.create();
const dwg = libredwg.dwg_read_data(fileContent, Dwg_File_Type.DWG);
const db = libredwg.convert(dwg);
// 转换完成后可释放 dwg 占用的内存
libredwg.dwg_free(db);
接口说明
用于访问 DWG/DXF 图形数据的接口分为两类:
以 Dwg 为前缀的接口
这类接口使用更简洁、结构更清晰,类似于 @mlightcad/dxf-json 项目中定义的接口,涵盖大多数常见图元类型,推荐优先使用。
以 Dwg_ 为前缀的接口
这些接口是 libredwg C++ 结构体的 JavaScript 版本。目前仅为部分结构体提供了对应的接口,主要用于将原始结构体数据转换为 DwgDatabase 对象。
因此,推荐使用 Dwg 前缀的接口。
示例应用
项目提供了了三个示例应用:
基于上面的第三个应用,可以将DWG文件转化为SVG直接在浏览器中显示DWG文件。
Q&A
Q:libredwg-web是否支持解析DXF文件? 支持的。但是,你需要重新构建libredwg-web。因为,libredwg-web为了降低Web Assembly的大小,默认构建方式是关闭了支持解析DXF文件和写DWG文件的。你可以按照libredwg-web的说明文档重新构建即可。当然,市面上已有的支持在浏览器中解析DXF的解析器也不少,可以用这些解析器。这些解析器的大小会更小一些。例如: