dxf-parser与three-dxf读取并显示dxf文件，jquery vue

1. 首先安装 three@0.132.2 版本

npm intstall three@0.132.2

2. 安装 dxf-parse@1.0.2 版本

npm install dxf-parse@1.0.2

3. 安装 three-dxf@1.3.1

npm install three-dxf@1.3.1

4. 在 node_modules 文件中找到 three-dxf 下的 sample/fonts/helvetiker_regular.typeface.json; 将这个文件复制粘贴到 vue 项目的 public 下，当然你也可以在 public 下新建一个 fonts 文件夹放进去（如果是放在 fonts 文件夹下后面的路径需要更改./fonts），本文直接放在 public 目录下了

ps: npm 在 vscode 中安装失败的可以使用管理员权限打开 powershell，然后再 cd 到项目中进行 npm 安装

pps: 如果提前安装好了的 three-dxf 或者 dxf-parse，可以通过 npm list dxf-parser 和 npm list three 以及 npm list three-dxf 来查询当前安装的版本。然后可以通过 npm uninstall dxf-parser 和 npm uninstall three-dxf 和 npm uninstall three 进行对这三个依赖进行卸载，然后就可以重新进行本文开头的那样进行安装了。

在 vue 中使用，首行注释就是 html 代码，这里就只给出 js 代码了：

// 

import {onMounted} from "vue";
import $ from "jquery";
import DxfParser from "dxf-parser";
import {Viewer} from "three-dxf";
import * as THREE from "three";

export default {
  name: "DxfViewer",
  components: { },
  setup() {
    // 读取 three 字体
    let font;
    // 必须要有奥 
    let cadCanvas;

    let selectPicture = () => {fileInput = $("#Input");

      fileInput.on("change", function () {let file = this.files[0];

            // 获取扩展名
            let extension = file.name.split(".").pop().toLowerCase();

            let reader = new FileReader();
            reader.onload = handleFileLoad;

            if (extension === "dxf") {
                // 对于 DXF 文件使用 readAsText
                reader.readAsText(file);
            } else {console.error("Unsupported file format.");
            }
        })
    };

    // 处理读取的文件
    let handleFileLoad = (e) => {
        // DXF 文件的处理
        let parser = new DxfParser();
        // 这里的 dxf 可以打印看一下其格式
        let dxf = parser.parseSync(e.target.result);

        // 这里也可以不使用 jquery 进行创建，也可以直接在 html 中进行直接定义 div
        let fileShow = $(`
`);

        $("body").append(fileShow);

        let width = 300, height = 300;
        // 这里的 font 是在组件挂载前就去读取的
        cadCanvas = new Viewer(dxf,document.getElementById("pic-0"),width,height,font);

        console.log(cadCanvas);
    }

    onMounted(() => {const loader = new THREE.FontLoader();
        // 这个原文件在 node_modules/three-dxf/sample/fonts/ 下，将该 json 文件复制粘贴到 /public 目录下
      loader.load(
        "./helvetiker_regular.typeface.json",
        function (res) {
          font = res;
          console.log("font success:", font);
        },
        function (xhr) {console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        function (err) {console.log("font error:", err);
        }
      );
    });
  }
}