The PDF Developer Junkie Blog

Nice Work

What if I want to embed the pdf so that “pdf is in find mode”.

[Joel's response]
You can add #search=”foo” to the URL and Acrobat/Reader will open in find mode and highlight the word(s) in your search string. Here’s an example…

http://www.adobe.com/devnet/acrobat/pdfs/pdf_open_parameters_v9.pdf#search=“parameters”

I have embedded the pdf and it works perfectly in safari but in firefox it doesn’t work, why is that?

Joel’s reply…

I’m guessing that you’re on OSX. Acrobat/Reader actually doesn’t support viewing PDF in Firefox on OSX, just Safari. You can see the ful system requirements for Reader at the URL below.

http://www.adobe.com/products/reader/systemreqs/

Umm… so how DO I embed a PDF into a page so that it does render in Firefox on a Mac OS X? I put together a site, and that’s the one bug I’ve got. Half the people that looked at it complained that they couldn’t view the pages in question. All it does is show the little Lego icon. Click on the icon to find the appropriate plug-in and it says “Can’t find a suitable plug-in.”

So what should I do?

[Marv: I'm running Firefox 3.5.3 and the OSX Snow Leopard Preview.app is displaying the PDF just fine when either the tag or the tag is being used to. I'm not sure what the problem is on your side.]

Exactly what I was looking for. Thanks!

My doc looks the same, good, in “Firefox ver 3.5.3″, “IE ver 8″, “Safari (windows)ver 4.03″

I know that when HTML tags are enabled that it’s very hard to quote HTML properly – it gets unquoted every time I preview the comment. It’s even harder to quote quoted HTML properly, but just to clarify, all those lone ampersands in the example HTML source snippets should of course be the full HTML entity i.e.
<embed src=”FullScreenEmbed.pdf#toolbar=0&amp;navpanes=0&amp;scrollbar=0″ width=”500″ height=”375″>

[Neil - Good point. Thanks for the comment. That's what I get for just copying and pasting from the IE location bar.]

Man, I wish I could find a complete list of HTTP GET options supported by Reader; I need to set the initial zoom level if that’s possible.

[Joel's Reply]
Here’s a link to the documentation for the PDF file open parameters that can be added to a URL.
http://www.adobe.com/devnet/acrobat/pdfs/pdf_open_parameters_v9.pdf

Here’s a second link that will take you to the specific page, zoom level and location for the zoom parameters.
http://www.adobe.com/devnet/acrobat/pdfs/pdf_open_parameters_v9.pdf#page=6&zoom=150,0,216

In your first example you have a next button, do you know if there is a way to detect if that next button is it with JS or something? I pretty much want something on the page changed once i click the next, aside from the slide changing.

[Joel's reply]
Thanks for the comment. I think the button that you are referring to is part of the Acrobat/Reader button bar. You can suppress the button bar as I show in a later example but then you’d need to add navigation buttons to the document itself.

Do you have any tips for printing an embedded .pdf from a .jsp? I would REALLY appreciated it

[Joel's Reply]
I don’t think you can print an embedded PDF running inside an HTML page. However, you could probably write some JavaScript to locate the link to the src attribute in the embed tag that refers to the PDF and then load that file into a new window and print from there. In that case, you’d be linking directly to the PDF rather than have it be embedded.

Hi,

Is it possible to change the default opening page so the embedded PDF opens from a specific page (instead of page 1)?

Thanks in advance!
Mori

[Joel's reply]

Easy – Just add “#page=n” to the src attribute when n is the page number you want to go to. For example …

src=”FullScreenEmbed.pdf#page=3″

J-

Good! Do you know if is there any mean to emulate the “wmode” Flash parameter? I need to do something similar, but with “wmode=opaque” settings… thx very much!

Helpful article, thank you.

Does anyone know if it’s possible to overlay an html and/or flash over the embedded content?

And is there an API that can shoot event changes form the embedded PDF via Javascript?

Thanks in advance!

For question #1 – You can put the embedded PDF in a DIV and then use the Z-order to put anything you like over the PDF.

For question #2 – Yes – Take a look at this link for a great explanation of how to do it.
http://www.windjack.com/WindJack/Browser2PDF/brwsr2acroJS.htm

Nope – no such thing. The background of the viewer is always opaque. Sorry.

In acrobat the full screen mode is grayed out and it wont let me change to it…is there something else i need to change in order for that to be enabled??

Did you create the PDF in LiveCycle Designer? Those options are not available for XFA forms.

Hello,

I’ve tried your second embed-code, it works fine in FF and Chrome, but not in IE 8! In IE8, I still have the toolbar etc. Can you help me to solve this problem?

Thanks in advance,
vbr,
Karen

I tested this in Windows 7 and IE 8 and it seems to work fine.

You might need to adjust a security setting or something in IE to allow the Reader/Acrobat IE Add-in to function properly.

Great article, thanks!

In in you response to freakqnc, you say setting the z-order is sufficient but that doesn’t seem to do the trick. Here’s what I’m using:

<style>
.overlay
{
z-index: 999;
border: 1px solid green;
background-color: green;
position: absolute;
top: 10;
}
</style>

<div style="border: 1px solid red;;">

Works in FF3.6. No luck with IE8 or Chrome.

It looks like the different browsers are loading the Reader plug-in slightly differently. I doubt you’ll be able to get it to work if that is actually the case. Both IE8 and Chrome should be working exactly the same way as Firefox …. but we all know how untrue that is in reality.

The url options (#toolbar=0) don’t seem to work in FireFox 3.6(.2). Is this a known issue (on Windows)? I tried many variations of the syntax with no luck.

This embed tag displays empty space if I set Adobe Reader not to open PDF files inside browser.

Please Adobe, make workaround for this. I prefer opening the PDF outside browser because it is more convenient, wider view, easier search, etc.

not not possible. Embed do not support layer over layer

Hi Joel,

I am trying to use pdf object in my asp .net application. I have the pdf file in a binary format. Do you think it is possible to achieve it using the technique explain in the article.

Secondly, I need to load upto 10 pdf at a time dynamically and need to add a spinner control (with buttons for next, previous, first, last). Do you think using a pdf object is the best solution for me or do I have any other option?

Thirdly, I have user fillable pdfs. I need to save data from the text boxes in the pdf to a database. Can you let me know a way, how I can communicate to and from a web page and a pdf object. Please let me know if you need any details.

Thanks,
Arun

I’m on Firefox 3.5.8 and it seems to work fine.

You probably don’t want to use the embed tag for this kind of thing. Look at the Interapplication Communication API Reference – specifically the section on the Acrobat Forms Plug-In at the URL below.

http://livedocs.adobe.com/acrobat_sdk/9.1/Acrobat9_1_HTMLHelp/IAC_API_OLE_Objects.103.1.html

Helpful article, thank you.

What if I want to embed the pdf so that “How to pdf start is autoscroll?”.

add #autoscroll=”true”?

Hi,

Having an issue with IE8… strangely always opening the PDF in a Acrobat window even when it’s set to be embedded.

Any ideas? it leaves a really ugly space where the embed is meant to be!

Thanks,
Steve

It’s possible that your copy of Acrobat is set to not open PDF files in the browser. That would cause the behavior you’re seeing. Check the preferences in the “Internet” panel, the top check box.

I have an interactive 3D PDF which my CAD program generates. When you click on the 2D drawing, it becomes a 3D rotatable model. Is it possible to embed the PDF in a window on the web page and keep the interactivity? Can the window be sized to only show the model with no borders?

Thanks!

You can embed any type of PDF file and the Adobe Reader will be able to render it. If you want just the 3D model to show, crop the page down to just the 3D model and use that version on your web site.

I want to jump to a particular location by name in the pdf file but I see that the pdf file just opens the first page every time.
The code I use is http://www.adobe.com/devnet/acrobat/pdfs/pdf_open_parameters_v9.pdf#nameddest=parameters
I see that the first page of the pdf file is opened without directly moving to the page having the word parameters.
Any suggestions?

The named destination needs to exist in the file. Try using the search parameter to go to a specific word.

http://www.adobe.com/devnet/acrobat/pdfs/pdf_open_parameters_v9.pdf#search=%22parameters%22

I am displaying a pdf in page but also have a button that launches a modal popup.

Problem is, the pdf in page still sit on top of the modal – so my question is:

Is there any way to have this sit under other content? (In this case my modal popup).

Thanks,

Hi Joel
The whole html website page IS a 240 page pdf file, actually a book I wrote. Simplist question – how do I edit the index.html file to make it appear on scheen? No interaction or special colors. [I'm a gov't budget guy at the end of fiscal year & no time until next month to figure this out].
Exhausted
Mike Kurasz

Why won’t an..

.. work in Google Chrome?

I am not a fan of Chrome at all! But since quite a growing number of people use the browser, I would like an embedded file to work.

It just shows a grayed out area where the pdf file should be.

It works perfect in FF, IE, Safari, and Opera.

I am having the same issues as Marv where he stated:
Umm… so how DO I embed a PDF into a page so that it does render in Firefox on a Mac OS X? I put together a site, and that’s the one bug I’ve got. Half the people that looked at it complained that they couldn’t view the pages in question. All it does is show the little Lego icon. Click on the icon to find the appropriate plug-in and it says “Can’t find a suitable plug-in.”

Anyone find a solution?

Is there a way to show a loading image while the file is still being loaded? this would be helpful for large files as user will not be aware of page loading

hi,
I want to create ebook for iphone using html5,i have a pdf file of that book,and it contains imaages also,
Now my requirement is how can i get peel back effect to that pdf pages….can u help me…
advance thanks………….

I’ve been using the second code and it works flawless on IE, FF and Opera, but one way or another it doesn’t seem to work with Chrome…

Any Suggestions? Thanks in advance!

Is it possible make user not allow to select the text on pdf.
Any Advise…

Hi,
I am tested the embed tag using outputstream in jsp, however it is not work in IE but fine in Fire Fox. Any idea?

here is my usage

test.jsp:
…
response.setContentType(“application/pdf”);
response.setHeader(“Cache-Control”,”no-cache”); //Add the following for no cache
response.addHeader(“content-disposition”, “inline; filename=MyPDF.PDF”);
ServletOutputStream outputStream = response.getOutputStream();
ObjectOutputStream oos = new ObjectOutputStream(outputStream);
oos.writeObject(pdf); //pdf read from an object from session
…

Thanks in advance
Casey

Give Some standard solutions for all web browsers

We use a hosted application for our website. The vendor is Wild Apricot. Because I am an administrator, I can see and edit the html. I want to put a poster onto a page on our site. It is a PDF, only 1 page long. My html is very weak. I store my documents, including pictures and documents on the Wild Apricot server. And I am able to see the “address” of a document by using their editor, inserting the document, then looking at the html to get its address. But my html is so poor that I cannot get the syntax correct to put in the embed tag (which I don’t know anything about beyond some very confusiing reading I have done today. Can you help me?

i have liitel problem with embed tage

this is tag working fine in all browser but in chrome its create problem
the zoom size going increase automatically and scrollbar is not going or set ’0′ that’s meas set to false
please help me

Wow! Tthese are great tips very useful indeed.

I would like to have an HTML clickable link using the PDF image

The following code does not work:

Any suggestions?

The above is what my embed coding is for my PDF. It works in everything but I.E. any suggestions?

I get a message displayed in embed area, that plug in is missing. It all worked fine before. I have been upgrading the browsers and OS recently. I am using
OSX 10.6.8, Safari 5.1., AdobePDFViewer.plugin 10.1. I have deleted and reinstalled the plugin a couple of times. Same problem in Firefox 6.0, In earlier versions I could at least display the PDFs in the embed area.

Please help!

I am working with adding a pdf contract into a secure page (https://) and in IE 8 and 9 do not get an image, although its ok in http:// .

Firefox shows the file ok either way, just IE will not work.

Thanks!
Chris

I’m displaying a PDF file on a web page using the following HTML code.

This works fine, the PDF is displayed without the toolbar showing when you open the web page.

If I open the PDF as a local file by changing the src parameter to (for example)

src=”file://C:/Users/brian.rich/Desktop/test.pdf#toolbar=0″

then the parameter seems to be ignored and the toolbar is displayed.

Is this a bug, or is the file url unable to accept parameters, or do the parameters need to be defined in a different way?

TIA

Brian

Sorry, the code disappeared in my last comment:

It was

<html>
<body>
<embed
type=”application/pdf”
src=”http://mywebsite.com/test.pdf#toolbar=0″
width=”100%”
height=”100%”>
</embed>
</body>
</html>

Awesome read , I’m going to spend much more time researching this subject

how to show pdf file in every browser whithout havind any pdf viwer in computer. please help me…is it pos….

My doc looks the same, good, but not work on “IE ver 8″,“IE ver 7″ .

<embed width="636" height="200" src="#toolbar=0&navpanes=0&scrollbar=0″ >

Hi,
Is it possible to change pdf’s display ?
Like the options in the adobe reader’s menu “display > page display > 2 pages”
I don’t find….
Thanks!
Eric

Using the HTML embed Tag to Display a PDF on Your Web Page – The PDF Developer Junkie Blog – good text

I have a secure website whereby I am embedding selected documents into the relevant .asp pages. I don’t really want to have the toolbar displayed along the top, and therefore am using the following bit of code. However, for some reason, I only get the smaller mouse over toolbar, intermitantly!!!

Is there a way to disable the main toolbar at the top of the page, and still retain the smaller ghosting mouse over toobar. Everything appears to work fine in Google Chrome, but no other browsers.

Thanks,
Neal,

Unfortunately your browser does not accept this viewer.