WEB CAD front-end framework construction (web page display CAD drawings)

preamble

DWG format drawings are the private format of AutoCAD, many users need to view and edit CAD drawings on the web side, the traditional way is to buy the OCX solution of MxCAD Controls, which is a long time in development and rich in editing features, but because the new version of Google Chrome no longer supports AcitveX controls, so more users want to realize online CAD functionality in the way of Html5. Today we will talk about how to display CAD drawings on web page with H5 program of MxCADcontrol.
WEB CAD functionality testing:
https://demo.mxdraw3d.com:3000/mxcad/

Install the environment needed for front-end engineering

1. We need to install the Node environment first to initialize a engineered front-end project. You can follow the link below to install and configure the Node environment: https://blog.csdn.net/WHF__/article/details/129362462
2. With the Node environment on the npm package management tools, we now need to initialize a simplest front-end project through the Vite this packaging tool, here you can directly refer to the vite official documents: https://cn.vitejs.dev/guide/
3. You can create a Vite-based front-end project by simply typing the following command at the command line.

npm create vite@latest

At this point the command line appears with a number of choices:
Ok to proceed? (y) For this option, just type y and press enter.
? Project name: " vite-project Here is the name of the project, which is vite-project by default.
Of course you can change the name to something else:

Select a framework: " - Use arrow-keys. Select a framework: " - Use arrow-keys. return to submit.
Vanilla
Vue
React
Preact
Lit
Svelte
Others

Here is for you to choose a front-end framework, this article to Vue as an example. If you don't know what is a front-end framework, or don't know from these frameworks can only choose which one, then here is the choice of Vue, directly up and down keys to select, enter key to determine the choice, follow my steps can be:
Select a variant: " - Use arrow-keys. return to submit.
TypeScript
Customize with create-vue
Customize with create-vue
Nuxt
If you still don't understand what these are choices, choose TypeScript, because the examples in this article are developed in TypeScript.
Create vite project option:

When you see the following prompt it means that you have created a front-end project out of it:
** Now run: cd vite-project npm install npm run dev**

1. Then we follow the above information directly: 1) First cd vite-project into this directory; 2) Then npm install to download the front-end project dependencies; 3) Finally, run npm dev and you will see the following message. VITE v4.3.9 ready in 1042 ms ➜ Local. http://127.0.0.1:5173/ ➜ Network: use --host to expose ➜ press h to show help At this point we'll open it directly in the browser http://127.0.0.1:5173/ and you will see the page. Displaying CAD drawings on the page
2. see the page that there is no problem, we return to the command line window, press ctrl + c to exit the page of the service, and then we have to install the mxdraw front-end library, we render drawings are to be carried out around it, and then enter the command.

npm i mxdraw@latest

We download the latest version directly.

1. Two links are given here, read them if you can, it doesn't matter if you can't read them, have an impression first. For an introduction to mxdraw check out: https://mxcadx.gitee.io/mxdraw_docs/start/quickStart.html#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F For conversion of cad drawings to mxdraw supported rendered files please check out. https://mxcadx.gitee.io/mxdraw_docs/start/drawingConversion.html#%E4%B8%80%E3%80%81%E4%B8%8B%E8%BD%BDmxdraw%E4%BA%91%E5%9B%BE%E5% BC%80%E5%8F%91%E5%8C%85 We now have mxdraw installed, and at this point we need to start writing code.
2. First find the App.vue file in the src directory of the project. Find the code ... , delete it all and replace it with the following code.

<div style="height: 80vh; overflow: hidden;">
  <canvas id="mxcad"></canvas>
</div>

Then we find the content in and replace it with the following:

import Mx from "mxdraw"
Mx.loadCoreCode().then(()=> {
  // Creating Control Objects  
  Mx.MxFun.createMxObject({
      canvasId: "mxcad", // canvas elemental id
       // The converted cad drawing file actually accesses the http://127.0.0.1:5173/buf/$hhhh.dwg.mxb[index].wgh
      cadFile: "/buf/hhhh.dwg",
  })
})

That's not all, you don't have a converted render file for /buf/hhhh.dwg in your project. So we need to prepare a CAD drawing to do a conversion. With the command to convert drawings you may not feel good understanding, we can use the cloud development kit software to convert CAD drawings. Specific tutorials you can follow step by step to do it.
The details are as follows:
https://mxcadx.gitee.io/mxdraw_docs/start/drawingConversion.html#%E4%B8%80%E3%80%81%E4%B8%8B%E8%BD%BDmxdraw%E4%BA%91%E5%9B%BE%E5% bc%80%e5%8f%91%e5%8c%85
At this point, the converted buf directory in the project's public directory can be, to render this CAD drawing just need to change cadFile: "/buf/hhhh.dwg" to the name of their own converted drawings can be run.
The location of the converted file:

Finally, we'll just type: at the command line.

npm run dev

At this point you should be able to see a page showing the CAD drawing.