<object> tag with pdf doesn't work in firefox and is messed up in IE

后端 未结 6 513
别那么骄傲
别那么骄傲 2021-01-04 09:26

I have object tag that look like this :

\" id=\"embedde
相关标签:
6条回答
  • 2021-01-04 09:33

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

    0 讨论(0)
  • 2021-01-04 09:36

    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.

    0 讨论(0)
  • 2021-01-04 09:38

    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.

    0 讨论(0)
  • 2021-01-04 09:50

    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

    0 讨论(0)
  • 2021-01-04 09:51

    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>
    
    0 讨论(0)
  • 2021-01-04 09:52

    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

    0 讨论(0)
提交回复
热议问题