Fun with the HTML <object> Tag and PDF Files

[This post was originally published on May 1, 2017. Updated on February 26, 2019.]

Well, it’s a lot more fun to code web pages here in the 21st century!

With the HTML <object> tag, you can embed a “preview” of a file, such as a PDF file, in your plain, old, HTML code.

Just do it like this:

<object data="name_of_file.pdf#page1" type="application/pdf"></object>

Put some alternative text between the opening and closing <object> tags like this, just in case the user’s browser does not support the particular file type you are using:

<object data="name_of_file.pdf#page1" type="application/pdf">Sorry, your browser does not support this file type.</object>

You can also put the width and height attributes on the tag, like so:

<object data="name_of_file.pdf#page1" type="application/pdf" width="100%" height="100%">Sorry, your browser does not support this file type.</object>

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.