HTML Applications: Displaying PDFs

by David Halls

Introduction

This article is about how to display a pdf document in an HTML Programme. It will be part of a series to design a programme to generate, display and print a pdf document. These are widely used for sending invoices, newsletters and publications by email.

An HTML programme is not for the web but is designed to run on your own computer. In these circumstances, we can specify what components should be present. In this case, they are:

The browser will be Microsoft Internet Explorer. With IE, we can use VBScript as the programmimg language.
Acrobat Reader will be used to display pdf documents.
The application will be saved with the suffix .hta to denote that it is a local application and is not subject to security restrictions that would raise alarms if used on a website. However, this means that you will find it difficult to send an .hta as an email attachment or make it available through a link on a website.

Displaying in an iframe

The basic HTML code shown below creates a page in which is an iframe. The source, src, for the document is an Adobe pdf document, which is actually reference 1 listed below, which we will be referring to later. This document has been saved to the same folder as the application.

<html>
<body>
<div id = "page">
<center>
<iframe id= "pdfframe"  src = "PDFOpenParameters.pdf"  scrolling="auto" >
</iframe>
</center>
</div>
</body>
</html>

Some CSS has also been used to style the page but this will be shown later.

The result shown below is a little disappointing. The document is small and the Acrobat Reader toolbar and navigation panes take up much of the space in the iframe.

Iframe image 1

Acrobat Reader Open Parameters

Fortunately, Adobe has provided various open parameters which define how the pdf is displayed. These can be attached to the URL following a # tag.

The ones that will be most useful to us are:-

toolbar=1\|0	Turns the toolbar on or off.
navpanes=1\|0	Turns the navigation panes and tabs on or off.
zoom=scale	Sets the zoom. For example, a scale value of 100 indicates a zoom value of 100%.

To switch off the toolbar we change the src for the iframe to:-

src = "PDFOpenParameters.pdf#toolbar=0"

The result without the toolbar, shown below, is an improvement.

Iframe Image 2

We also need to switch off the navigation panes. The two parameters are joined by an ampersand (&).

src = "PDFOpenParameters.pdf#ttoolbar=0&navpanes=0"

Iframe Image 3

This is much better and allows us to see and scroll through the document. Since we have not used any script so far, this can be shown working on this html page (as long as you are using Acrobat Reader for viewing pdfs}. The document can be scrolled.

CSS Code

The css code for the iframe sets the height, width and border. Margins at the top and bottom space it out on the page.

<style type = "text/css">

#pdfframe {
margin-top:20px;
margin-bottom:20px;
width:550px;
height:700px;
border: 1px solid silver; }

</style>

Changing the document with a link

If we would like to change the document displayed in the iframe we can do this through a series of links, as shown here:-

Iframe Image 2

The code for the links follows this pattern:-

<a href ="#" onclick = "findpdf('Acrobat_SDK_developer_faq.pdf')">Acrobat SDK FAQ</a>

Clicking the link calls a subroutine called findpdf for the URL of the document. The VBScript for this routine is:-

<script language="VBScript" type="text/vbscript">

sub findpdf(URL)
URL = URL + "#toolbar=0&navpanes=0"
document.getElementById("pdfframe").src = URL
end sub

</script>

The subroutine takes the URL of the document and adds on the parameters to suppress the toolbar and navigation panes. The source, src, of the iframe is then set to this extended URL.

This exchange can also be operated by a Javascript function, as shown below:-


<script language="Javascript" type="text/javascript">

function findpdf(URL){
URL = URL + "#toolbar=0&navpanes=0";
document.getElementById("pdfframe").src = URL;
}
	 
</script>

The Javascript version will work on the internet (provided you are using Adobe Reader) and can be seen and tested here.

Conclusion

This article shows how you can display a PDF document in an HTML page and how you can use Adobe Reader open parameters to just show the pages without the toolbar and navigation panes.

Although this was designed for an HTML application (offline), much of this is applicable to a web page. For the open parameters to work, the website users would have to be using Adobe Reader for pdf display. It will work correctly in Chrome as a browser which has its own pdf engine, but there are many other pdf readers around that may act differently.

References

Article Date:28th January 2013.