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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/80714741

基本有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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

Asp.net页面生命周期

前言                                      本篇记录的是Asp.net页面生命周期,也就是管道模型的最末端HttpHandl...

2528
来自专栏狮乐园

Angular Elements 及其工作原理

现在,Angular Elements 这个项目已经在社区引起一定程度的讨论。这是显而易见的,因为 Angular Elements 提供了很多开箱即用的、十分...

1622
来自专栏前端儿

前端神器之Sublime Text2/3简单明了使用总结

第一:也是最重要的,它占内存很小(就如同notepad++那般迅速打开,所以那款其实也不错~)。一般IDE比如WebStorm(它也是一款神器来着),Aptan...

1152
来自专栏React Native开发圈

React Native日历日程组件

react-native-calendars主要包含三种子组件,分别是 Calendar(日历), CalendarList(日历列表), Agenda(日程)...

2891
来自专栏木宛城主

ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素

Bootstrap提供了一套丰富CSS设置、HTML元素以及高级的栅格系统来帮助开发人员快速布局网页。所有的CSS样式和HTML元素与移动设备优先的流式栅格系统...

9728
来自专栏Golang语言社区

【Go 语言社区】Golang语言的time.Sleep

首先:time.sleep单位为:1ns (纳秒) 转换单位: 1纳秒 =1000皮秒 1纳秒 =0.001 微秒 1纳秒 ...

4837
来自专栏技术墨客

React Flow代码静态检查

Flow是Facebook开源的静态代码检查工具,他的作用是在运行代码之前对React组件以及Jsx语法进行静态代码的检查以发现一些可能存在的问题。Flow可以...

1144
来自专栏葡萄城控件技术团队

React Native基础&入门教程:以一个To Do List小例子,看props和state

在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexbox布局。还没有看过的小伙伴欢迎回到文章列表点击查看之前的文章了解。

1023
来自专栏用户2442861的专栏

PyQt icon创建,显示 PyQt4 -- 系统托盘图标设置

http://www.cnblogs.com/obbo/articles/2718426.html

3562
来自专栏木子昭的博客

Redux实现组合计数器

1053

扫码关注云+社区

领取腾讯云代金券