Question

mxdraw 的作用就是预览图纸，也可以绘制一些批注或者其他图形，首先进行安装，如果你没有前端工程化的基础，请先看前端工程化基础知识，mxdraw有详细的文档，建议点击mxdraw查看使用说明，然后我们讲一下转换后的图纸用mxdraw库显示的步骤:

1）新建工程

这里我们就用vite来创建一个前端工程化的项目，先创建一个目录vite-mxdraw 然后进入命令行输入以下命令:

# 初始化项目
npm init -y

# 创建vite 项目
npm create vite@latest

# 安装mxdraw库
npm install mxdraw

更多关于创建vite项目的说明，请参考: 开始 | Vite 官方中文文档

2）使用mxdraw

在vite创建的项目中你选择了其中一种框架，而mxdraw它是不依赖于任何框架的，所以我们只需要在canvas元素创建完成后就可以直接使用mxdraw提供的方法，在页面中直接显示转换后的图纸文件。

一般情况下我们不要只使用一个canvas元素，而是定义一个父级元素，并且这个父级的高度一定需要是固定的（不能使用百分比单位），宽度也必须有（可以是百分比单位），像下面这样：

<div style="width: 100%;height: 90vh"><canvas id="myCanvas"></canvas></div>

然后我们可以在js/ts文件（根据前端框架的不同写的位置也不一样，但是只要canvas元素创建挂载，那么就可以使用下面的代码），输入如下代码:

 import { MxFun } from "mxdraw"
 MxFun.createMxObject({
    canvasId: "myCanvas", // canvas元素的id
    cadFile: "./demo/buf/$hhhh.dwg",
    useWebsocket: false,
 });

这里cadFile 对应的就算转换后的文件缩写，它会自动去请求转换后对应的多个文件，详细的入门文档请参考:快速入门 | mxdraw

浏览CAD在线DEMO：https://www.mxdraw3d.com/sample/vuebrowse/最终浏览效果如下图：