Home > General Web Development, My Writings > PDF embedded within HTML page

PDF embedded within HTML page

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.

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’ll see more of this method features and advantages on this article as we go on.

One of the problems with embedding a PDF file is that it can strain users’ computer resources. File size is also another problem that can slow page loading.

HOW TO

First you’ll need to know how to convert a document into PDF file. Adobe has an online tool to convert many types of documents into PDF. You can try it for free.

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

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.

If you are like me and want your code to meet the XHTML standard – It’s not like I’m OCD – then you better use the <object> tag instead. <object> also helps on downloading Acrobat Reader if it is not available on user’s machine.

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.

Here is an example on using object:

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

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. 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.

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

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

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.

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.

The most common 3 parameters are:
toolbar – to show the toolbar in the embedded document. 1 = show, 0 = not show
navpane – to show the navigation bar in the embedded document. 1 = show, 0 = not show
scrollbar – to show the scroll bar in the embedded document. 1 = show, 0 = not show

Here is a list of all parameters

Here how to use those parameters:You can use those parameters in any combinations and they also work in object tag.
file1.pdf#toolbar=0 &scrollbar=0
file1.pdf#toolbar=0
file1.pdf#navpanes=0&scrollbar=0 &toolbar=0

Just don’t forget the & symbol between the parameters and the # symbol at the end of the file name.

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.

Sponsor Text
The BSCI 642-901 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 test format is linear format which is computer-based test. 1Y0-259 study guides offer a variety of support to help improve professional skills and knowledge. SY0-101 involves a methodical working knowledge of TCP/IP networking is entirely critical for achievement on the Security+ test. Candidates for 70-620 should have knowledge of determining issues related to network connectivity.

  1. September 24th, 2007 at 23:12 | #1

    Great article, THANKS! You just saved me a lot of time. Thanks again.

  2. Piper
    September 26th, 2007 at 06:05 | #2

    This was a beautiful article! I LOVE YOU!!!!

  3. October 5th, 2007 at 17:49 | #3

    This method, no any other works for me. Your PDFs on this page simply show as place holders – I am running IE7 – ant ideas?

  4. John
    March 31st, 2008 at 00:08 | #4

    it works with IE7 but not with FireFox 2.0.0.13.
    I get a:
    “file I/O error has occured. The connection has timed out”
    from firefox.
    Any ideas why it does not work?
    Even your page, here , is not showing correctly with FireFox.

  5. March 31st, 2008 at 09:12 | #5

    To Jez:
    Do you have Adobe Reader installed in your machine?

    To John:
    I have no idea at all. I’m using FF2.0.0.13 too and it works fine. It could be a problem with your connection.

    I’m doing some modification, let me know if this works:

  6. Yves
    May 8th, 2008 at 15:38 | #6

    Warning for those who use Microsoft AJAX. This solution failed inside a panel extended by a CollapsiblePanelExtender. Apparently the collapsible panel extender is not compatible with an object tag hosting a pdf.
    Otherwise, this article was very useful, thank you for that.

  7. Raphix
    June 20th, 2008 at 03:42 | #7

    Hi,

    I need block the save or save as botton, I have profesional 7.0 and my documents are sensitive because I need block with password, what is the solution, please help me..

  8. Suman
    February 9th, 2009 at 13:47 | #8

    Informative article… its really good.

  9. February 18th, 2009 at 21:06 | #9

    Is there any way to change the background colour? Or fit the PDF so it takes up exactly the whole frame?

    Cheers,
    Eric

  10. Brian
    April 2nd, 2009 at 00:16 | #10

    Trying to use the parameters to disable the Adobe toolbar, but the Toolbar is showing up on machines with Acrobat installed. Is there another parameter/value I need to supply to disable the toolbar in Acrobat also?

  11. April 13th, 2009 at 23:16 | #11

    How can I print pdf with parameter ?

  12. October 5th, 2009 at 18:37 | #12

    I had the same problem as “Jez,” above — the PDF only showed up as a placeholder. The problem was that I had just updated Adobe Flash Player and the update had unchecked “Display PDF in Browser” in Adobe Reader 9.1. Once I rechecked it the PDFs displayed.

  13. Carlos
    March 25th, 2010 at 18:09 | #13

    How can show embedded pdf and linerized

  14. April 7th, 2010 at 19:58 | #14

    There is Just that your RSS is not responding properly with the google chrome browser :((

  15. May 3rd, 2010 at 06:37 | #15

    Nice information that you share on this article. I like to thank you for posting this great article. Good information.

  16. May 24th, 2010 at 17:47 | #16

    Hi there, I observe that your case is rather observant as it talks about plenty of accurate information. Anyhow, was curious whether you would want to exchange contacts with my web space, as I am looking forward to build links to further spear point and gain better web exposure for my web space. I do not mind you laying my web links at the main page, just accepting this links on this respective page is great and adequate. By the way, please reach me at my website if you are interested in the link exchange, I would really value that. Thank you to you and I hope to get a reply from you as soon as possible!

  17. priya
    June 7th, 2010 at 09:04 | #17

    When i am pressing f8 ..it’s again showing the toolbar…is there any advise…

  18. Anil
    June 14th, 2010 at 13:33 | #18

    Hi,

    I m using the way to render PDF in HTML, but i m doing it in MVC like this

    <object data="/JDLCustomer/GetPDFData?projID=&folder=”
    type=”application/pdf” width=”960″ height=”900″>

    and Controller/Action is

    public void GetPDFData(string projID, Project_Thin.Folders folder)
    {
    Highmark.BLL.Models.Project proj = GetProject(projID);
    List ff = proj.GetFiles(folder, false);
    if (ff != null && ff.Count > 0 && ff.Where(p => p.FileExtension == “pdf”).Count() > 0)
    {
    ff = ff.Where(p => p.FileExtension == “pdf”).ToList();

    Response.ClearHeaders();
    Highmark.BLL.PDF.JDLCustomerPDF pdfObj = new JDLCustomerPDF(ff, proj.SimpleDbID);
    byte[] bArr = pdfObj.GetPDF(Response.OutputStream);
    pdfObj = null;

    Response.ContentType = “application/” + System.IO.Path.GetExtension(“TakeOffPlans”).Replace(“.”, “”);
    Response.AddHeader(“Content-disposition”, “attachment; filename=\”TakeOffPlans\””);
    Response.BinaryWrite(bArr);
    Response.Flush();
    }
    }

    the problem is, as i m downloading data first from server and then return the byte data, it is taking some time in downloading, so i want to show some kind of progress to show processing.

    Please help me on this

  19. June 20th, 2010 at 09:42 | #19

    I would like to say, nice webpage. Im not sure if it has been addressed, however when using Firefox I can never get the entire page to load without refreshing alot of times. Could just be my modem.

  20. July 20th, 2010 at 13:43 | #20

    Hi, i need to read a pdf from file but the file name may change in the future. is it possible to write HTML to read a file without specifying the fiel name?

    Thanks

  21. August 25th, 2010 at 17:35 | #21

    This does not work on a mac platform.

  22. Shah
    November 10th, 2010 at 22:01 | #22

    Try referencing the whole URL to the file instead of just the file name.

  23. November 27th, 2010 at 20:10 | #23

    It’s peculiar, that often the simplest recommendations are often the very best! I will adopt the above mentioned tips into practice and see the effects. Thanks for this article!

  24. September 3rd, 2011 at 17:49 | #24

    I’m really inspired together with your writing abilities and also with the format for your blog. Is that this a paid subject or did you modify it your self? Either way stay up the nice high quality writing, it is rare to see a great weblog like this one these days.

  25. September 6th, 2011 at 19:17 | #25

    I too am trying to get rid of the tool bar on a clients website.

    Thanks for the page.

  26. December 8th, 2011 at 15:47 | #26

    Thank you very much for this great article. The best wishes for you

  1. December 31st, 2008 at 02:16 | #1

Get Adobe Flash player