在浏览器中不依赖于后端解析和查看AutoCAD DWG文件

2,001 阅读3分钟

在浏览器中解析DWG文件,这个以前是一个老大难问题。市面上常见的方案都是采用将文件上传到后端,解析为DXF、JSON或SVG文件后返回给前端。这样,前端可以进行解析或显示DWG文件。之所以这么做的核心原因是:在浏览器端没有一个可用的DWG文件解析器。现在,有了 libredwg-webGitlab 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的解析器也不少,可以用这些解析器。这些解析器的大小会更小一些。例如: