Embedding a PDF Document In HTML

You can request that PopChart Server generate an image in the PDF format by using the @_PDF server command. For example, assuming PopChart Server is running on the local system with its default settings, the following HTTP request will generate an PDF PopChart document:

http://localhost:2001/?@_FILEexamples/apfiles/bar.pcxml@_PDF

If you attempt to browse to a PDF document—for example, entering the location above in the location bar of your browser—a plug-in, such as Acrobat® Reader®, will most likely start-up. Depending on your browser and the version of the plug-in, the plug-in may start as a separate program, or it may start within the browser window.

If you do not have the proper plug-in, you will be asked to specify a location to download the file to. In some instances, despite the fact that you don't have the plug-in, you may still have software capable of opening the downloaded document.

Most people don't embed PDF documents within a web page. Instead, they provide a link to the PDF document, which can be viewed separately. Example 14.1 shows how you might link to a PopChart PDF document.

Example 14.1 Linking to a PDF Document

<a href="http://localhost:2001/?@_FILEexamples/apfiles/bar.pcxml@_PDF"> 

Click here to view the graph in PDF format 

</a>

When a viewer clicks on this link, the browser will either jump to the PDF document or, if the proper plug-in is not installed, download the document. If you are using the Acrobat Reader plug-in, you will see the Acrobat Reader menu above the PopChart image and just below the browser's menu and location bars. You will be able to navigate and save the document using this interface just as you would in Acrobat Reader.

If you want to embed the PopChart PDF document within your web page, you can try one of the following techniques. The first technique is to embed it using the <object> tag. To do this, simply specify your PopChart PDF document as the source to of this object (using the src attribute).

This technique will work in both Microsoft Internet Explorer 5.0 and up, as well as Netscape Navigator 4.08 and up. However, the results are slightly different. Assuming that you're using the Acrobat Reader plug-in, Internet Explorer will use the Acrobat Reader interface to show the PDF document, meaning that you will see Acrobat Reader menu and control bars as part of your "image." Netscape browsers, meanwhile, will show the entire PDF document as an image. There will be no menu or control bar; however, the user will be unable to resize or save the image.

Example 14.2 illustrates this technique.

Example 14.2 Using an <object> Tag To Embed a PDF Document

<object height="300" width="400" src="http://localhost:2001/?@_FILEexamples/apfiles/bar.pcxml@_PDF"> 

</object>

If you know that your user is using either Microsoft Internet Explorer 5.0 or above, or Netscape 6.1 or above, you can also "embed" the PDF document using an <iframe> tag. The <iframe> tag allows you to create a frame within the current viewing window. You can specify your PopChart PDF document as the source to of this frame (using the src attribute). If you are using the Acrobat Reader plug-in, this technique will result in the Acrobat Reader menu and control bars being shown within the frame, regardless of what browser you use.

Example 14.3 illustrates this technique. It also provides a link to the PDF document in case the user's browser does not support the <iframe> tag.

Example 14.3 Using an <iframe> Tag To Embed a PDF Document

<p>The graph in the PDF document below plots last month's sales.</p> 

<iframe height="300" width="400" src="http://localhost:2001/?@_FILEexamples/apfiles/bar.pcxml@_PDF"> 

[If you see this text, your browser cannot display this graph inside of this document. Click <a href="http://localhost:2001/?@_FILEexamples/apfiles/bar.pcxml@_PDF">here</a> to view it separately.] 

</iframe>