Vue项目中使用mxdraw库预览.dwg图纸

DWG文件查看器

1，安装依赖

npm install mxdraw

2，直接使用

<template>
  <div class="app-container">
    <h1>DWG文件查看器</h1>
    <div style="width: 100%; height: 80vh; margin: 0 auto;">
      <canvas id="mxcad" />
    </div>
  </div>
</template>

<script>
import Mx from 'mxdraw'

export default {
  components: {
  },
  created() {
    // 动态加载 js库核心代码
    Mx.loadCoreCode().then(() => {
      // 创建控件对象
      Mx.MxFun.createMxObject({
        canvasId: 'mxcad', // canvas元素的id
        // cadFile: 'http://localhost:8088/demo/buf/hhhh.dwg.mxb1.wgh', // 后端程序转换dwg文件后的文件位置。
        cadFile: '../demo/buf/hhhh.dwg', // 后端程序转换dwg文件后的文件位置。
        callback: (mxDrawObject, {
          canvas,
          canvasParent
        }) => {
          // 图纸加载完成
          mxDrawObject.addEvent('loadComplete', () => {
            console.log('mx loadComplete')
          })
        }
      })
    })
  }
}
</script>

很简单吧，就是这样就可以直接现实

这是转换后的格式，转换方式参考官方文档:https://www.wenjiangs.com/doc/mC55ZkB-wdtaD

请重点阅读这段话
能不能查看成功重点是cadFile的值，转换后的文件是多个.wgh的文件构成， 但是我们只需要得到前缀，就可以访问，比如:…/…/demo/buf/$hhhh.dwg 我们可以直接写成cadFile: “…/…/demo/buf/hhhh.dwg”，也可以是可以直接访问的地址’http://localhost:8088/demo/buf/hhhh.dwg’，后端转换后传回一个可访问地址即可