Question

I have object tag that look like this :

<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/${id }"/>" id="embeddedPdf"  width="820" height="1135" type="application/pdf"></object></div>

In chrome this tag works the way I want it to. In firefox it doesn't work at all and it's messed up in IE. Here's album with screenshots in each browser. What are my options here ?

Also on firefox I figured out that this pdf doesn't work with default firefoxe's pdf viewer. When I choose to use adobe acrobat extenstion for pdf documents it works perfectly.

Could you try to load your pdf with a hardcoded path to one of your PDF? I mean, without the `` tag (what's this tag by the way, your own namespace?) — Maen, Apr 08 '14 at 12:23
@Bigood yes, I've tried hardcoding pdf's location, still the same problem. — Marijus, Apr 08 '14 at 18:53
@Marijus Please provide your browsers' versions – and remove any style associated with the object tag, and try again (I've tried under FF and Chrome with hardcoded pdf and no style, it worked well) — Maen, Apr 08 '14 at 22:32
@Marijus Are you sure this is not what you meant: `""`? Look at the use of single and double quotes. — stackErr, Apr 14 '14 at 12:16
How was your PDF created? We have had all sorts of problems where certain browsers messed up the PDFs when they were embedded which turned out to be a bug in how the PDF was generated (Oracle Reports in our case). Maybe your best bet is to have an "Or click here to download PDF" link as backup? — Adam, Apr 15 '14 at 11:44

Inspyro · Answer 1 · 2014-04-13T12:12:41.020

You can just write the link to the pdf directly into the data attribute like this:

<div id="embeddedPdfContainer"><object data="/download-pdf/some.pdf" id="embeddedPdf"  width="820"  height="1135" type="application/pdf"></object></div>

I tested it with Chrome and Internet Explorer (different versions) and it works

If you want to stay with the c:url option you should change the second " to '

so changing this:

"<c:url value="/download-pdf/${id }"/>"

into this:

 "<c:url value='/download-pdf/${id }'/>"

in order to not "escape" the string

score 3 · Answer 2 · answered Apr 14 '14 at 12:07

3

When you deliver dubious HTML:

<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/${id }"/>" id="embeddedPdf"  width="820" height="1135" type="application/pdf"></object></div>
                                            ^      ^
                                            |      |
                                          Start   End?

... browsers try to figure out what you had in mind, with a varying degree of success that depends on the algorithms they implement and how imaginative the webmaster is. Different browsers can't always agree on how to handle valid code (where there're clear rules and specs) so it's to expect that the level of disagreement increases with invalid code.

IMHO, the simplest path to obtain cross-browser compatibility is to generate valid code. As help, you can use the on-line W3C HTML validator or whatever equivalent tool your IDE provides.

answered Apr 14 '14 at 12:07

Álvaro González

142,137
41
261
360

3

That is a taglib, and this is not the rendered HTML... shame on OP that posted an "intermediate picture" instead of the final result, but in the end it will be resolved in valid HTML. – Andrea Ligios Apr 14 '14 at 16:21
When faced with invalid underlying HTML, I guess most template engines will either throw a fatal error or do simple search and replace. While it's weird to offer a bounty to spot mismatched quotes in a one-liner, the apparent little credit given to code syntax by the OP leads me to believe anything. – Álvaro González Apr 16 '14 at 14:20
Lol, nice ! I would like this kind of community bounties too :) – Andrea Ligios Apr 16 '14 at 14:49
Actually, I have no idea why I got awarded 100 points. I'm not familiar with the rules. – Álvaro González Apr 16 '14 at 14:51
Because OP didn't awarded anyone at the end of the bounty period, and this is an answer started after the bounty, not written by the bounty awarder, with at least 2 upvotes, and between the other with the same score, this is the oldest: [What is automatic awarding?](http://meta.stackexchange.com/a/16067/214186) – Andrea Ligios Apr 16 '14 at 15:01

Antonio Giovanni Schiavone · Answer 3 · 2014-04-14T15:56:23.017

Your jsp code seems to be syntactically correct, but we can't know if the generated code is meaningful. Instead of writing the jsp code, you should write the generated html code, and its related css code.

Anyway, regarding the Firefox's issue, I think it is due to this Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=937663

Lastest version avaible (Firefox 28) seems to be still affected, maybe next one will fix it.

Regarding Explorer issue, it could be due to a difference in page's rendering. Writing an IE-specific ccs code will fix the issue.

score 2 · Answer 4 · edited May 23 '17 at 12:08

I wonder that this works in any browser!

c:url is part of the JSP Standard Tag Library (JSTL). And to use JSTL core tags you should include in the JSP page at least:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

Next thing is that the PDF format is also no HTML (format)!
The handling of PDF files depends heavily on the users system settings and configuration.

Any browser would need an (integrated) plugin to display PDF files! See e.g. this question here at SO: Embed Pdf in html5

As you can see therefore normally an embed element is used with a type attribute of type="application/pdf".

But this is also far from ideal and won't work in every browser!

What are my options here?

As written in the accepted answer of the above linked question, you should "convert the PDF to HTML5 and embed the HTML5 version."

G-Cyrillus · Answer 5 · 2014-04-15T11:31:09.503

1

Does the use of an external viewer, morelike https://docs.google.com/viewer , within an <iframe> or an <object> would help ? This a compromise as far as you cannot change configuration of visitor browser to add/load an extra plugin.

For the styling part, you can set display:block to <iframe> or <object> , set size and margin.

<edit> this is not the problem </> are you sure of the use of your quotes and this part ? "<c:url value="/download-pdf/${id }"/>"

You are wrapping value and data together

edited Apr 15 '14 at 11:31

answered Apr 08 '14 at 12:36

G-Cyrillus

101,410
14
105
129

GCyrillus, I've tried removing quotes, still the same thing. – Marijus Apr 09 '14 at 10:32
okay, can you show the HTML generated (look at source from browser menu ) – G-Cyrillus Apr 09 '14 at 10:42
okay, object seems to be well formed , does your donwload link work ? Put it out of object if you do not see it , for test that pdf stands where it is suppose to be and that it return the correct mime type – G-Cyrillus Apr 09 '14 at 10:52
GCyrillus, yeah download link works fine and it downloads me the pdf. – Marijus Apr 09 '14 at 11:12
does it propose to download as a file or does it propose to open it with a pdf reader (do you know wich mime type are send by http headers ?) – G-Cyrillus Apr 09 '14 at 11:16
when you copy/paste url in browser does it dl or open the file ? – G-Cyrillus Apr 09 '14 at 11:17
it downloads pdf. I've updated my question a little, check it out. Here are the headers I set myself : http://pastebin.com/yNJXm6DL . Also I've tried both inline ( which opens in new window ) and outline (which downloads), still the same problem. – Marijus Apr 09 '14 at 11:19
if it does dl, you are missing the right pluggin and maybe should use an external service or loader – G-Cyrillus Apr 09 '14 at 11:19
maybe you could then use https://docs.google.com/viewer within your object or an iframe – G-Cyrillus Apr 09 '14 at 11:24
GCyrillus I don't want to use googles pdf viewer. I can't understand how standart html's object tag doesnt work.. here are the response and request headers, if they help http://pastebin.com/ra3ytn1h – Marijus Apr 09 '14 at 11:43
okay , if FF misses the right plugin on visitor side, there is nothing you can do about it. GZIP could be a trouble , not sure. – G-Cyrillus Apr 09 '14 at 11:52

score 1 · Answer 6 · edited May 23 '17 at 12:22

First of all the c:url tag has nothing to do with the browser-side behavior. The tag should be rewritten by server and the browser should receive an absolute path. (Maybe you can post source from your browser?)

So the problem is only the browser compatibility of PDF embed in <object>. Most modern browsers should work with this tag including Firefox, so you should check whether you have pdf plugin properly installed on your Firefox.

For the IE problem you didn't mention which version you are using, so it may be solved by using <embed> other than <object> to solve this problem. According to this answer, you may try this style for better compatibility:

<object data="abc.pdf" type="application/pdf">
    <embed src="abc.pdf" type="application/pdf" />
</object>

6 Answers6

Linked