VUE实现 预览CAD的DWG文件

1：使用maxdraw的组件实现CAD图的预览功能，先安装依赖

npm install mxdraw  复制

2：引入maxdraw官方提供的iframe.ts文件

import { MxFun} from "mxdraw"
/* eslint-disable no-undef */
const MxIFrame= {
  init() {
    (MxFun as any).setPostMessageToParentFrameFunction(function(param:any){
      (top as any ).postMessage(param,'*');
    });
 
    window.addEventListener('message',function(event){
      if(event.data.type==="sendStringToExecute") {
        MxFun.sendStringToExecute(event.data.cmd, event.data);
      }
      else{
        console.log("mx:unprocessed message:");
        console.log(event.data);
      }
 
    },false) ;
  },
}
 
export function init() {
  MxIFrame.init();
}
 
 复制

3：index.vue文件，wgh文件是通过maxdraw官方提供的转换器进行转换得到的，官网地址：如何在自己系统中浏览dwg文件 - MxDraw 帮助文档 - 开发文档 - 文江博客

然后将转换得到的数据放入项目中

<template>
  <div class="content">
    <div id="mxdiv">
      <canvas id="mxcad"></canvas>
    </div>
  </div>
</template>
<script lang="ts">
import {init as iframeinit} from "./iframe"
import { defineComponent } from 'vue'
import {MxFun} from "mxdraw";
 
export default defineComponent({
  mounted() {
    iframeinit();
    let cadFile = MxFun.getQueryString("file");
    // const myThis = this;
    // 旧的方法，加载wgh文件。、
    MxFun.createMxObject({
      canvasId: "mxcad",
      cadFile: cadFile,
      useWebsocket: false,
    });
  }
});
</script>
 
<style scoped>
html::-webkit-scrollbar {
  width: 0 !important;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
 
.content {
  height: 100%;
  display: flex;
  justify-content: center;
}
 
#mxdiv {
  width: 100%;
  position: relative;
  padding-top: 0;
  height: 100vh;
  background: #000;
}
 
 
.menu-title img {
  margin-right: 8px;
}
 
</style>复制

4：cadFile是相对地址，通过URL传入