How to Embed a PDF Document Into Your Website

How to Embed a PDF Document Into Your Website

In a recent post I covered a very effective way of Embedding Google Sheets into Your Conference Website to increase your teams efficiency. There is also another fantastic way to streamline deployment of your conference program online, without the need to double handle data or simply have a very uninspiring ‘DOWNLOAD HERE‘ button. Aside from users being able to visually see the full page/s of your PDF, they can also navigate through pages, download the PDF for offline use or print the PDF using the built in print function. All of these features would otherwise have to be developed by your website designer.

I know as this is what I used to do.

  • Receive a Word or Excel doc from a client
  • Recreate the content on their conference website (this was until we started using Google Sheets)
  • Convert the file to a PDF
  • Host the PDF on the conference site
  • Generate a hyperlink or button so users could download the PDF (which they could later print)
  • And this entire process would repeat, every single time there was a document change, which could be daily at some point in an events life cycle.

Now all my clients do is:

  • Work from their master file
  • Generate the PDF
  • Host the file on their own file servers and share the files URL with me
  • I then embed the PDF and every time my client makes a change, all they need to do is replace the file they have hosted on their servers. As long as the URL to that file does not change. I do not have to do a thing, the process is seamless and my clients have full control.

This is achieved by embedding a PDF document into your conference website.

I probably should start by explaining what a PDF document is. In short; a PDF (Portable Document Format) is a file format developed by Adobe in the 1990s to present documents, including text formatting and images, in a manner independent of application software, hardware, and operating systems. PDFs are great as they are transferable documents that can be shared across multiple computer platforms.

Traditionally, most conference organisations will regenerate PDF, load it onto their website in a hosting folder and create a hyperlink or button to link a PDF document to display in the users browser. HTML anchor link is the easiest way to display a PDF file. But if you want to actually display the PDF document visually on the website, your PDF file will need to be embedded in HTML code.

While there are a number of ways to achieve this, I found the easiest and most flexible approach for visually displaying a PDF on a website is by using the HTML <embed> tag. The HTML <embed> tag defines a container within your page where you can load external content. Similar to a window allowing you to view content that is hosted elsewhere and not physically on that page.

So, how do I do this I hear you ask?

Embed your PDF File in HTML

When you are ready to start, simply generate your PDF, upload it to a folder on your website hosting then use the following code on your web page to embed the PDF file and display it visually to your audience.

<embed src=”upload/final-program.pdf” type=”application/pdf” width=”100%” height=”600px” />

The above parameters can be specified in <embed> tag.

  • src – Specifies the path of the external file to embed.
  • type – Specifies the media type of the embedded content.
  • width – Specifies the width of the embedded content.
  • height – Specifies the height of the embedded content.

Now that you have your PDF displaying nicely on your page you can start to control the viewing experience of the PDF document. Using parameters in URL, you can specify exactly what to display and how to display your PDF document.

The following parameters are commonly used to embed PDF file in HTML or open in the browser.

  • page=pagenum – Specifies a number (integer) of the page in the document. The document’s first page has a pagenum value of 1.
  • zoom=scale – Sets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.
  • view=Fit – Set the view of the displayed page.
  • scrollbar=1|0 – Turns scrollbars on or off.
  • toolbar=1|0 – Turns the toolbar on or off.
  • statusbar=1|0 – Turns the status bar on or off.
  • navpanes=1|0 – Turns the navigation panes and tabs on or off.

Specifying Parameters in a URL

You can also specify multiple parameters in the ‘src’ URL. Each parameter should be separated with either an ampersand (&) or a pound (#) character. Actions are executed from left to right and later actions will override the previous actions.

URL with parameters looks like the following.
https://conference-site.com.au/program.pdf#Chapter5
https://conference-site.com.au/program.pdf#page=5
https://conference-site.com.au/program.pdf#page=3&zoom=200,250,100
https://conference-site.com.au/program.pdf#zoom=100
https://conference-site.com.au/program.pdf#page=72&view=fitH,100

Disable and Hide Toolbar in PDF Web Viewer

If you want to go a step further and hide or remove the toolbar, navpanes, and scrollbar of the PDF file opened in HTML <embed> simply use the following parameters in the src URL.

<embed src="upload/final-program.pdf#toolbar=0&navpanes=0&scrollbar=0" type="application/pdf" width="100%" height="600px" />

I hope this information has you thinking of innovative ways to work with your event team to streamline the process of managing content deployment on your conference sites. I cannot tell you the time this and the Google Sheet Embed has saved me and my clients.

Want to see how this works? Check out our Products and Services Guide

Leave a Reply

Your email address will not be published. Required fields are marked *