{"id":244,"date":"2007-09-22T17:55:13","date_gmt":"2007-09-22T14:55:13","guid":{"rendered":"http:\/\/blog.flashcolony.com\/?p=244"},"modified":"2007-09-22T17:55:13","modified_gmt":"2007-09-22T14:55:13","slug":"view-pdf-within-html-page","status":"publish","type":"post","link":"https:\/\/salehalsaffar.com\/blog\/view-pdf-within-html-page\/","title":{"rendered":"PDF embedded within HTML page"},"content":{"rendered":"

Many web developers are missing the fact that PDF files can be embedded within an HTML web page. Just like how QuickTime movies, Flash, MPEGs, and WAV files can be embedded into an HTML document, PDF documents can be used in the same way. That gives both, the developer and the user, many advantages and flexibility.<\/p>\n

Nowadays, a common use of PDF through the internet is clicking on a hyperlink which directly links to a PDF file. The user can then download the PDF file or open it through the internet explorer. Embedding PDF through the web page can be flexible in some situations. For example, generating a PDF file to show dynamic data that change in time, like comments and news. In addition, embedding PDF functions like a normal PDF file opened in Adobe Reader with its numerous interface options available to be used in the web page. You\u00e2\u20ac\u2122ll see more of this method features and advantages on this article as we go on.<\/p>\n

One of the problems with embedding a PDF file is that it can strain users\u00e2\u20ac\u2122 computer resources. File size is also another problem that can slow page loading.<\/p>\n

HOW TO<\/strong><\/p>\n

First you\u00e2\u20ac\u2122ll need to know how to convert a document into PDF file. Adobe has an online tool to convert many types of documents<\/a> into PDF. You can try it for free<\/a>.<\/p>\n

Here is first example,<\/embed><embed src="file1.pdf" width="500" height="650"><\/embed><\/p>\n

We used the <embed> HTML tag to embed a PDF file into a web page. The property src is used to set the location and the name of the PDF file. Relative or absolute URL can be used here just like images. The width and height property sets the display width and the height of the document. You can also use pixel or percentage (e.g. 90%) here just like image sizing or tables.<\/p>\n

If you are like me and want your code to meet the XHTML standard – It\u00e2\u20ac\u2122s not like I\u00e2\u20ac\u2122m OCD<\/a> – then you better use the <object><\/a> tag instead. <object><\/a> also helps on downloading Acrobat Reader if it is not available on user\u00e2\u20ac\u2122s machine.<\/p>\n

Just a note, <embed> is not an XHML standard, although it is supported by many browsers. It was created by Netscape as a method to embed players in browsers and then many browsers adopted it.<\/p>\n

Here is an example on using object:<\/p>\n

<\/object><\/p>\n

<object type="application\/pdf" data="file1.pdf" width="500" height="650" ><\/object><\/p>\n

The type property – indicates the MIME type – helps identifying which program is suitable for this file. A list of some MIME types used on this property available here<\/a>. The data property is the location of the file. The width and height properties are to set the width and height of the document respectively.<\/p>\n

Between the opening and closing tags you can add anything as an alternative if the browser do not support <object><\/a> or cannot find its program. For example, you can add the link to the PDF file if it cannot be viewed in the page:<\/p>\n

<object type="application\/pdf" data="file1.pdf" width="500" height="650" >Click <a href="file1.pdf">here<\/a> to view the file<\/object><\/p>\n

You can use anything between the two tags to show. We used a link on the previouse example to open the file normally if it cannot be embedded. You can use a nested object (object inside object) or anything.<\/p>\n

Thanks to adobe, they gave us the flexibility on choosing the what to display on the PDF document just by coding. By passing parameters when loading the PDF we can do that changes we want.<\/p>\n

The most common 3 parameters are:
\ntoolbar \u00e2\u20ac\u201c to show the toolbar in the embedded document. 1 = show, 0 = not show
\nnavpane \u00e2\u20ac\u201c to show the navigation bar in the embedded document. 1 = show, 0 = not show
\nscrollbar \u00e2\u20ac\u201c to show the scroll bar in the embedded document. 1 = show, 0 = not show<\/p>\n

Here is a list of all parameters<\/a><\/p>\n

Here how to use those parameters:<\/embed>You can use those parameters in any combinations and they also work in object tag.
\nfile1.pdf#toolbar=0 &scrollbar=0
\nfile1.pdf#toolbar=0
\nfile1.pdf#navpanes=0&scrollbar=0 &toolbar=0<\/p>\n

Just don\u00e2\u20ac\u2122t forget the & symbol between the parameters and the # symbol at the end of the file name.<\/p>\n

Note that in full screen mode, the PDF will display in full screen inside the defined region only, not full screen within the web browser or within the whole monitor screen.<\/p>\n

\"Sponsor
\nThe BSCI 642-901<\/a> test will verify that the winning candidate has significant knowledge and skills needed to use advanced IP addressing in addition to routing in applying scalability for Cisco ISR routers linked to LANs and WANs. 220-601<\/a> test format is linear format which is computer-based test. 1Y0-259<\/a> study guides offer a variety of support to help improve professional skills and knowledge. SY0-101<\/a> involves a methodical working knowledge of TCP\/IP networking is entirely critical for achievement on the Security+ test. Candidates for 70-620<\/a> should have knowledge of determining issues related to network connectivity.<\/p>\n","protected":false},"excerpt":{"rendered":"

Many web developers are missing the fact that PDF files can be embedded within an HTML web page. Just like how QuickTime movies, Flash, MPEGs, and WAV files can be embedded into an HTML document, PDF documents can be used in the same way. That gives both, the developer and the user, many advantages and […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[31,5],"tags":[],"_links":{"self":[{"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/posts\/244"}],"collection":[{"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/comments?post=244"}],"version-history":[{"count":1,"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/posts\/244\/revisions"}],"predecessor-version":[{"id":925,"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/posts\/244\/revisions\/925"}],"wp:attachment":[{"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/media?parent=244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/categories?post=244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/salehalsaffar.com\/blog\/wp-json\/wp\/v2\/tags?post=244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}