How to Load a PDF Within a Web Page

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.

Male office worker at workstation, view over shoulder
credit: Christopher Robbins/Photodisc/Getty Images

Embedding and Viewing the PDF File

Step

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

Step

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

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

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

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

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

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.