将 HTML5 文档查看器添加到 ASP.NET MVC 5 项目

• 下载 Mvc5_DocumentViewer_Starter.zip - 817 KB

摘要

本“操作方法”将在 ASP.NET MVC 5 项目中添加带页面缩略图导航和全屏查看功能的文档查看器。此外，还为托管在 IIS 或 IIS Express 中的 Web 服务添加 CORS 以支持跨域请求。最终的项目为在 ASP.NET MVC 应用程序中添加更高级的文档功能（包括文本选择、注释、书签和转换）奠定了基础。

目标

• 在 IIS 中设置 LEADTOOLS 文档服务。
• 配置文档服务主机以支持 CORS。
• 将 LEADTOOLS HTML5 文档查看器控件添加到 ASP.NET 4.5 MVC 5 项目。

概述

HTML5 文档查看器是用于在任何平台和设备上查看文档的现成解决方案。文档查看器包含丰富的文档功能，包括文本搜索、注释、内存高效的分页、惯性滚动、可缩放矢量显示、多页查看、缩略图和书签。此外，LEADTOOLS 文档查看器无需额外的第三方插件即可加载多种文档格式，例如 DOC、TIFF 和 PDF。

Leadtools.Documents.UI.DocumentViewer 控件包含以下部分

1. 视图：控件中查看文档内容的必需区域。
2. 缩略图：控件中查看文档页面缩略图的可选区域。
3. 书签：控件中查看文档书签和目录的可选区域。
4. 注释：控件中显示注释工具栏和对象列表的可选区域。
5. 应用程序用户界面：其余部分是用户应用程序的 UI 元素，不属于文档查看器。通常，这些是用于通过命令控制文档查看器的标准菜单和工具栏项。

LEADTOOLS 文档查看器可用于任何 HTML5 Web 项目，包括 ASP.NET MVC。MVC 范例将应用程序分为三个主要组件：模型、视图和控制器。ASP.NET MVC 框架将母版页和身份验证等 ASP.NET 功能集成到 MVC 中。此外，包含 LEADTOOLS 文档查看器可将显示、转换、注释、图像处理和 OCR 等 LEADTOOLS 功能添加到 MVC 中。

文档查看器的控制器部分是文档服务。文档服务可以托管在同一个 ASP.NET MVC 应用程序中，也可以作为独立的服务器应用程序提供通用访问。要作为独立的服务器应用程序进行托管，服务器主机必须支持跨域资源共享 (CORS)。

CORS 是一种标准机制，用于规定在从不同域发出请求时对受限资源的访问。一个简化的例子：站点 A 上的网页向托管在站点 B 上的 Web API 发出 XMLHttpRequest 请求。客户端（兼容 CORS 的浏览器）将首先通过 OPTIONS 请求与站点 B 进行通信，以查看站点 B 是否允许来自站点 A 域的请求方法和自定义标头。W3C CORS 标准的第 6.2 节将此称为预检请求。如果站点 B 不允许 OPTIONS 请求中指定的参数，则 IIS 将返回一个 HTTP 状态 405（方法不允许）的响应。

步骤摘要

• 步骤 1：在 IIS 中配置 LEADTOOLS 文档服务
• 步骤 1（备选）：手动配置 LEADTOOLS 文档服务
• 步骤 2：在 Global.asax 中启用 CORS
• 步骤 2（备选）：通过 Web.config 在 IIS 中启用 CORS
• 步骤 3：创建 ASP.NET MVC 项目
• 步骤 4：将 LEADTOOLS HTML5 文档查看器控件添加到项目
• 步骤 5：创建 DocumentViewer 视图和操作
• 步骤 6：更新 CSS
• 步骤 7：运行项目并测试

所有路径均基于默认的 LEADTOOLS 安装文件夹（C:\LEADTOOLS 19），可能需要根据 LEADTOOLS 的安装文件夹进行调整。

步骤 1：在 IIS 中配置 LEADTOOLS 文档服务

在 IIS 中配置 Web 服务的最简单方法是运行位于 C:\LEADTOOLS 19\Shortcuts\Document Viewer\JavaScript\ 文件夹中的配置实用程序。

配置实用程序执行以下任务：

• 为 DocumentsService 创建应用程序池。
• 为 DocumentsService 创建应用程序文件夹，该文件夹指向物理路径：C:\LEADTOOLS 19\Examples\REST\DocumentsServiceHost，并将选定的 .NET 版本的 LEADTOOLS DLL 复制到 bin 文件夹。
• 更新 DocumentsService 的 Web.config。
  • 添加支持的 MIME 类型，以便 IIS 可以提供这些类型的文件。
  • 创建服务终结点。
  • 为 LEADTOOLS 许可证文件路径和开发者密钥添加 appSettings。
  • 为 LEADTOOLS 缓存设置以及 OCR 和文件转换的其他 LEADTOOLS 设置添加 appSettings。

步骤 1（备选）：手动配置 LEADTOOLS 文档服务

有时，需要手动配置文档服务，以便更好地控制文件位置、应用程序文件夹名称，或者在 IIS Express 中运行服务主机以进行测试和调试。要手动配置文档服务，请确保 Visual Studio 中的应用程序池或网站设置的 .NET 版本与复制到主机 bin 文件夹的 LEADTOOLS .NET 版本相匹配。如果使用 LEADTOOLS 程序集的 x86 版本，则必须在应用程序池的高级设置中启用 32 位应用程序。

文档服务主机的源代码位于 C:\LEADTOOLS 19\Examples\REST\DocumentsServiceHost\ 文件夹中。

将 LEADTOOLS 程序集的相应 .NET 版本和位数从 C:\LEADTOOLS 19\Redist\... 文件夹复制到文档服务主机的 Bin 文件夹。

步骤 2：在 Global.asax 中启用 CORS

如果服务主机源代码可用，那么通过处理 Application_BeginRequest() 事件，可以非常轻松地在 Global.asax 文件中实现 CORS 支持。

• 确保 CORS 标头未在 Web.config 中添加。如果已添加，则会引发重复标头异常。
• 确保 OPTIONSVerbHandler 不是处理程序列表中的第一个。仅当仅通过 Web.config 实现 CORS 时才需要此设置。
• 如果文档服务主机项目还没有 Global.asax 文件，请添加一个。
• 将以下代码添加到 Application_BeginRequest() 事件的 Global.asax 文件中。

void Application_BeginRequest( object sender, EventArgs e )
{
   var context = HttpContext.Current;
   var response = context.Response;

   // enable CORS
   response.AddHeader( "Access-Control-Allow-Origin", "*" );

   if ( context.Request.HttpMethod == "OPTIONS" )
   {
      response.AddHeader( "Access-Control-Allow-Methods", "GET, POST" );
      response.AddHeader( "Access-Control-Allow-Headers", 
                          "Content-Type, Accept" );
      response.AddHeader( "Access-Control-Max-Age", "1728000" );
      response.End();
   }
}

如果 Global.asax 未正确配置以支持来自调用域的 CORS，则 IIS 可能会在某些服务请求上返回 HTTP 状态“405 – 方法不允许”。

步骤 2（备选）：通过 Web.config 在 IIS 中启用 CORS

Global.asax 和 Web.config 方法不应混合使用。应只使用其中一种方法。

如果服务源代码不可用，则可以通过 Web.config 设置来实现 CORS。下面是 LEADTOOLS 文档服务主机的 Web.config 文件的截断版本。该配置将处理程序排序，将 OPTIONSVerbHandler 移动到其他任何处理程序之前。这使 IIS 能够正确处理许多跨域请求期间发生的 CORS 预检 OPTIONS 请求。

在 IIS Manager 中将 OPTIONSVerbHandler 移到顶部

1. 打开文档服务主机应用程序文件夹的处理程序映射。
2. 在“操作”窗格中，点击“查看有序列表…” 。
3. 在映射列表中选择 OPTIONSVerbHandler，然后点击“上移”直到 OPTIONSVerbHandler 成为第一个。

此外，必须将 Access-Control-Allow-Origin、Access-Control-Allow-Headers 和 Access-Control-Allow-Methods 自定义标头添加到 Web.config。

<configuration>
   <system.webServer>
       <httpProtocol>
         <customHeaders>
           <add name="Access-Control-Allow-Origin" value="*" />
           <add name="Access-Control-Allow-Headers" 
                value="content-type, accept" />
           <add name="Access-Control-Allow-Methods" value="GET, POST" />
         </customHeaders>
       </httpProtocol>
      <handlers>
         <clear />
         <add name="OPTIONSVerbHandler" 
              path="*" 
              verb="OPTIONS" type="" 
              modules="ProtocolSupportModule" 
              scriptProcessor="" 
              resourceType="Unspecified" 
              requireAccess="None" 
              allowPathInfo="false" 
              preCondition="" 
              responseBufferLimit="4194304" />
         <add name="rules-64-ISAPI-2.0" 
              path="*.rules" 
              verb="*" 
              type="" 
              modules="IsapiModule"
              resourceType="Unspecified" 
              requireAccess="Script" 
              allowPathInfo="false"
              preCondition="classicMode,runtimeVersionv2.0,bitness64"
…

如果未进行这些更改，则当文档查看器或任何应用程序向位于请求者不同域或端口上的文档服务主机发出请求时，IIS 可能会返回“HTTP 状态 405：方法不允许”错误。

步骤 3：创建 ASP.NET MVC 项目

一旦在 IIS 或 IIS Express 中设置了 LEADTOOLS 文档服务主机，下一步就是创建 ASP.NET MVC 客户端项目。

• 在 Visual Studio 中，创建一个新的 ASP.NET Web 应用程序项目。
• 在下一个屏幕上，选择 MVC 模板，然后点击“确定”。

项目创建完成后，向项目中添加几个文件夹。项目已包含 Scripts 文件夹，但为了更好地组织和管理代码，创建一些其他文件夹是个好主意。

• 在项目根目录下创建 libs 文件夹和 js 文件夹。

libs 文件夹用于存放第三方 TypeScript 库，如 LEADTOOLS、Bootstrap 和 jQuery。js 文件夹用于存放应用程序实现。

步骤 4：将 LEADTOOLS HTML5 文档查看器控件添加到项目

• 将现有项作为链接添加到项目 lib\leadtools 文件夹：C:\LEADTOOLS 19\Examples\JS\Common\Libs\*.d.ts。
• 将现有项作为链接添加到项目 lib\bootstrap 文件夹：C:\LEADTOOLS 19\Examples\JS\Common\Libs\bootstrap。
• 将现有项作为链接添加到项目 lib\jquery 文件夹：C:\LEADTOOLS 19\Examples\JS\Common\Libs\jquery。

请注意，上述项是以链接项的形式添加到项目中的。这是为了确保 TypeScript 引用文件中定义的相对路径得以保留。如果将 TypeScript 声明文件直接添加到项目中，则可能需要更新某些文件中的引用路径。

• 将现有项添加到项目 scripts 文件夹：C:\LEADTOOLS 19\Examples\JS\Common\Libs\*.js。
• 将以下 bundles 代码添加到 App_Start 文件夹中的 BundleConfig.cs 文件。

bundles.Add( new ScriptBundle( "~/bundles/leadtools" ).Include(
                     "~/scripts/Leadtools.js",
                     "~/scripts/Leadtools.Controls.js",
                     "~/scripts/Leadtools.Documents.js",
                     "~/scripts/Leadtools.*" ) );

bundles.Add( new ScriptBundle( "~/bundles/app" ).Include(
                     "~/js/app.js" ) );

ASP.NET 捆绑机制会将 JavaScript 合并并最小化，使其在客户端加载更高效。

LEADTOOLS JavaScript 文件的加载顺序很重要。前三个文件已明确列出，以确保它们按正确的顺序加载。其他文件的加载顺序不重要，因此它们使用通配符加载。

步骤 5：创建 DocumentViewer 视图和操作

• 在 Views>Home 中创建一个名为 DocumentViewer 的新视图。
  • 模板 – 空（无模型）
  • 使用共享的 _Layout 视图。
• 将页面内容替换为以下内容：

@{
   ViewBag.Title = "Document Viewer";
   Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="page-header">
   <div class="row">
      <div class="col-xs-12">
         <div class="btn-group btn-group-xs pull-right" role="group">
            <button type="button"
                    class="btn btn-primary"
                    id="interactiveCommand"
                    disabled>
               Interactive.PanZoom
            </button>
            <button type="button"
                    id="interactiveDropDown"
                    class="btn btn-default dropdown-toggle"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false">
               <span class="caret"></span>
               <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul id="interactiveDropDownUL" 
                class="dropdown-menu pull-left" 
                role="menu" 
                aria-labelledby="dLabel">
            </ul>
         </div>
      </div>
   </div>
</div>

<div class="row no-gutter">
   <div class="col-sm-2 col-md-2 col-lg-2">
      <div id="thumbnails-container" class="thumbnails-container"></div>
   </div>
   <div class="col-sm-10 col-md-10 col-lg-10">
      <div id="viewer-container" class="viewer-container"></div>
   </div>
</div>
@section scripts {
   <script 
      src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl( "~/bundles/leadtools" )">
   </script>
   <script 
      src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl( "~/bundles/app" )">
   </script>
}

thumbnails-container 和 viewer-container div 标签是文档查看器控件的缩略图和视图区域的占位符。

scripts 部分引用了在 BundleConfig.cs 文件中添加的 LEADTOOLS 和 App 捆绑包。

• 更新 Controllers\HomeController.cs 以添加 Document Viewer 页面的 ActionResult。

public ActionResult DocumentViewer()
{
   ViewBag.Message = "LEADTOOLS Document Viewer";
   return View();
}

• 更新 Shared\_Layout.cshtml 以添加指向 Document Viewer 页面的导航链接。

<li>@Html.ActionLink("Document Viewer", "DocumentViewer", "Home")</li>

• 在 js 文件夹中，添加一个名为 app.ts 的新 TypeScript 项。
• 将以下代码添加到 app.ts 文件中。

module MVC5Demos {
   export module DocumentViewerDemo {
      export class DocumentViewerApp {

         // holds instance of the document viewer control.
         private documentViewer: lt.Documents.UI.DocumentViewer = null;

         // initialize and load.
         public run(): void {
            var that = this;
            // Set the location of the 
            lt.Documents.DocumentFactory.serviceHost = "https://";
            lt.Documents.DocumentFactory.serviceAppName = 
               "LEADTOOLSDocumentsServiceHost19";
            lt.Documents.DocumentFactory.documentsServiceName = 
               "DocumentsService.svc";

            // Init the document viewer, pass along the containers
            var createOptions = 
               new lt.Documents.UI.DocumentViewerCreateOptions();
            createOptions.viewContainer = 
               document.getElementById("viewer-container");
            createOptions.thumbnailsContainer = 
               document.getElementById("thumbnails-container");
            createOptions.useAnnotations = false;

            // Create the document viewer
            this.documentViewer = 
              lt.Documents.UI.DocumentViewerFactory.createDocumentViewer(
                 createOptions);
            
            // We prefer SVG viewing
            this.documentViewer.view.preferredItemType = 
               lt.Documents.UI.DocumentViewerItemType.svg;

            // Load a PDF document
            var url = "http://demo.leadtools.com/images/pdf/leadtools.pdf";
            var loadDocumentCommand = 
               lt.Documents.LoadDocumentCommand.create(url);
            loadDocumentCommand.run()
               .done(function (document) {
                  // We have a document
                  // set the thumbnail size to max 80 x 80. 
                  // Aspect is maintained.
                  document.images.thumbnailPixelSize = 
                     lt.LeadSizeD.create(80, 80);
                  // Set the document in the viewer
                  that.documentViewer.setDocument(document);
               })
               .fail(function (error) {
                  alert("Error loading document: " + error)
               });
         }
      }
   }
}

var app = null;
$(document).ready(function () {
   app = new MVC5Demos.DocumentViewerDemo.DocumentViewerApp();
   app.run();
});

app.run() 函数是一个最简函数，用于演示如何初始化和加载 DocumentViewer 控件。

步骤 6：更新 CSS

缩略图和视图 div 占位符需要设置 height 属性，否则高度将默认为零，导致缩略图和视图不可见。

• 将以下内容添加到项目 content 文件夹中的 site.css 文件中。

.viewer-container {
   height: 470px;
}
.thumbnails-container {
   height: 130px;
   font-size: 8px;
}
@media (min-width: 768px) {
   .viewer-container,
   .thumbnails-container {
      height: 600px;
   }
}

CSS 使用媒体查询（屏幕宽度）来决定 div 容器的宽度和高度。附加项目中的 app.ts 实现根据缩略图容器的宽度更改文档查看器缩略图和视图的布局。

步骤 7：运行项目并测试

• 运行项目，然后点击导航菜单中的“文档查看器”链接。

项目将加载 http://demo.leadtools.com/images/pdf/leadtools.pdf。

结论

LEADTOOLS 为开发人员提供了世界上性能最好、最稳定的成像库，通过易于使用的高级编程接口，可快速开发关键业务应用程序。

LEADTOOLS HTML5 文档查看器控件可以以与 ASP.NET MVC 类似的方式添加到任何 Web 项目中。这意味着可以将高级文档查看器功能添加到几乎任何 Web 应用程序中。

有关其他 LEADTOOLS HTML5 功能的信息，请查看这些过去的article。

• 使用 LEADTOOLS 进行 HTML5 Web 扫描
• 使用 LEADTOOLS 进行 HTML5 成像
• 使用LEADTOOLS HTML5实现零足迹OCR
• HTML5 零客户端 DICOM 和 PACS 查看器
• HTML5 零客户端 DICOM 和 PACS 查看器 – 第 2 部分

下载示例项目

您可以下载包含上述功能的完整功能项目。要运行此示例，您需要以下内容：

• 右键单击解决方案，然后选择“启用 NuGet 包还原”，然后再进行构建。
• LEADTOOLS 免费 60 天试用版
• Visual Studio 2012（带 ASP.NET 和 Web 工具 2013.1）、Visual Studio 2013 或更高版本
• 浏览到 LEADTOOLS 示例文件夹（例如，C:\LEADTOOLS 19\Examples\），您可以在其中找到这些以及更多技术的 LEADTOOLS 示例项目。

支持

需要帮助才能上手吗？  联系我们的支持团队 以获得免费技术支持！有关定价或许可问题，您可以联系我们的销售团队 (sales@leadtools.com) 或致电 +1-704-332-5532。