The PDF Developer Junkie Blog

UPDATED 8/26/2011

Introduction:

This guide is for web designers who create sites that use a combination of HTML files and PDF documents. The information below will, hopefully, help you provide a significantly better PDF viewing experience on your site with minimal effort.

The instructions for modifying your PDF files in this guide are for Acrobat X but the tips in the guide will work in Reader 6.0 and higher. You can download the latest version of the Adobe Reader here. System requirements are listed here. If you need to test your site with earlier versions of Reader, you can download them here.

Viewer Detection:

To take full advantage of the recommendations in this article, you may want to add a script to your site to detect if Adobe Reader or Acrobat are installed and configured properly to display PDF files in the browser. The recommendations in this article only function in browsers that support the Adobe plugin for viewing PDF files. Other browsers such as Google Chrome on Windows and Safari on the Mac have native PDF viewing, however, to the best of my knowledge, these browsers and other third party viewer plugins do not take advantage of the capabilities described below. The box on the right is running a modified version of PluginDetect by Eric Gerds; please consider donating to Eric, his script is fantastic. My modified version is below, feel free to use it. If you have an Adobe PDF viewer plugin functioning in your browser, you should see a green check on the right, if not, you’ll see a yellow warning icon.

If you do not see a green check on the right. The example links and embedded objects on this page will not function properly for you.

PluginDetect will also allow you to discover the version of viewer being used, if you are using Acrobat JavaScript, PDF Portfolios or other version dependent functionality, you may also want to warn your users if the version detected is too low to take anvantage of your PDF file.

Download PDF Plugin Detector Code

How to Make PDF Documents Open Faster

A good viewing experience starts with not waiting too long to see the thing that you just clicked on. There are two factors that determine if your PDF documents will be snappy or sluggish; file structure and file size. PDF files that are properly created can be displayed in the browser just as fast as any other type of content on the web. Below is an explanation of how and why.

Enable Fast Web View in a PDF Document

“Fast Web View” restructures a PDF document for page-at-a-time downloading (byte-serving) from web servers. With Fast Web View enabled, the web server sends only the objects that are required to render the requested page rather than the entire PDF file. This option is especially important with large documents that can take a long time to download from a server. This means that even with a large file, the first page will be displayed almost instantly. Additionally, if you link to a page within the same PDF document, Acrobat will stop downloading the document in background and begin downloading the newly requested page.

When a PDF document is not enabled for Fast Web View, the entire file needs to be downloaded before Acrobat or Reader can display anything. This is why Reader or Acrobat appear to “hang” the browser on some PDF files. It’s not that Reader is slow to load or that the PDF file is bloated, the file has simply been created badly. Try each of the two links below to see the difference. The first link goes to a PDF file that has not been enabled for Fast Web View. The second link goes to a version of the same file except with Fast Web View enabled.

Try It Out:

Slow – Security Administration Guide for Acrobat 9 (PDF 3.45M)
Fast – Security Administration Guide for Acrobat 9 (PDF 3.45M)

Adobe Acrobat X creates PDF documents with Fast Web View enabled by default but most other PDF tools do not. If you are being given PDF documents from others to post to your site, it’s a good idea to be sure they’re enabled for Fast Web View.

Note: The PDF document doesn’t need to have been created by Acrobat to enable it for Fast Web View. Acrobat X can repair most poorly created PDF files.

To verify that a PDF file is enabled for Fast Web View open the PDF file in Acrobat, choose File > Properties. Look in the lower right area of the Description panel of the dialog box for the Fast Web View setting (Yes or No).

Click to Zoom

To enable Fast Web View for an existing PDF, open the PDF in Acrobat and Choose File > Save As > PDF. Select the same filename and location. When a message appears asking if you want to overwrite the existing file, click OK. Fast Web View is automatically applied. For a large number of files, you might want to create an Action to apply Fast Web View to an entire directory of files.

Reduce the File Size

For PDF documents that are intended to be viewed on the web or printed on most desktop printers, you can reduce the size without altering their appearance. The Reduce File Size command resamples and recompresses images, removes embedded Base-14 fonts, and subset-embeds fonts that were left embedded. It also compresses document structure and cleans up elements such as invalid bookmarks. These simple steps can dramatically reduce the size of many PDF files.

1. Open a single PDF, or select one or more PDFs in a PDF Portfolio.
2. Choose File > Save As > Reduced Size PDF.
3. Select the version compatibility that you need. If you’re certain that all your users use Acrobat X or Adobe Reader X, limiting compatibility to the latest version can further reduce file size.Note: If you select Acrobat 4.0 And Later, and the document contains transparency, the transparency is flattened.
4. (Optional) To apply the same settings to multiple files, click Apply To Multiple, and add the files. Click OK, then in the Output Options dialog box, specify your folder and filename preferences.Note: The Apply To Multiple button is not available in PDF Portfolios.

To control changes and quality trade-offs, use PDF Optimizer, which makes more options available.

Optimize the PDF file

If your file is still bigger than you’d like it to be, the PDF Optimizer provides many settings for reducing the size of your PDF files. PDF Optimizer can be a little daunting if you are not familiar with PDF internals and image compression terminology. You can read about the PDF Optimizer and all of it’s settings here.

Linking, Tracking, Downloading and Embedding

Most web designers link to a PDF file in the same way that they’d link to an image file. But Acrobat and the Reader are capable of providing a far better experience. Just as links to HTML pages can use anchors to take you to a specific location in the target HTML file, “PDF Open Parameters” can take you to a specific location in a PDF file.

Deep Linking

Locations in PDF files can be specified by name instead of by page number. These names can then be used as the destinations of bookmarks or links. Using named destinations is particularly advantageous for cross-document links, because if the target document containing a link’s destination is revised, the link still works, regardless of whether the page number in the file has changed. This means that if you have a link in your HTML file that links to, for example, “Chapter 5″ in a PDF document, you can simply upload a new PDF file when the document get’s updated and the HTML link will still go to the right place.

You can open a PDF document with a URL that specifies exactly what to display (a named destination or specific page), and how to display it (using such characteristics as a specific view, scrollbars, bookmarks, annotations, or highlighting).

You can add Destinations from the Destinations Panel. Select View > Navigation Panels > Destinations. Then click on the little gear in the panel.

Try each of the links below to see how the same PDF document can be opened into a different view based on the PDF Open Parameters in the URL .Notice that the href syntax for a named destination in a PDF is identical to an anchor in an HTML file. All three links go to the exact same PDF document, only the Open Parameters are changed.

Try It Out:

Open PDF document to “Parameters” named destination
Open PDF document to page 8
Open PDF document to page 5 and keep the bookmarks panel closed

To see the full set of parameters simply save the document from any of the above links.The documentation has been written for version 9 but works in versions 6 through ten.

Tracking

Because PDF files are downloaded files rather than HTML pages, they are typically not tracked by default. If you are using the Adobe Online Marketing Suite or Google Analytics, you’ll need to add a little extra code to the links that go to your PDF files in order to track them.

Adobe Online Marketing Suite:
SiteCatalyst will automatically track file downloads and exit links based on parameters set in the SiteCatalyst JavaScript file. Optionally, these types of links can be manually tracked using custom link code.

The SiteCatalyst JavaScript file can be configured to automatically track file downloads based on parameters that define download file types to track. The parameters that control automatic tracking are as follows.

s.trackDownloadLinks=true 
s.linkDownloadFileTypes="pdf" 

The parameter trackDownloadLinks determines if automatic file download tracking is enabled. When enabled, any link with a file type matching one of the values in linkDownloadFileTypes will be automatically tracked as a file download.

See the White Paper on Link Tracking for a lot more detail.

Google Analytics:
For Google Analytics, use the _trackPageview() method along with the URL in order to track clicks from users that do not lead to PDF files. In general, it’s recommend that you use Event Tracking for tracking PDF files because virtual pageviews will add to your total pageview count. However, if you want to configure goals based on clicks to PDF files, you need to use this method.

See Virtual Pageviews in the Typical Tracking Customizations section of the Google Analytics Documentation for full details.

Downloading

I’ve been asked how to open a PDF file in the stand alone version of Acrobat or Reader instead of inside the browser often enough that it deserves to be covered in this guide. By the way, this solution has nothing to do with Acrobat, Reader or PDF, it’s just basic server management.

In order to create a link and get the PDF file to download and open in Acrobat or Reader, you want to make the browser to treat the file as an attachment. This will force the browser to simply download the file. With most browsers, the file will then open in the default application for that file type but may also be deposited in the default “downloads” folder on your machine.

I created a separate directory called “downloads” on my server for PDF files that I want to open in the stand-alone Acrobat or Reader rather than the browser. In the “downloads” directory, I added a file called “.htaccess” that allows me to customize the server response to any request for a file from that directory. It contains a single line of code.

Header set Content-Disposition "attachment"

This allows me to create links to PDF files in the “downloads” directory and the end user will be prompted to download the file rather than have it open inside the browser. The following two links will behave very differently even though the <a href=> tag is basically the same and the PDFs are identical except that they are being served up from different directories. If you hover over the link, you’ll be able to see the destinations. The behavior is determined by the directory on the server, not any script or parameter in the <a href=> tag.

Note: The above example is based on the Apache server but all servers have this capability, the implementation may be slightly different.

Try It Out:
This PDF opens in the browser
This PDF will download to your desktop

Embedding

Most web developers and designers create links directly to PDF files. In this case, Acrobat or Reader takes over the entire browser window. Some designers want to leverage the fact that you can display a PDF file in a web page just like any other graphic by using the embed tag in your HTML file. You can also use PDF Open Parameters in the data property to make the document look better in the context of the HTML page.

Careful attention to crafting the HTML page, the use of Reader detection scripts, setting the object tag parameters properly and setting properties in your PDF file correctly can make a PDF file that’s embedded in an HTML page work just as seamlessly as a SWF file.

Embedding using PDFObject

You could use basic HTML markup to embed PDF files in your page but there is a more elegant solution out there. Take a look at PDFObject by Philip Hutchison. PDFObject is a pretty easy scripting tool for dynamically embedding PDF files into web pages. It uses JavaScript to inject an <object> element into the DOM tree of your HTML file. There’s even a handy code generator to help you out with all of the extra parameters you may need.

<script type="text/javascript" src="scripts/pdfobject.js"></script>
<div id="pdf1" style="width:500px; height:375px;"></div>
<script type='text/javascript'>
var myPDF = new PDFObject({ 
     url: 'ConferenceGuide.pdf', 
     pdfOpenParams: { 
          view: 'Fit', 
          scrollbars: '0', 
          toolbar: '0', 
          statusbar: '0', 
          navpanes: '0' }
      }).embed('pdf1'); 
</script>

var myPDF = new PDFObject({ url: ‘http://blogs.adobe.com/pdfdevjunkie/wp-content/themes/Adobe_PDFDevJunkie/pdf/ConferenceGuide.pdf’, pdfOpenParams: { view: ‘Fit’, scrollbars: ’0′, toolbar: ’0′, statusbar: ’0′, navpanes: ’0′ }}).embed(‘pdf1′);

In the example above, I’ve added parameters to the URL that suppress the toolbar, navigation panes, and scrollbars of the Acrobat or Reader user interface. It also sets the view to be fit the page into the window provided by the <div> tag. If you are using Reader X, the importance of these settings may not be readilly apparent. Reader and Acrobat X automatically open PDF files in “Read Mode” where there is no chrome. Earlier versions will show toolbars, scrool bars etc. For a more consistent experience for your end users, be sure to set these properties.

You can navigate the PDF by clicking on it (to activate the embedded PDF) and then use the arrow keys on your keyboard to scroll through the document. The other advantage of this method is that you don’t need to change the PDF Initial View to provide a better experience; you simply adjust the way it looks by adding parameters to the URL.

If this all sounds more complicated than you’d like or simply want your PDF file to be viewed in a consistent and predictable way by the broadest number of browsers, keep reading.

Embedding using Acrobat.com

One of the great features of Acrobat.com is the ability to render a Flash preview of your PDF file with a simple elegant UI. Because the Flash player is supported in more browsers than Reader is, specifically on the Mac, you’ll get a more consistent experience across all of your user base than simply posting a PDF file.

var acrobatDotCom = ““; document.write(acrobatDotCom);

To embed a Flash preview of a file on a web page

1. Upload your file to Acrobat.com – it’s free, you can sign up at Acrobat.com
2. Select the file icon in the organizer and click the Share File button. Or, select Share from the file context menu.
3. Select Publish It, and then click Publish. This will allow anyone with the URL to the file to view it.
4. From the Published tile in the Collaborator bar, select Copy Embed Code.

The necessary HTML code to embed the preview is copied onto the clipboard. Open your HTML file and paste the code into the file. You may want to adjust the default height and width to meet your needs.

Controlling the Adobe Reader and Acrobat User Interface With a Link

I discussed PDF Open Parameters earlier in the “Deep Linking” section and showed an example of controling the Acrobat and Reader UI from parameters in the URL that links to the PDF file. In this section, I’ll expand on that concept.

In addition to controling where the PDF file opens to, you can also use PDF Open Parameters to control what Acrobat and Reader do once the file is opened.

PDF documents can have an “Initial View” that controls what Acrobat or Reader User Interface elements are present when the document first opens. The Initial View is set via the Document Properties dialog.

Click to Zoom

There may be cases where you don’t want to open the PDF file using the document’s Initial View or the document doesn’t have one or you need several different Initial Views but don’t want to duplicate the file. In these cases,you can use the PDF Open Parameters to override the document’s Initial View settings.

The PDF file in the links below is set to open with the Bookmarks Pane visible. The first link overrides the default setting and opens the Thumbnail Pane instead. The second link will open the file and executes a search. The third overrides the defaul zoom and closes the Bookmarks Panel which would be opened by default.

Try It Out:
Open the PDF document with the Thumbnail Pane open
Open the PDF document and search for the word “parameters”
Open the PDF document with the zoom set to “Fit Page” and keep the bookmarks panel closed

Hopefully, all this helps.