DotImage創建Atalasoft Web文檔查看器

本文主要介紹如何利用.NET圖像處理開發包DotImage創建一個包含了嵌入式Web文檔查看器的Web頁面以及如何在Web頁面中顯示初始文件。

創建項目

在VS中，通過ASP.NET Empty Web Site 模板創建一個網頁。隨即，打開項目的屬性頁，設置必要的參數和項目。需要注意以下兩點：

1. 在 References 菜單中，添加一個新的引用到Atalasoft DotImage WebControls (.NET 2.0)。DotImage 10.0提供了該WebControls，在你安裝DotImage 10.3.1后，依賴自動包含在項目中

2. 在Build菜單中，將框架改為.NET Framework 3.5，然后重新打開項目，并遷移web.config。

新增項目資源

項目需要Web文檔查看器資源的副本文件，包括客戶端JavaScript和樣式。DotImage 10.0自帶該資源，默認情況下位于: C:\Program Files (x86)\Atalasoft\DotImage 10.0\bin\2.0\x86\WebResources\WebDocViewer。

將WebDocViewer 目錄復制到項目根目錄。

此外，我們還將創建一個默認的位置用于儲存查看器中顯示的圖片。在項目的根目錄下創建一個Images目錄，然后將所選擇的圖像或文件添加到該目錄下。本文以Example.tif圖像為例。

添加Handler

連接文檔查看器與網站上的獨立處理器。

在項目中新增一個Generic Handler，文件名假設為WebDocViewer.ashx。Visual Studio中新增一個Web處理器的默認實現方式。用下列代碼替換掉文件的全部內容：

<%@ WebHandler Language="C#" Class="WebDocViewerHandler" %>

 using System;
 using System.Web;
 using Atalasoft.Imaging.WebControls;

 public class WebDocViewerHandler : WebDocumentRequestHandler
 {
 }

添加網頁

假設我們在本文中添加網頁為Default.aspx. Visual Studio將會為該文件
 自動創建這個名為Default.aspx.cs中的代碼隱藏。

Web文檔查看器需要3塊代碼分別用于加載資源，創建顯示區域以及初始化該區域。

在文檔的頂部添加下列HTML代碼，從而加載所需資源以創建Web文檔查看器對象。

<script src="WebDocViewer/jquery-1.6.1.min.js" type="text/javascript"></script>
 <script src="WebDocViewer/jquery.easing.1.3.js" type="text/javascript"></script>
 <script src="WebDocViewer/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
 <script src="WebDocViewer/atalaWebDocumentViewer.js" type="text/javascript"></script>
 <link href="WebDocViewer/atalaWebDocumentViewer.css" rel="Stylesheet" type="text/css" />

接下來，在文檔的body中添加下列HTML代碼，從而創建文檔顯示區域。你可以自定義DIV標簽。在本示例中，頁面的高度和寬度受到限制。

<div id="_toolbar1" class="atala-document-toolbar" style="width: 670px;"></div>
 <div id="_container1" class="atala-document-container" style="width: 670px; height: 500px;"></div>

最后，下列JavaScript代碼可初始化查看器。構造函數接受影響查看器行為和初始狀態的所有配置。最低配置將提示何處應該創建查看器，何處應該放置Web處理器以及最初應顯示何種圖像。

<script type="text/javascript" language="javascript">
 var _docUrl = 'Images/Example.tif';
 var _serverUrl = 'WebDocViewer.ashx';

 var _viewer = new Atalasoft.Controls.WebDocumentViewer({
 'parent': $('#_container1'),        // parent container to put the viewer in
 'toolbarparent': $('#_toolbar1'),   // parent container to put the viewer toolbar in
 'serverurl': _serverUrl,            // server handler url to send p_w_picpath requests to
 'documenturl': _docUrl              // document url relative to the server handler url
 });
 </script>

部署到IIS

此時此刻，網站已準備就緒。如果您要部署到IIS，需要注意一下幾點：

• 將項目復制到IIS文檔根目錄下。

• 獲取DotImage服務器授權，將授權文件置于項目的Bin目錄。

• 在IIS Manager中，將你的項目目錄轉換到應用程序，并將其分配到Application Pool。

• 檢查所使用Application Pool的設置，確定Enable 32-Bit Applications設置為“True”，Managed Pipeline Mode設置為Classic。

此時，你便可以在瀏覽器中查看你的所加載的文件。