This week’s Uncle Pete’s corner will be cover embedding a PDF in a WebDev Page

We are working on a Electronic Parts Distributor eCommerce website and one requirement is to display data sheets for the products. Data Sheets are technical documents in PDF format with all types of technical information about a part. They can be several pages.

You may be thinking this is going to be a quick article! Just use the FileDisplay command, like this:

FileDisplay(CompleteDir(fWebDir())+"6161996.pdf","application/pdf")

You are right that will display the PDF, but it does so as a full page, and navigates away from the website. Still not a huge hurdle that could be solved by changing the target of the link to “New Browser”, which will cause the PDF to open in a new tab of the browser and leave the current page in the current tab.

Better but we want MORE!  We want to display the PDF as a portion of the page, so that we can retain our branding, call to actions, etc. The end result we want is this:

Notice this is displayed in a Popup. The company contact information is at the top of the popup, a call to action is at the bottom. The PDF is displayed directly on the page, and the built in PDF viewer of the browser allows the standard PDF viewer functions to work. We can also scroll through the PDF.

Creating the Popup and displaying was easy enough, but embedding the PDF proved a little more difficult.

My first attempt was to use an iFrame control.

In the Init of the Page I used these two lines to point the iFrame Control to the PDF

PDFPAth is string = "http://localhost/WXOPENSOURCE_WEB/6161996.pdf"
popDisplayDataSheetIFrame.ifrmDataSheet..URL = PDFPAth

All seemed well until I started testing. Thanks to a few guys on the Skype chat that lended a hand with testing! I quickly found out that it would display correctly in Chrome, but after displaying some of the links of the page would quit working. In Internet Explorer it would not display the PDF at all and in fact some users reported getting a prompt asking them to save the PDF. It did seem to work right in Firefox but 1 our of 3 ain’t good when you are designing an eCommerce site!

So it was off to Google, or as I like to call it a “Programmers Best Friend”. I didn’t take long to find that doing a direct embed like an iFrame was indeed unreliable, and that the proper way to embed a PDF is to use the HTML Object tag. Google said that the object tag should be formated similar to this:

It appears you don't have A PDF plugin FOR this browser.
 No biggie... you can click here to download the PDF file.
 

The <p> tag inside the object tag is used to display a link if the user happens to not have a PDF viewer on their machine. Don’t ask me what rock that user has been living under but it must have been a big one!

So now the only thing left is how to use that Object tag in WebDev. Instead of the iFrame control you use an HTML control.

And in the Init of the window this code sets the HTML control as needed:

PDFPAth is string = "http://localhost/WXOPENSOURCE_WEB/6161996.pdf"

popDisplayDataSheet.htmlDataSheet = [

It appears you don't have A PDF plugin FOR this browser.
No biggie... you can click here to
download the PDF file.

]

popDisplayDataSheet.htmlDataSheet = StringBuild(popDisplayDataSheet.htmlDataSheet,PDFPAth)

This is the same Object tag, it is just using the very powerful, [] and StringBuild functions of WX to format the string.

And there you have it, PDF embedded into your web page.

Be sure to go over to wxLive.us and watch the Uncle Pete’s corner webinar that is the companion to this article.

Uncle Pete’s Corner is weekly webinar on all things WX every Friday,  to watch the recorded version of this webinar, many other WX related webinars or to watch future ones live go to wxLive.us

[suffusion-the-author display=’author’]

[suffusion-the-author display=’description’]

 

• WX