Bootstrap modal - Add a object tag embedding a PDF

Question

I'm currently trying to display a bootstrap modal in which I want to include a PDF file with the "object" html tag. Problem is that nothing seems to display.

I've created a jsFiddle (http://jsfiddle.net/mV6jJ/3/).

So you will find a basic modal (exactly same code from bootstrap for a basic modal showing after a click on a button) and in the modal-body you will find :

<object type="application/pdf" data="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500">this is not working as expected</object>

So when I add this code alone (so not inside a bootstrap modal) it's working as expected. It display the pdf in the browser's default pdf viewer. But when I try to implement the pdf inside of the bootstrap modal, nothing seems to appear.

If you have any idea it will really helps me, many hours searching and I've only seen solutions with tag (which I don't want to use).

Thank you and best regards

Answer 1

I have found that bootstrap include a css property that affect to pdf viewing in a modal window.

Change this:

.modal.in .modal-dialog {
  transform: translate(0px, 0px);
}

to:

.modal.in .modal-dialog {
  transform: none;
}

If this property is changed everything works properly.

You can see in action:

http://jsfiddle.net/mV6jJ/20/

Answer 2

Prevent download manager: Again, if you have Internet Download Manager or any other download manager that catches pdf automatically try to prevent it from auto catch pdf link.

Also checkout PDFObject JS, it should be interesting

<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>

EDIT

Please try iframe instead object type pdf

<iframe src="http://www.inkwelleditorial.com/pdfSample.pdf" width="500" height="500"></iframe>

http://jsfiddle.net/mV6jJ/9/