You might have seen that there are many websites use HTML embed pdf files directly in their web page rather than giving a download link for the same. It is because the beauty and help of HTML 5, and you can also do this easily without any technical knowledge using the free software www.Yumpu.com.
I will now teach you how to embed PDF documents in HTML websites.
1 - Keep your PDF ready
2 - Register here for free at Yumpu
3 - Upload your PDF
4 - Klick on "Shrare" to get your embed code for your online PDF
HTML embed PDF techniques
Following are a few methods in which you can HTML embed pdf documents in a web site with the help of HTML5. Let us have a detailed look at the methods to display pdf in html.
<embed>
The most common method is to make use of the pdf embed tag. Apart from .pdf files, you can use this tag to embed mp3 files, videos, images, and other multimedia content as well. This tag acts as a container for the file that you want to embed in your web page. With the help of this tag, your browser will automatically get the controls for displaying multimedia content.
All you need to do to add this tag is open HTML page where you want to embed the .pdf file and add the below mentioned code-
<embed width=”500” height=”400” src=”” type=”application/pdf”> </embed>
Here, the width and height will be the width and height of the container in which your embedded pdf file will be displayed. src is the path of your .pdf file and type is the type of media / image that you want to embed.
<object>
The next method is to use the <object> tag. This tag is generally used when the browser doesn’t supports embedding of PDF documents. This tag can also be used if you want to embed other web page in your HTML document. Along with the <object> tag, you can also use <param> if you want to define parameters to the file.
Tag- <object data=”/html/sample.pdf” type=”pdf/html” width=”300″ height=”200″><p><b>Example content</b>: Please download the PDF to view it as this browser does not support PDFs: <a href=”/pdf/sample-xyz.pdf”>Download PDF</a>.</p></object>
Just like the above mentioned <embed> tag, here too, the width and height are the width and height of the container in which the text will be displayed, data is the path of your PDF file and type is the type of media that you are looking to embed in your web page. You can write any content you want in the body of the HTML.
<iframe>
The iframe tag is also very commonly used when the browser doesn’t supports embedding.
Tag- <iframe src=”/pdf/sample-xyz.pdf” height=”100%” width=”100%”>This browser does not support PDFs. Please download the PDF to view it: <a href=”/pdf/sample-xyz.pdf”>Download PDF</a></iframe>
src is the location of your .pdf file, height and width are of the area in which the message will be displayed and the message you want to display can be anything that you want the users to click on to download the PDF file.
<object> and <iframe>
<object> can also be used along with <iframe> to make sure that the fallback content reached to maximum number of users.
Tag- <object data=”/pdf/sample-xyz.pdf” type=”application/pdf” height=”100%” width=”100%”>
<iframe src=”/pdf/sample-xyz.pdf” style=”border: none;” height=”100%” width=”100%”>
Please download the PDF here as the browser does not support PDF files : <a href=”/pdf/sample-xyz.pdf”>Download</a>
</iframe>
</object>
Just like all the above mentioned methods, src will be the source of your PDF file, type will be the type of the file, height and width will be the area in which the message ad download link will be displayed. The text you want to display can be as per your preference.
These are the methods that you can use if you want to embed PDF forms and exploit the power of PDF marketing or more specifically, of HTML Embed PDF file in a web site.
comments (0)