使用 HTML5 和 jQuery 创建多页嵌入式查看器

制作查看器

HTML5 目前没有办法在 Web 应用程序中嵌入显示多页文档。 在这个 CodeProject 实验室中，我们将构建一个 UI 控件，用于在单个容器中显示多个页面。 在 Visual Studio 中创建可重用组件时，我喜欢从空白 Web 应用程序开始。

选择“文件”>“新建项目”>“Web”>“空白 Web 应用程序”

为了开始创建查看器对象，我喜欢考虑如何使用它，以及为用户动态设置查看器的最简单方法，如下所示：

var viewer = CreateViewer("#myViewerDiv");
viewer.OpenFile("default");

我们使用工厂方法来实例化查看器，并使用一个简单的查看器 API 方法来打开图像。 好的，很简单，现在我们可以创建 js 库文件了。

在解决方案资源管理器中选择该项目，并将一个新的 Javascript 文件添加到该项目中。 创建完成后，我们可以创建 CreateViewer 函数的骨架

function CreateViewer(target){
 var viewerobj = {
  ui:$(target),
  OpenFile: function(path) {}
 };
 viewerobj.ui.addClass("ViewerUI");
}

有了这个函数，我们现在将一个 div 标记为查看器，并应用一个样式类来适当地设置其样式。对于初学者，我推荐这个样式表

.ViewerUI

{

    width:98vw;

    height:600px;

    border: 1px solid black;

    background-color: lightgray;

    overflow-y:auto;

    overflow-x:scroll;

}

我们现在可以运行应用程序来查看样式的应用

很好！我们正在取得进展。现在我们需要从服务器将图像加载到 div 中。 为了完成这项任务，我们需要创建某种服务器端功能来收集和返回图像。 为此，我将使用 asp.net 通用处理程序对象。

在解决方案资源管理器中选择您的项目，并添加一个新的通用处理程序对象

public void ProcessRequest(HttpContext context)
{
 string directorypath = context.Server.MapPath("/Images/");
 string target = context.Request.QueryString["target"];
 context.Response.Write(GetFolder(directorypath,target));
}

然后我们需要创建 GetFolder 函数，它将返回服务器上特定文件夹中图像的相关数据到客户端。为了客户端的目的，每个图像的相关数据是

• ImageURL（能够打开图像）
• ImageSize（能够缩放 img 标签）

我喜欢在服务器端处理数据的复杂性，因此在下面的函数中，我正在为服务器的返回数据创建一个 JSON 字符串，同时获取文件夹中的所有图像。

public string GetFolder(string basedir, string target)
{
 string[] images = Directory.GetFiles(basedir+"\\"+target);
 StringBuilder sb = new StringBuilder();
 sb.Append("{images:[");
 int emptysize = sb.Length;
 foreach (string path in images)
 {
   string filename = Path.GetFileName(path);
   sb.Append("{");
   sb.Append(CreateImageObject(new Bitmap(path),"\\\\Images\\\\"+target+"\\\\"+filename));
   sb.Append("}");
   sb.Append(",");
 }
 if(sb.Length!=emptysize)
  sb.Remove(sb.Length-1, 1);
 sb.Append("]}");
 return sb.ToString();
}

我很抱歉上面的代码很冗长，但我认为为了这个练习的目的，不使用任何捷径来创建一个可以被客户端使用的 JSON 字符串很重要。 因此客户端需要的最后一个函数是 CreateImageObject，它只是格式化文件夹中每个图像的所需数据，以便在查看器中显示。

private string CreateImageObject(Bitmap bitmap, string filename)
{
   StringBuilder sb = new StringBuilder();
   sb.Append("width:");
   sb.Append(bitmap.Width);
   sb.Append(",");
   sb.Append("height:");
   sb.Append(bitmap.Height);
   sb.Append(",");
   sb.Append("filename:");
   sb.Append("\"");
   sb.Append(filename);
   sb.Append("\"");
   return sb.ToString();
}

有了这个函数，服务器端就完成了。 我们现在有一个函数可以接收一个文件夹名称并返回一个描述文件夹中包含的图像的 JSON 字符串。 剩下的就是让客户端调用信息并将图像添加到 DOM 中。 为此，我们回到客户端 js 文件

OpenFile: function(path) {
        var send = { Open: "folder", target: imageTarget }
        ui.children().remove();
        $.get("ViewerHandler.ashx", send, imageDataRecieved);
}

该函数包含三个简单的步骤。 创建一个数据对象发送到服务器，清除查看器，然后发送带有回调函数的请求。 然后将使用回调函数来使用返回的数据对象，最后创建查看器。 这个查看器最重要的功能是根据查看器可用的空间动态地提供适当大小的图像。

function imageDataRecieved(data,status,jqXHR)
{
    var images = eval(data);
    var viewerWidth = _vobj.ui.width()-10-20; // padding scrollbar
    images.forEach(function (image) {
        var ratio = viewerWidth / image.width;
        var img = jQuery("<img></img>");
        img.attr("src", image.filename);
        img.css("width", viewerWidth);
        img.css("height", image.height * ratio);
        img.css("border", "1px solid black");
        img.css("margin-left", "5px");
        img.css("margin-bottom", "5px");
        _vobj.ui.append(img); //this is an internal pointer to the viewer object
    });
}

这个最终函数获取 JSON 字符串，将其转换为可用数据，然后将每个图像放入查看器中，并在调整大小以适当适应的同时保持每个图像的宽高比。 完成最后一个函数后，运行页面会产生我们的第一个功能查看器。

扩展查看器

扩展查看器主要取决于需要用它做什么。 拥有 html 查看器的主要原因之一是添加对浏览器本身不支持的图像格式的支持。 扫描文档最常见的格式是 PDF 和 TIFF。 为了增加对这些格式的支持，服务器必须能够打开这些文件，并为其中包含的每个页面创建临时的单页 Web 本地图像文件。

Atalasoft 提供 PDF 和 TIFF 解码器以及一个预先构建的查看器来显示这些文件格式。 访问 www.atalasoft.com/webdocumentviewer 以了解更多信息。

如果您需要查看器做其他任何事情，请在评论中发布，我可能会跟进并在以后的帖子中为这个基本查看器创建更多扩展。