How to add a PDF in html page to view it.

 There are several ways to do it. Here it is demonstatred two ways of doing it. Sometimes in working with live project, it may require to view PDF in HTML page.

The two ways to do it are follows

1) Using object tag :

Sample HTML Code :

   

<div style="width:100%; height:100%; overflow:hidden;">

            <object data="./dummy.pdf" type="application/pdf" width="100%" height="1132px" style="overflow:hidden;">

                <p>This browser does not support PDFs. Please download the PDF to view it:

                    <a href="./dummy.pdf">Download PDF</a>.

                </p>

            </object>

        </div>

Output :

running the index.html page with http-server

2) Using iframe :

Sample HTML Code :

 <iframe src="./dummy.pdf" width="100%" height="1132px" style="border:none;">

            <p>This browser does not support PDFs. Please download the PDF to view it:

                <a href="./dummy.pdf">Download PDF</a>.

            </p>

</iframe>   

Output :

running the index1.html page with http-server

Hope you have understood the code above. See you in an another tricky question.