How to Embed PDF File in HTML Page

Hi, today we’ll see how to embed pdf file in a html page directly. Some websites tend to show pdf files directly on their site’s webpages instead of giving a download link for the files. Thanks to HTML5, you can also do the same with simple html code without using any third party solutions. The method we are going to see is the quick and easy solution which gives you some control over how the pdf file is shown to the user. Also it works on all modern web browsers that support HTML5.

How to Embed PDF File in HTML Page

HTML5 provides <embed> element which acts as a container for external application like image, videos, mp3 files or other multimedia objects. Using this tag makes the browser to automatically include controls for the multimedia objects (in case the browser supports the particular media type).

We are going to use this <embed> tag to show the pdf files in the web page without using complex third party scripts. Open the html page in which you want to embed the file and include the below markup wherever you want the pdf file to be shown.


<embed width="600" height="450" src="mypdf.pdf" type="application/pdf"></embed>

The attributes width and height represents the width and height of the pdf container in pixels.

The attribute src is the path to the pdf file to be embedded.

The attribute type is the media type of the embedded content.

Now you open the file in browser and the pdf file is shown in the html page like this.

how to embed pdf file in html page
Read Also:

I hope you like this simple solution to embed the pdf files in website’s html page without hassle.

تعليقات

إرسال تعليق

المشاركات الشائعة من هذه المدونة

BlueHost Web Hosting Review: Secrets Revealed for Shared Hosting

صورة
BlueHost is one of the biggest web-hosting company providing quality web hosting solutions over two decades from business enterprises to individuals since 1996. Over the years the company secured a place in the list of top twenty web hosting companies in the world and operates with its headquarters being situated in Provo, Utah, USA - along with 700 plus employees. Currently Bluehost and its sister concerns said to host nearly two-million domains and is a major achievement for any web hosting providers. Though it is regarded as the largest shared hosting service provider, ‘Is Bluehost a right choice for websites developed on PHP based platforms?’ To understand it better, here we have altogether reviewed Bluehost Web-Hosting Services from several perspective including performance, pricing, platform compatibility, uptime, security, after support and more. Get Bluehost Hosting for just $3.95 per month with Free Domain 1. Hosting Features BlueHost’s Blazing Fast Servers with Speed
قراءة المزيد

How to Create Treeview with Bootstrap and jQuery

صورة
Hi! Today let's see about creating treeview using bootstrap and jquery . A Treeview is a tree like representation of elements in a hierarchical structure. It offers a quick and easy navigation through websites. Although there are several jquery plugins available for tree view that simplify the task, I wanted something that works well with bootstrap. And I found out a good library called 'Bootstrap Treeview' . It leverages the best of bootstrap framework and helps you display hierarchical tree structures using the JSON data set. You can do much more than a simple tree, like fetch data from the database and render a dynamic tree, make it collapsible, add icons , checkboxes and filters etc. Building Treeview with Bootstrap: Now let's see how to add treeview in bootstrap. To build the menu, we need three different libraries, Bootstrap CSS jQuery Bootstrap Treeview These libraries are available in the cdn, so you can load them directly on your projects without down
قراءة المزيد

Submit Form using jQuery AJAX and PHP without Page Refresh

صورة
Hi! In this tutorial we will see how to submit form using jquery ajax and php without page refresh . Web Development enhanced with AJAX increases speed and performance thereby improving the overall user experience. It allows you to update part of a web page without refreshing it completely. Basically, when you submit an html form, the entire page will be refreshed. But by using ajax technique, you can submit the form to the web server without having to reload the page. Instead, the form data will be submitted to the server in the background and can be processed in any way you want. How to Submit Form using jQuery AJAX and PHP? The jQuery library provides ajax() method which allows you to submit form without refreshing page . It will send an HTTP request to the web server (here is the php script), which is then processed by the server and sends an http response. Let's see how to do it. Step 1) Create a Basic HTML Form First let's create a simple html form containin
قراءة المزيد