網頁加載CAD圖紙的兩個方案

說明

夢想控件提供兩種技術在網頁中加載CAD圖紙，一個是OCX技術方案，另一個是HTML5技術方案，它們各有優缺點，用戶需根據實際情況進行選擇，下邊分別說明一下。 

OCX技術方案

1.OCX技術是IE的插件標准，使用OCX技術可以在IE加一個二進制代碼插件，在IE或國產瀏覽器兼容模式下加載我們的CAD ocx，就能直接顯示圖紙。

2.快速入門教程:

https://help.mxdraw.com/?pid=25

3.在線演示：

https://mxtmpweb.mxdraw.f3322.net:3562/iedemo.html 

運行效果：

4.前端代碼引用方式，通過<object>加載：

	classid = "74A777F8-7A8F-4e7c-AF47-7074828086E2",
	Sys.ie || Sys.ie9 ? (document.write("<!-- 用來產生編輯狀態的ActiveX控件的JS腳本-->   "),
	document.write("<!-- 因為微軟的ActiveX新機制，需要一個外部引入的js-->   "),
	document.write('<object id="'+ id + '" classid="clsid:' + classid + '" '),
	//document.write('width="85%" height="85%" align="left">   '),
	document.write('codebase=" ' + cabpath + 'width="85%" height="85%" align="left">   '),
	document.write('<param name="_Version" value="65536">  '),
	document.write('<param name="_ExtentX" value="24262">  '),
	document.write('<param name="_ExtentY" value="16219">  '),
	document.write('<param name="_StockProps" value="0">'),
	document.write('<param name="DwgFilePath" value="' + dwgfile + '" > '),
	document.write('<param name="IsRuningAtIE" value="1">'),
	document.write('<param name="EnablePrintCmd" value="1">  '),
	document.write('<param name="ShowCommandWindow" value="1">   '),
	document.write('<param name="ShowToolBars" value="1">  '),
	document.write('<param name="ShowModelBar" value="1">'),
	document.write('<param name="Iniset" value="">  '),
	document.write('<param name="ToolBarFiles" value="">'),
	document.write('<param name="ShowMenuBar" value="1">'),
	document.write('<param name="EnableUndo" value="1">'),
	document.write('<param name="ShowPropertyWindow" value="1">'),
	document.write('<SPAN STYLE="color:red">不能裝載文檔控件。請在檢查瀏覽器的選項中檢查瀏覽器的安全設置。請點擊<a href=' + msipath + '>安裝控件</a></SPAN>'),
	document.write('</object>')) :

優點：夢想CAD ocx有十年開發積累，開發接口非常豐富，功能最成熟，可以在網頁里直接打開編輯CAD圖紙，對服務器沒有要求，也不需要在服務器安裝插件。

缺點：對瀏覽器有要求，必須是IE，或IE內核瀏覽器，如果想在chrome瀏覽器上使用，必須使用我們指定安裝的谷歌瀏覽器，而國產瀏覽器，QQ,360瀏覽器是可以在極速模式下使用，用戶在第一次使用時，需要安裝一下我們的插件，IE支持CAB安裝包的自動安裝。

HTML5技術方案

1.網頁直接使用canvas渲染CAD圖紙，chrome瀏覽器推使用該技術在網頁顯示二維，三維圖形。

2.快速入門教程:

https://help.mxdraw.com/?pid=32

3.在線演示：

http://www.mxdraw.com:3000/

4.MxCAD雲圖圖庫：

https://www.mxdraw3d.com/drawinglibrary.html 

運行效果：

優點：跨平台，可以在手機，微信朋友圈，小程序，安桌，蘋果系統上使用，只要有chrome內核的瀏覽器就能加載顯示CAD圖紙，不需要在用戶端安裝任何程序。

缺點：最近幾年開發出來，所以相比OCX方案，編輯功能簡單一些，開發接口也沒有OCX成熟，需要在服務器后台調用我們的圖紙轉換程序對圖紙格式轉換。不過我們在不停完善，當前如果只需要瀏覽，批注，測量CAD圖紙已經足夠使用。

 ​詳細功能對比較表格

功能說明	OCX情況	HTML5情況
前端是否需要安裝程序	是	否
瀏覽器要求	IE,支持國產瀏覽器QQ,360,chrome需要指定安裝包,不支持火狐	Chrome，火狐，國產瀏覽器。
是否支持VUE	可以簡單支持，或使用iframe把ocx包起來	完整支持
圖紙瀏覽	直接打開	后台轉換加載顯示
編輯功能	完整編輯功能，精簡版本CAD	支持，不完整，正在開發
顯示效率	達到AutoCAD:89%	顯示加載圖紙很快，超過AutoCAD
是否跨平台	只能windows	所有平台
前台開發語言	JS,HTML	JS,TS,HTML5,THREE.JS
后台開發語言	無	JAVA,NODE.JS,ASP.NET,PHP,GO等都可以。
前端系統要求	Windows	Windows,安卓，Linux,蘋果等所有系統
后端系統要求	無，可以不在后台運行	Windows,Linux
后端轉pdf,jpg	支持，調用COM接口	支持，調用我們的轉換程序
前端轉pdf,jpg	支持	不支持
協同功能	不支持	可以實現(定制功能)
測量批注功能	支持	支持
是否支持天正自定義實體	不支持，必須保存T3格式。	不支持，必須保存T3格式，但可以做到服務后台自動轉T3(定制功能)
圖紙大小	一般最大50M,具體看圖紙內容復雜度	一般最大50M,具體看圖紙內容復雜度
打印功能	支持直接打印	支持打印，使用canvas打印

canvas打印代碼：

	fun("print").οnclick=function(){
	var dataURL = canvas.toDataURL("image/png");
	var newWindow=window.open();
	newWindow.document.write('<img src="'+dataURL+'"/>');
	newWindow.print();
	}