How to Load a PDF Within a Web Page

By Ed Oswald

As a web designer, you may want to load a PDF file within the website you are creating, allowing the end user to view the file within your design rather than launching a separate viewer such as Adobe Reader. This can be done using a few lines of HTML and embedding the PDF file just like you would for any other multimedia object. Previous knowledge of HTML and web development is required to complete this tutorial.

Things You'll Need

  • HTML editor
  • PDF file you wish to embed
  • FTP client
  • Web browser
  • Adobe Reader or similar PDF viewer

Embedding and Viewing the PDF File

Step 1

Select the PDF file you would like to embed in your site. With your FTP client, upload the file to your web server.

Step 2

Open your HTML editor and open the page you wish to embed the PDF file within. Select the location on the page where you would like to place the embedded file and make space to add new code within the respective spot in the HTML source.

Step 3

Type the following code: "". "x.pdf" is the location to your file (replace the "x" with your PDF file name), "y" the width of the PDF display area in pixels, and "z" its height. Be sure to take into consideration the width and height of the actual PDF file when making decisions on how large to make this area.

Step 4

Add the following parameters as necessary after the height variable: toolbar, navpane and scrollbar. Making it equal to zero will tell the browser not to render these objects in the window. For example, to prevent the toolbar from loading, add toolbar="0" to the above code before the ">" enclosure.

Step 5

Continue to type the following code after the code in Step 3: "Click here to view the file." Here again "x.pdf" is the location of the file. This line of code will ensure that visitors with older browsers that may not support the object tag will still be able to load your PDF file.

Step 6

Close the object tag by typing the following after the code from Step 4: "". This will tell the browser that the code for the embedding is complete.

Step 7

Save the page you are working on and upload it to your web server. With your web browser, enter the URL to the page you have just edited and ensure the embedding has been successful and appears as you want it to.

Tips & Warnings

  • PDF files are a good way to ensure that a document appears as you want it to with the end user, regardless of his or her configuration. It is also cross-platform and a document standard, meaning a majority of users will be able to view the file without the need for proprietary software.

References & Resources