如何用纯HTML/JavaScript运行vagran dxf-viewer并解析指定DXF文件

核心方案 #

使用纯JavaScript的DXF解析工具读取文件内容，再通过HTML5 Canvas绘制解析出的图形实体。以下是可直接运行的完整实现，无需依赖Vue.js或其他框架。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>简易DXF查看器</title>
    <style>
        canvas { border: 1px solid #ccc; margin-top: 10px; }
        input { padding: 4px; }
    </style>
</head>
<body>
    <!-- 文件选择控件：用于上传本地DXF文件 -->
    <input type="file" id="dxfFileInput" accept=".dxf" placeholder="选择DXF文件">
    <!-- 用于绘制DXF图形的Canvas -->
    <canvas id="dxfCanvas" width="800" height="600"></canvas>

    <!-- 引入纯JS的DXF解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/dxf-parser@latest/dist/dxf-parser.min.js"></script>
    <script>
        const canvas = document.getElementById('dxfCanvas');
        const ctx = canvas.getContext('2d');
        const fileInput = document.getElementById('dxfFileInput');

        // 监听文件选择事件
        fileInput.addEventListener('change', handleFileSelect);

        // 处理文件选择与解析
        function handleFileSelect(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = (event) => {
                try {
                    const parser = new DxfParser();
                    const dxfData = parser.parse(event.target.result);
                    renderDxf(dxfData);
                } catch (err) {
                    console.error('DXF解析失败:', err);
                    alert('解析出错，请确认文件为有效DXF格式');
                }
            };
            reader.readAsText(file);
        }

        // 读取本地静态服务中的DXF文件（需将文件放在静态服务目录下）
        // 取消注释以下代码，替换路径后即可自动加载指定文件
        /*
        fetch('/path/test.dxf')
            .then(res => res.text())
            .then(text => {
                const parser = new DxfParser();
                const dxfData = parser.parse(text);
                renderDxf(dxfData);
            })
            .catch(err => console.error('文件读取失败:', err));
        */

        // 绘制DXF图形
        function renderDxf(dxfData) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.strokeStyle = '#000';
            ctx.lineWidth = 1;

            // 绘制直线实体
            if (dxfData.entities.LINE) {
                dxfData.entities.LINE.forEach(line => {
                    ctx.beginPath();
                    ctx.moveTo(line.start.x, line.start.y);
                    ctx.lineTo(line.end.x, line.end.y);
                    ctx.stroke();
                });
            }

            // 绘制多段线实体
            if (dxfData.entities.POLYLINE) {
                dxfData.entities.POLYLINE.forEach(poly => {
                    ctx.beginPath();
                    const vertices = poly.vertices;
                    if (!vertices.length) return;
                    ctx.moveTo(vertices[0].x, vertices[0].y);
                    vertices.slice(1).forEach(v => ctx.lineTo(v.x, v.y));
                    // 闭合多段线
                    if (poly.flags & 1) ctx.closePath();
                    ctx.stroke();
                });
            }

            // 可扩展支持圆、圆弧、文字等其他DXF实体，参考解析库的实体结构即可
        }
    </script>
</body>
</html>

关键说明 #

1. 本地文件访问限制：浏览器无法直接读取本地文件系统的/path/test.dxf，需二选一：
   • 使用代码中的文件选择控件，手动上传本地DXF文件
   • 搭建本地静态服务（如执行python -m http.server），将DXF文件放在服务目录下，取消注释fetch代码并替换路径后自动加载
2. 实体扩展：示例仅实现了直线和多段线的绘制，若需支持更多实体（如圆、圆弧），可查看解析库返回的dxfData.entities结构，添加对应绘制逻辑
3. 坐标适配：若图形超出Canvas范围，可计算所有实体的边界框，添加缩放和平移逻辑将图形适配到Canvas中心

内容的提问来源于stack exchange，提问作者Kamil Dul