1
$(document).on('click', '#uploadSubmit', function(e){
    var myForm = document.getElementById('fileUploadForm');
    var data = new FormData(myForm);
    $.ajax({
        type:'POST',
        url:'/shipments/upload_docs/',
        processData: false,
        contentType: false,
        cache: false,
        data: data,
        success: function(result){
            $('.docs_action_tray').slideUp();
            var iframe = $('<iframe style="width: 40em; height: 30em;">');
            iframe.attr('src', result.url);
            $('#actionWindow').append(iframe);
        }
  });
});

Desired behavior is for the .pdf behind the returned url to display in the <iframe>. It works fine in Firefox, but Chrome just gives me an OPEN button that loads it in Reader. Is this a security impasse, or is there a solution for me?

EDIT: I have tested <object> and <embed> and the same behavior occurs. I get a link to open the document, instead a preview of the document itself. I wonder if there is a default security feature that is overriding my efforts?

OSX 10.12.6 Chrome 69.0.3491.100 (Official Build) (64-bit)

Adam Starrh
  • 6,428
  • 8
  • 50
  • 89

2 Answers2

1

My browser display perfectly a pdf file with an iframe. However, a solution for you would be by using embed or object tags, like this:

<html>
<body>
    <embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="500" height="375">
</body>
</html>

<html>
    <body>
       <object width="400" height="500" type="application/pdf" data="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf">
            <p>Insert your error message here, if the PDF cannot be displayed.</p>
        </object>
    </body>
</html>

Another approach is to use the PDF.JS library. It's a pure HTML/Js renderer for PDF documents without any third-party plugins.

Online demo: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

Cheers!

Edit: You might try to simulate this by converting the pages of the pdf file to images and display them. It's not like the real experience, but maybe it works. Here are some links that might help you:

  1. Solution 1

  2. Solution 2

  3. Solution 3

Adrian Pop
  • 1,879
  • 5
  • 28
  • 40
  • 1
    So PDF.js is ok in rendering but some problem: 1.it is not included in all the browsers (So `Chromium` or `Safari` or `Android browser`) will not work, you have to distribute the PDF.js source directly from your site (and it is so heavy in dimensions) 2.it is very hard to learn 3.it suffers on poor documentation 4.it suffers on poor performance – MadPapo Sep 17 '18 at 18:58
  • 1
    @MadPapo You are right (the unminified version has 502KB). The simplest approach would be, in my oppinion, by using `embed`. I just tested it with four browsers (Chrome, Mozilla, Chromium, Edge) and it works perfectly in all of them. Pdf.js was an additional idea, I don't how and where does Adam wants to use it. – Adrian Pop Sep 17 '18 at 19:03
  • `` works on all Windows browsers and all browsers EXCEPT Chrome on OSX. `` also produces the same results on Chrome in OSX. I will update the question and see if anyone else has an idea, otherwise I will accept this answer as it did help me. – Adam Starrh Sep 18 '18 at 16:32
  • @AdamStarrh I also edited my answer with a possible solution, since it's not working in OSX. Apparently other users have this problem too and it does have something with old versions of some plugins. – Adrian Pop Sep 18 '18 at 17:28
-1

Linking definitively to this "question" on StackOverflow.

Embedding pdf into html5 pages with a customed interface, still being interractable

There is no cross-platform with no poor performance...So I suggest you to re-implement the rendering like explained in the link

MadPapo
  • 495
  • 4
  • 13