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

最新推荐文章于 2025-04-03 10:05:21 发布

q平面人

最新推荐文章于 2025-04-03 10:05:21 发布

阅读量3.7w

点赞数 3

分类专栏：水利项目管理水利信息化项目管理工程管理工程师知识管理系统文章标签： dwgviewx autovue msdraw vectordraw cadview js

本文链接：https://blog.csdn.net/hotqin888/article/details/80714741

版权

水利信息化同时被 3 个专栏收录

41 篇文章

订阅专栏

水利项目管理

36 篇文章

订阅专栏

项目管理

26 篇文章

订阅专栏

基本有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键搜下一个。

dwgviewx的效果

不支持单线中文字体

	<!-- <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还是打不开。有水印，对于浏览图纸不影响。推荐使用。

<!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>