web html页面显示autocad等dwg格式图形文件方法

原创

3xxxx 2022-03-03 11:41:34 ©著作权

文章标签 dwgviewx autovue msdraw vectordraw cadview js 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者3xxxx的原创作品，请联系作者获取转载授权，否则将追究法律责任

基本有2种思路：

一种是转换后显示，比如vectordraw，将dwg转换成vds格式，再在web中显示，支持图层啊之类。还有CADViewer JS是转成SVG，pdf等格式，然后用web浏览……其实转换格式也是一个办法，用golang在后端，当有请求的时候，调用转换程序AutoXChange进行dwg到pdf的转换。如下列代码，缺点有3个，一个是万一后端转换不成功，等待很久，还要退出这个进程，另一个缺点是，autoxchange虽然支持字体路径，但是似乎不起作用，还是无法显示中文，最后一个当然是需要购买啦，否则有水印。

package main

import (
  "fmt"
  "os/exec"
  "time"
)

func main() {
  iname := "Office.dwg"
  oname := "office.svg"
  //  fontpath := "\\Fonts" "-FP", fontpath,
  arg := []string{"-i", iname, "-o", oname, "-DF", "arial", "-f", "svg", "-text", "-v=5"}
  //ax2017 -i office.dwg -o office.pdf -f pdf -text -v=5
  cmd := exec.Command("ax2019.exe", arg...)
  //记录开始时间
  start := time.Now()
  err := cmd.Start()
  if err != nil {
    //    fmt.Println(err)
    fmt.Printf("err: %v", err)
  }
  err = cmd.Wait() //Wait等待command退出，他必须和Start一起使用，如果命令能够顺利执行完并顺利退出则返回nil，否则的话便会返回error，其中Wait会是放掉所有与cmd命令相关的资源
  //  buf, err := cmd.Output() //运行命令并返回其标准输出
  if err != nil {
    fmt.Printf("err: %v", err)
  }
  //记录结束时间差
  elapsed := time.Since(start)
  fmt.Printf("elapsed: %s\n", elapsed)
}

另一个思路是用控件显示，比如DWGViewX，autovue，mxdraw，autovue没试验出来。dwgviewx只支持IE浏览器，有**版，去除了水印，但是客户端用ie访问的时候，需要下载activity控件，并安装一下，它只支持中文的宋体啊，黑体啊，之类，不支持那些单线字体。

mxdraw,autovue,dwgviewx控件的clsid有个共同的特点，见下图：在运行regedit注册表中搜ctrl.1,f3键搜下一个。

web html页面显示autocad等dwg格式图形文件方法_cadview js

dwgviewx的效果

web html页面显示autocad等dwg格式图形文件方法_cadview js_02

不支持单线中文字体

web html页面显示autocad等dwg格式图形文件方法_autovue_03

<!-- <object id="1" visible="true" classid="clsid:B6FCC215-D303-11D1-BC6C-0000C078797F" type="application/x-oleobject" width="800" height="600"> -->
    <!-- <param name="SRC" value="//127.0.0.1/static/img/test.dwg"></object> -->
<HTML>

<HEAD>
<title>DWGViewX Demo-DWG Viewer ActiveX Control</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="help/ie4.css"/>

</HEAD>
<script>
function ZoomIn()
{
     DWGViewX.ZoomIn();
}
function ZoomOut()
{
  DWGViewX.ZoomOut();
}
function ZoomAll()
{
  DWGViewX.ZoomAll();
}
function HideToolbar()
{
    DWGViewX.ShowToobar = !DWGViewX.ShowToobar
}

function Pan()
{
  DWGViewX.PanByMouse();
}

function ZoomWindow()
{
  DWGViewX.ZoomRectByMouse();
}
function HideLayoutBar()
{
  DWGViewX.ShowLayoutBar = !DWGViewX.ShowLayoutBar;
}
function Background()
{
  DWGViewX.Background = DWGViewX.Background ==0? 7:0 
}
function Print()
{
  DWGViewX.Print();
}

</script>
<BODY >

<a href="javascript:ZoomIn()">Zoom In</a> | <a href="javascript:ZoomOut()">Zoom Out</a> | <a href="javascript:ZoomAll()">Zoom All</a>                             
| <a href="javascript:ZoomWindow()">Zoom Window</a>| <a href="javascript:Pan()">Pan</a>| <a href="javascript:HideToolbar()">Show/Hide Toolbar</a>                             

 | <a href="javascript:HideLayoutBar()">Show/Hide LayoutBar</a>                            

 |<a href="javascript:Print()">Print</a>                           

 |<a href="javascript:Background()">Background</a>                           

<table border="0" width="100%">
  <tr>
    <td width="50%">            
<OBJECT id=DWGViewX classid="clsid:AC53EFE4-94A7-47E6-BBFC-E9B9CF322299" codebase="http://www.autodwg.com/dwg-viewer/dwgviewx.cab" width="700" height="520">
   <param name="_Version" value="65536">
   <param name="_ExtentX" value="18521">
   <param name="_ExtentY" value="13758">
   <param name="_StockProps" value="0">
   <param name="DrawingFile" value="http://127.0.0.1/static/img/05.dwg">
   <param name="ShowToobar" value="-1">
   <param name="ShowLayoutBar" value="1">  
</OBJECT>

    </td>
    <td width="50%" valign="top">
      <table border="0" width="100%">
        <tr>
          <td width="100%" style="border-bottom:1px dashed">  <img border="0" src="Help/tips.gif" width="12" height="11"> 
            If the control can't display correctly,   
      please download and install the control first.  
            <p align="right"><a href="http://www.autodwg.com/download/dwgviewx.exe">Download DWGViewX</a></td>  
        </tr>
        <tr>
          <td width="100%"></td>
        </tr>
        <tr>
          <td width="100%">
            <p align="right"><a href="DWGViewX.html">Help for Developers..</a>.</td>
        </tr>
        <tr>
          <td width="100%"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</BODY>
</HTML>

mxdraw:很好地支持中文单线字体，虽然代码里有支持chrome的写法，但是chrome还是打不开。有水印，对于浏览图纸不影响。推荐使用。

web html页面显示autocad等dwg格式图形文件方法_msdraw_04

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0042)http://www.mxcad.net:2080/ie/database.html -->
<!DOCTYPE html PUBLIC "" "">
<HTML lang="en" style="height: 100%;">
<HEAD>
  <META content="IE=10.000" http-equiv="X-UA-Compatible">
  <META charset="UTF-8">
  <META name="GENERATOR" content="MSHTML 10.00.9200.17457">
  <META name="ProgId" content="FrontPage.Editor.Document">
  <TITLE>MxDraw控件</TITLE>
  <!--引入打碎函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/ExplodeFun.js" type="text/javascript"></SCRIPT>
  <!--移动夹点-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MoveGripPointsFun.js" type="text/javascript"></SCRIPT>
  <!--返回夹点-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/GetGripPointsFun.js" type="text/javascript"></SCRIPT>
  <!--动态施放绘制事件回调函数指针-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/DoDynWordDrawFun.js" type="text/javascript"></SCRIPT>
  <!--引入参数绘制的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/Draw.js" type="text/javascript"></SCRIPT>
  <!--引入交互绘制的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxDyDraw.js" type="text/javascript"></SCRIPT>
  <!--引入光栅图处理的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxIamges.js" type="text/javascript"></SCRIPT>
  <!--引入界面控制的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxInterface.js" type="text/javascript"></SCRIPT>
  <!--引入控制事件的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxEvents.js" type="text/javascript"></SCRIPT>
  <!--引入打印控制的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxPrint.js" type="text/javascript"></SCRIPT>
  <!--引入选择集的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxSelect.js" type="text/javascript"></SCRIPT>
  <!--引入自定义命令的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxUserCustomCommand.js" type="text/javascript"></SCRIPT>
  <!--引入扩展数据的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxData.js" type="text/javascript"></SCRIPT>
  <!--引入图面搜索的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxMap.js" type="text/javascript"></SCRIPT>
  <!--引入图形数据库的相关函数-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/MxDataBase.js" type="text/javascript"></SCRIPT>
  <SCRIPT language="javascript" src="/static/js/mxdraw/mxcustom.js" type="text/javascript"></SCRIPT>
  <!--引入梦想控件-->
  <SCRIPT language="javascript" src="/static/js/mxdraw/mxocx.js" type="text/javascript"></SCRIPT>
  <SCRIPT src="/static/js/mxdraw/jquery.min.js"></SCRIPT>

  <SCRIPT language="JavaScript">document.oncontextmenu = new Function('event.returnValue=false;'); //禁用右键
  </SCRIPT>
</HEAD>

<BODY>

<DIV style="height: 900px;"><!--  width: 150%; float: right; -->
  <SCRIPT type="text/javascript">
        LoadMxDrawX("http://127.0.0.1/static/img/05.dwg", "", "");
  </SCRIPT>
</DIV>

</BODY>
</HTML>