dxf-parser与three-dxf展示dxf文件。集成在vue3项目中使用

项目有个需求二维图展示dxf文件，主要是可以显示CAD里面的标注。
其实在数据格式化还是比较好实现的只需要下载依赖使用就可以了。问题主要出在了three-dxf。引入各种报错。
在网上也找到了关于在vue项目中使用的例子，拿过来搬过去依然是报错不断。附上链接原vue集成项目地址
此时心态已经裂开了。研究了几天。
网上关于这个问题的例子比较少。下面就来看下实现过程吧

先看效果：中文，标注，都显示出来了

第一步下载依赖。

npm i dxf-parser@1.1.2

截止到我现在使用的是1.1.2版本。看起来也很久没更新了。估计是不更新了吧

第二步 引入js文件

在public目录下添加JS文件，这个文件就是项目地址中public目录里面的threedxf文件夹里面的js，放到你的public中即可

此时基本就算是完成了，看下使用吧

js部分

//引入JS文件依赖
import DxfParser from "dxf-parser";
import { Viewer } from "/public/threedxf/three-dxf.js";

export default {
  name: "ThreeDXF",
  data() {
    return {
      dxfLoading: false,
    };
  },
  mounted() {},
  methods: {
    onFileSelected(evt) {//选择文件事件
      let self = this;
      var file = evt.target.files[0];
      var reader = new FileReader();
      reader.onprogress = self.updateProgress;
      reader.onloadend = self.onSuccess;//选择文件完成后调用onSuccess方法
      reader.onabort = self.abortUpload;
      reader.onerror = self.errorHandler;
      reader.readAsText(file);
    },
    errorHandler(evt) {
      switch (evt.target.error.code) {
        case evt.target.error.NOT_FOUND_ERR:
          alert("File Not Found!");
          break;
        case evt.target.error.NOT_READABLE_ERR:
          alert("File is not readable");
          break;
        case evt.target.error.ABORT_ERR:
          break;
        default:
          alert("An error occurred reading this file.");
      }
    },
    onSuccess(evt) {
      this.dxfLoading = true;
      var fileReader = evt.target;
      if (fileReader.error) return console.log("error onloadend!?");
      var parser = new DxfParser();
      var dxf = parser.parseSync(fileReader.result);//使用dxf-parse格式化参数

      document.getElementById("dxf-view").innerHTML = "";//这里获取元素，用于three画布展示
      let width = this.$refs.dxfView.offsetWidth;
      let height = this.$refs.dxfView.offsetHeight;

      Viewer(
        dxf,
        document.getElementById("dxf-view"),
        width,
        height,
        this.LoadingClose
      );//最终使用Viewer方法把格式化的参数，元素，宽高。回调传入即可
    },
    LoadingClose() {
      this.dxfLoading = false;
    },
    handleDragOver(evt) {
      evt.stopPropagation();
      evt.preventDefault();
      evt.dataTransfer.dropEffect = "copy";
    },
  },
};

HTML部分
 

<div class="container">
    <div role="form">
      <div class="form-group">
        <label for="exampleInputFile">选择一个DXF文件</label>
        <input
          type="file"
          accept=".dxf"
          id="dxf"
          name="file"
          @change="onFileSelected"
        />
        <div class="progress progress-striped" style="width: 300px">
          <div
            id="file-progress-bar"
            class="progress-bar progress-bar-success"
            role="progressbar"
            style="width: 0"
          ></div>
        </div>
        <div id="file-description" class="help-block"></div>
      </div>
    </div>
    <div class="code-editor-wrapper" v-loading="dxfLoading">
      <div id="dxf-view" ref="dxfView" class="dxfView"></div>
    </div>
  </div>

CSS部分

.code-editor-wrapper {
  /* margin: 56px auto 0 auto; */
  width: 25vw !important;
  height: 50vh;
  border: 1px solid #000;
}

.dxfView {
  width: 25vw;
  height: 50vh;
  background: #fff;
}

来看下运行效果吧

有标注，显示中文。暂时是完成了我的需求
最后附上项目地址项目地址