创建 Atalasoft Web 文档查看器

本指南将带您完成设置一个包含嵌入式 Web Document Viewer 的基本网页，并在其中显示初始文档。

Web Document Viewer 可轻松通过 Atalasoft DotImage SDK 生成，该 SDK 是 Microsoft .NET 的 Web 查看、Web 扫描和注释开发工具包。您可以通过下载安装程序获得功能齐全的试用版。

安装并激活试用许可后，即可开始。这非常简单——代码量不大。

设置您的项目

在 Visual Studio 中，使用 ASP.NET 空网站模板创建一个新的网站。

立即打开项目的属性页，设置必要的引用和项目选项。在此处必须进行两项更改。

• 在“引用”菜单中，添加对 Atalasoft DotImage WebControls (.NET 2.0) 的新引用。安装 DotImage 10.0 时，此组件即已可用。依赖项将自动包含在您的项目中。
• 在“生成”菜单中，将“目标框架”更改为 .NET Framework 3.5。这将强制项目重新打开，并填充您的 web.config。

添加项目资源

您的项目需要一份 Web Document Viewer 资源的副本，其中包括客户端 JavaScript 和样式。这些资源已随 DotImage 10.0 一起安装。默认安装位置为 C:\Program Files (x86)\Atalasoft\DotImage 10.0\bin\2.0\x86\WebResources\WebDocViewer。

将 WebDocViewer 目录复制到项目的根目录。

我们还将创建一个默认位置来存储将由查看器显示的图像。在项目根目录下创建一个名为 Images 的新目录，并将您选择的图像或文档添加到该目录中，以便默认显示。我们将假设您添加的图像名为 Example.tif。

为查看器添加一个处理程序

文档查看器将与您网站上的单独处理程序进行通信。

向您的项目添加一个新的 Generic Handler。我们将假设此文件名为 WebDocViewer.ashx。

Visual Studio 会添加一个 Web Handler 的默认实现。用以下代码替换该文件的全部内容

<%@ WebHandler Language="C#" Class="WebDocViewerHandler" %>
 
using System;
using System.Web;
using Atalasoft.Imaging.WebControls;
 
public class WebDocViewerHandler : WebDocumentRequestHandler
{
}

您的处理程序无需进一步修改。

添加您的网页

在实际部署中，您需要将 Web Document Viewer 插入您自己的网页，但在此示例中，我们将处理一个新页面。

向您的项目添加一个新的 Web Form。我们将假设此文件名为 Default.aspx。Visual Studio 会自动为此文件创建一个名为 Default.aspx.cs 的代码隐藏文件，但您无需更改它。

Web Document Viewer 需要三段代码来加载资源、创建查看区域并初始化该区域。

要加载创建 Web Document Viewer 对象所需的资源，请在文档的 head 中添加以下 HTML 行。

<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" />

接下来，将以下 HTML 添加到您的文档 body 中以创建文档查看区域。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 代码块。构造函数接受各种影响查看器行为或初始状态的配置选项。提供了一个最小配置，用于告诉查看器它应该在哪里创建查看器（指向我们添加的 div 标签）、其 Web Handler 的位置以及最初应该显示哪个图像。

<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 image requests to
        'documenturl': _docUrl              // document url relative to the server handler url
    });
</script>

部署到 IIS

此时，您的网站已准备好构建和使用。如果您部署到 IIS，则需要确保以下事项已处理妥当。

• 将您的项目复制到 IIS 文档根目录中的某个路径。
• 获取 DotImage 的服务器许可证，并将其放置在可以找到的位置。最好将许可证文件放在项目的 Bin 目录中。
• 在 IIS Manager 中，将项目目录转换为应用程序并将其分配给应用程序池。
• 检查您使用的应用程序池的设置，并确保“启用 32 位应用程序”设置为 True，并且“托管管道模式”设置为 Classic。这将确保您的应用程序与您使用的 DotImage 程序集一致。

此时，您应该可以在浏览器中导航到您的页面，并看到加载的文档。

恭喜！

结论

正如您所见，Web Document Viewer 是一种将嵌入式文档查看器添加到任何网页的简单方法。它具有页面查看控件和流畅的滑动滚动功能，还能快速高效地加载页面。

再次强调，Web Document Viewer 可轻松通过 Atalasoft DotImage SDK 生成，该 SDK 是 Microsoft .NET 的 Web 查看、Web 扫描和注释开发工具包。您可以通过下载安装程序获得功能齐全的试用版。

Web Document Viewer 只是整个 Atalasoft DotImage Document Imaging SDK 套件的一小部分。如有任何疑问，请联系sales[at]atalasoft.com。