Introduction
A "document viewer" is a visual container for documents you
want visitors to be able to view in your website. It displays a document –
typically in response to the visitor clicking a link – within a defined window
and provides basic document navigation buttons on a toolbar. Advanced document
viewers add buttons for printing, zooming and searching, and some even offer
collaboration tools that enable visitors to add comments or black out ("redact")
selected text.
The box below is a live document viewer showing a PDF file; try the scrollbar, and the Zoom slider, to get a feel for the functions you can provide your visitors.
Document viewers are great when you want to show documents
in their native format, without converting them to HTML and reconfiguring them
as web elements to include their content in your site. If you have a PDF or
Microsoft Word document you want to present to your visitors, they can click a
link to open the document in the viewer and explore it almost as if they had
opened it in its native program. But the visitor need not have Word or Adobe
Reader installed – the document viewer does all the work. A document viewer
frees you to show a document without worrying about whether the visitor has the
necessary application to display it. In most cases, it also displays the
document far more quickly than opening the document’s native application.
Most document viewers can display any Microsoft Office
document and PDF files. Some viewers do more, displaying hundreds of file
types, including CAD/CAM drawings and dozens of different image file formats.
These viewers enable you to show your visitors all sorts of files they probably
could not view without the document viewer’s help.
There are two basic types of document viewers:
A server-based
document viewer is a program installed on your web server, called whenever a
visitor invokes a document link configured to open it.
A cloud-based
document viewer works just like one installed on your server, but it’s stored
on cloud service provider’s server. The document link in your website is
configured to call the viewer program on the cloud server and open the document
within it. The document itself may still reside on your server, or it may have
to be uploaded to the Cloud first, depending on which cloud-based document
viewer service you choose.
Sometimes called "thin client" programs because they do most
of their work on the server and demand very little of the client, document
viewers typically require the Flash plugin to be installed in the user’s
browser, although some can work without Flash in browsers that support the
emerging HTML5 specification. Some support both HTML5 and Flash.
HTML5 document viewers are sometimes labeled "zero
footprint" because they require nothing on the client except the browser itself
-- not even a plugin. These viewers are great when you want your visitors to be
able to display your documents on their mobile devices; there’s no Flash
support on Apple iOS devices like the iPad and iPhone, and Flash support can be
iffy on Android devices, but virtually all browsers for both mobile operating
systems support HTML5.
Depending on the document viewer you select and on how you
apply it in your site, you have various options for how to present the
document. It can simply open in a new tab/window, or the viewer can be
incorporated as an <iframe>
element into the layout, ready to house any
document the visitor chooses. Often you can apply optional parameters that
customize the viewer in various ways, such as hiding the Print button for
sensitive documents, defining the height and width of the viewer window, or
always opening the document to a particular page.
In the following sections, you will learn how to embed
document viewing in your website using Prizm Cloud, a free cloud-based document
viewer. You can learn more about Prizm Cloud at http://prizmcloud.accusoft.com.
Phrasing
a URL that Calls a Viewer
No matter which way you choose to present your document
viewer, the critical step is phrasing a URL that points to the viewer program
and the document file. After completing a brief form to sign up for Prizm Cloud, you’ll receive a
custom key to use only for your documents on your server. (Prizm Cloud calls
documents from your server instead of making you upload them to the Cloud. This
saves you not only the time required for the upload, but the time required for
subsequent uploads anytime the document changes.) The documents you display
through Prizm Cloud must be Internet accessible.
The URL for displaying a document comprises the Prizm Cloud
viewer address (http://connect.ajaxdocumentviewer.com), the key, and your full
document address. For example, suppose that:
- Your key
is 12345
- The direct
address to your document is http://www.mydoc.com/resume.pdf
A text or image link with the following URL opens your
document in a new browser tab/window, using default values for any optional
parameters.
http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf
Adding
the Viewer as a Layout Element
Using an <iframe>
element, you can incorporate a
document viewer box into the layout of your web page (or HTML-formatted blog
post, email message or other HTML publication). This is an especially useful
approach when you are presenting links to multiple documents you want to open
in the same box, or when there’s a single document you want to present as soon
as the visitor arrives at your page. The image below shows the Prizm Cloud viewer
in an <iframe>
, beneath a banner in the layout.
The syntax for the URL (src) portion of the <iframe>
element is the same as shown earlier. The sample code below opens the specified
document in a 650x600 frame on the current page.
<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>
Creating
a Floating "Lightbox" Document Viewer
Using a JavaScript lightbox plugin, you can display a
document viewer in an attractive modal overlay atop the current page, rather
than opening a new tab/window or setting aside a frame in the layout.
The image below shows the Prizm Cloud viewer in a lightbox
floating over the page from which it was called. Observe that the underlying
page is "dimmed" when the lightbox appears, to focus the visitor’s attention on
the document.
This is a great option when multiple links on a page call
different documents. To do this, you need to pick up a jQuery lightbox plugin.
There are many different lightbox plugins available,
although for use with Prizm Cloud, you must choose one that supports
<iframe>
content; not all do. The example below uses a lightweight
customizable lightbox plugin for jQuery called Colorbox (http://www.jacklmoore.com/colorbox/)
in building a page of three links, each of which opens a different document
through Prizm Cloud in a lightbox. (You can learn more about using a lightbox
here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/super-simple-lightbox-with-css-and-jquery/)
The code sample below uses the Colorbox plugin and Prizm Cloud to open three different documents in a lightbox overlay that floats above the current page.
<!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.com/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: });
</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>
About Optional Parameters
Prizm Cloud features a family of optional parameters you can
incorporate in the URL to adjust the look and functionality of the viewer.
There are parameters that define the size of the viewer box and the toolbar,
display or hide certain toolbar buttons or change the toolbar color, apply
encryption, and more. For every parameter there is a default setting used when
you omit the parameter altogether. A full listing of parameters and their
permitted and default values is available at http://prizmcloud.accusoft.com/documentation.html.
To apply optional parameters, simply add an ampersand
(&) after the document filename, followed by the parameter name, an equals
sign (=), and the setting you want to apply.
For example, to add parameters specifying a window size of
600 pixels high by 800 pixels wide for the simple URL sample earlier in this
article under Phrasing a URL that Calls a Viewer, you would phrase the
URL as follows:
http://connect.ajaxdocumentviewer.com?key=12345&document=http://www.mydoc.com/resume.pdf&viewerheight=600&viewerwidth=800
Conclusion
Web citizens have come to expect a lot of variety from the
sites they frequent, seeming to favor those that delight their senses with a
mix of well-designed text elements, images, video, and more. A document viewer
not only enables your site to present a world of content it otherwise could
not, but also does so in a way that is fun and attractive, performs well for
the visitor, and distinguishes your site as one both rich in content and nice
to look at.
If you like what you see of Prizm Cloud, you can use it free
of charge for up to 5,000 views per month. You can get more information, and
see a live demo, at http://prizmcloud.accusoft.com.
About the
Author
Ned Averill-Snell is a computer journalist and author. A
past contributing editor to DATAMATION and Inside Technology Training
magazines, he is the author of Macromedia Contribute 3 in a Snap and Sams
Teach Yourself to Create Web Pages in 24 Hours, among other titles.