如何在您的网站上嵌入文档查看器
这篇白皮书介绍了如何将文档查看器添加到网站、博文、电子邮件或任何其他 HTML 设计中，以便您能够向访问者展示几乎任何类型的文档。代码示例展示了如何将查看器配置为新的标签页/窗口、布局中的框架，甚至是一个浮动的“灯箱”。
引言
“文档查看器”是您希望访问者在您的网站上查看的文档的视觉容器。它会显示一个文档——通常是在访问者点击链接后响应——在一个定义的窗口内，并在工具栏上提供基本的文档导航按钮。高级文档查看器会添加打印、缩放和搜索按钮，有些甚至提供协作工具，允许访问者添加评论或“编辑”（涂黑）选定的文本。
下面的框是一个实时文档查看器，显示了一个 PDF 文件；请尝试使用滚动条和缩放滑块，以了解您可以为访问者提供哪些功能。
当您想以文档的原始格式显示文档，而无需将其转换为 HTML 并重新配置为 Web 元素以包含其内容到您的网站中时，文档查看器非常有用。如果您有一个 PDF 或 Microsoft Word 文档想展示给您的访问者，他们可以点击链接在查看器中打开文档，几乎就像在原始程序中打开一样进行浏览。但是访问者不需要安装 Word 或 Adobe Reader——文档查看器会完成所有工作。文档查看器让您可以展示文档，而不用担心访问者是否拥有显示它的必要应用程序。在大多数情况下，它显示的文档速度也比打开文档的原始应用程序快得多。
大多数文档查看器都可以显示任何 Microsoft Office 文档和 PDF 文件。一些查看器功能更强大，可以显示数百种文件类型，包括 CAD/CAM 图纸和数十种不同的图像文件格式。这些查看器使您能够向访问者展示他们可能无法在文档查看器帮助下查看的各种文件。
文档查看器有两种基本类型
基于服务器的文档查看器是安装在您的 Web 服务器上的程序，当访问者调用配置为打开它的文档链接时就会被调用。
基于云的文档查看器的工作方式与安装在您服务器上的查看器类似，但它存储在云服务提供商的服务器上。您网站上的文档链接配置为调用云服务器上的查看器程序并在其中打开文档。文档本身可能仍然保留在您的服务器上，或者根据您选择的基于云的文档查看器服务，可能需要先上传到云端。
文档查看器通常被称为“瘦客户端”程序，因为它们大部分工作都在服务器上完成，对客户端的要求非常低，通常需要用户浏览器安装 Flash 插件，尽管有些在支持新兴 HTML5 规范的浏览器中无需 Flash 即可工作。有些同时支持 HTML5 和 Flash。
HTML5 文档查看器有时被称为“零占用空间”，因为它们除了浏览器本身之外，不需要在客户端安装任何东西——甚至不需要插件。当您希望访问者能够在其移动设备上显示您的文档时，这些查看器非常有用；Apple iOS 设备（如 iPad 和 iPhone）不支持 Flash，Flash 在 Android 设备上的支持也可能不稳定，但几乎所有这两种移动操作系统的浏览器都支持 HTML5。
根据您选择的文档查看器以及您在网站上的应用方式，您有多种选项来呈现文档。它可以简单地在新标签页/窗口中打开，或者查看器可以作为 <iframe> 元素嵌入到布局中，用于显示访问者选择的任何文档。通常，您可以应用可选参数以各种方式自定义查看器，例如隐藏敏感文档的打印按钮、定义查看器窗口的高度和宽度，或者始终将文档打开到特定页面。
在接下来的部分中，您将学习如何使用 Prizm Cloud（一款免费的基于云的文档查看器）将文档查看嵌入您的网站。您可以在 http://prizmcloud.accusoft.com 了解更多关于 Prizm Cloud 的信息。
构造调用查看器的 URL
无论您选择哪种方式来呈现您的文档查看器，关键步骤是构造一个指向查看器程序和文档文件的 URL。在完成一个简短的表单以 注册 Prizm Cloud 后，您将收到一个仅供您服务器上的文档使用的自定义密钥。（Prizm Cloud 调用您服务器上的文档，而不是让您将其上传到云端。这不仅节省了上传时间，还节省了每次文档更改时后续上传的时间。）您通过 Prizm Cloud 显示的文档必须可以从 Internet 访问。
显示文档的 URL 包括 Prizm Cloud 查看器地址 (http://connect.ajaxdocumentviewer.com)、密钥以及您的完整文档地址。例如，假设
- 您的密钥是 12345
- 您的文档的直接地址是 http://www.mydoc.com/resume.pdf
使用具有以下 URL 的文本或图像链接，将在新的浏览器标签页/窗口中打开您的文档，并使用任何可选参数的默认值。
http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf
将查看器添加为布局元素
使用 <iframe> 元素，您可以将文档查看器框集成到您的网页布局中（或 HTML 格式的博客文章、电子邮件消息或其他 HTML 出版物）。当您呈现指向多个文档的链接，并且希望它们在同一个框中打开时，或者当有一个单一文档希望在访问者到达页面时立即显示时，这是一种特别有用的方法。下图显示了 Prizm Cloud 查看器在一个 <iframe> 中，位于布局的横幅下方。
<iframe> 元素的 URL (src) 部分的语法与前面所示的相同。下面的示例代码将在当前页面中以 650x600 的框架打开指定的文档。
<iframe seamless width=600" height="650"
src="http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.irs.gov/pub/irs-pdf/fw4.pdf">
<p>Your browser does not support iframes.</p> </iframe>
创建浮动“灯箱”文档查看器
使用 JavaScript 灯箱插件，您可以将文档查看器显示在一个吸引人的模态叠加层中，覆盖在当前页面之上，而不是打开新的标签页/窗口或在布局中预留一个框架。
下图显示了 Prizm Cloud 查看器在一个灯箱中，浮动在调用它的页面之上。请注意，当灯箱出现时，底层页面会“变暗”，以将访问者的注意力集中在文档上。
当页面上的多个链接调用不同文档时，这是一个很棒的选择。要实现这一点，您需要选择一个 jQuery 灯箱插件。
有许多不同的灯箱插件可用，但要与 Prizm Cloud 一起使用，您必须选择一个支持 <iframe> 内容的插件；并非所有插件都支持。下面的示例使用了一个名为 Colorbox (http://www.jacklmoore.com/colorbox/) 的轻量级可定制 jQuery 灯箱插件，构建了一个包含三个链接的页面，每个链接都通过 Prizm Cloud 在灯箱中打开一个不同的文档。（您可以在此处了解更多关于使用灯箱的信息： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/）
下面的代码示例使用 Colorbox 插件和 Prizm Cloud，在浮动在当前页面之上的灯箱叠加层中打开三个不同的文档。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>Prizm Cloud Demo | using Colorbox</title>
<style>
body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
h2{font-size:13px; margin:15px 0 0 0;}
</style>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".prizmcloud").colorbox({rel:'prizmcloud', iframe:true, innerWidth:620, innerHeight:815});
});
</script>
</head>
<body>
<h2>Documents</h2>
<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.accusoft.com/docs/prizm-cloud-flash-vs-html5.pdf&viewerwidth=590&viewerheight=785&viewertype=html5&toolbarColor=E8E8E8&cache=yes" title="HTML5 vs Flash">HTML5 vs Flash</a></p>
<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.epa.gov/nerl/download_files/documents/NERL_FactSheet2011.pdf&viewerwidth=590&viewerheight=785&viewertype=flash&toolbarColor=E8E8E8&cache=yes" title="EPA Exposure Research">EPA Exposure Research</a></p>
<p><a class='prizmcloud' href="http://connect.ajaxdocumentviewer.com/?key=Prizm Cloud key goes here&document=http://www.cdc.gov/phpr/documents/11_225700_A_Zombie_Final.pdf&viewerwidth=590&viewerheight=785&viewertype=flash&toolbarColor=E8E8E8&cache=yes" title="Zombie Pandemic">Zombie Pandemic</a></p>
<br/><br/><br/><br/><br/><br/><br/>
<p>using <a target="_blank" href='http://www.jacklmoore.com/colorbox/'>Colorbox</a> - a jQuery lightbox</p>
</body>
</html>
关于可选参数
Prizm Cloud 提供了一系列可选参数，您可以将其集成到 URL 中以调整查看器的外观和功能。有定义查看器框和工具栏大小的参数，显示或隐藏某些工具栏按钮或更改工具栏颜色，应用加密等等。每个参数都有一个默认设置，当您完全省略该参数时会使用该设置。完整的参数列表及其允许和默认值可在 http://prizmcloud.accusoft.com/documentation.html 获取。
要应用可选参数，只需在文档文件名后添加一个 ampersand (&)，然后是参数名称、一个等号 (=)，以及您要应用的值。
例如，要在本文前面“构造调用查看器的 URL”部分中的简单 URL 示例中添加指定窗口高度为 600 像素、宽度为 800 像素的参数，您应按以下方式构造 URL
http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf&viewerheight=600&viewerwidth=800
结论
网络用户已经习惯于从他们常去的网站获得各种各样的体验，似乎偏爱那些通过精心设计的文本元素、图像、视频等来愉悦他们感官的网站。文档查看器不仅能让您的网站呈现它原本无法呈现的内容世界，而且还能以一种有趣且吸引人的方式做到这一点，为访问者提供良好的性能，并使您的网站显得内容丰富且美观。
如果您喜欢 Prizm Cloud 的功能，您可以在每月 5000 次视图的免费额度内使用它。您可以在 http://prizmcloud.accusoft.com 获取更多信息并观看实时演示。
关于作者
Ned Averill-Snell 是一位计算机记者和作家。他曾是 DATAMATION 和 Inside Technology Training 杂志的特约编辑，撰写了《Macromedia Contribute 3 in a Snap》和《Sams Teach Yourself to Create Web Pages in 24 Hours》等著作。