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代码了：

// <input type="file" id="Input" accept=".dxf" @click="selectPicture"/>
 
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 = $(`<div id="pic-0"></div>`);
 
        $("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);
        }
      );
    });
  }
}复制