PDF file to be displayed on the dialog modal via bootstrap

Question

My requirement is, on click of a button, a pdf file should be displayed on dialog modal. Please Help!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>View PDF</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
          <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>        
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
      </div>
    </div>
  </div>
 </div>
</body>
</html>

Possible duplicate of http://stackoverflow.com/questions/13305707/how-to-display-a-pdf-in-a-modal-window. Just use an iframe inside modal-body — Narendra CM, Feb 09 '16 at 07:38
Sir thank you for the link but i want to do it using the bootstrap modal window. — Fresher, Feb 09 '16 at 08:45

score 25 · Answer 1 · edited Feb 07 '18 at 18:54

25

You can also embed the pdf inside the modal. Like this:

<embed src="sample.pdf" frameborder="0" width="100%" height="400px">

That worked for me

edited Feb 07 '18 at 18:54

Paul Roub

36,322
27
84
93

answered Feb 07 '18 at 18:47

gabriel beltrami

251
3
4

Worked perfectly for me – Lefty Jan 04 '22 at 12:41

score 18 · Accepted Answer · answered Feb 09 '16 at 11:33

18

Sorry to disappoint you but one cannot just show the pdf inside a modal by default. It is not an intended behavior. Even using <iframe>, you cannot render the pdf inside the bootstrap modal. Also most of the hacks provided online does not support cross-browser. The more ideal way is to use plugins for the same and I will give you the links for few using which you can achieve what you want.

1) Checkout PDFObject JS,

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

PDFObject embeds PDF files into HTML documents. Link.

2) Easy Modal Plugin for Bootstrap. Demo Snippet and Website

3) Using jQuery Dialog Modal Popup Window. Demo.

Hope it helped.

answered Feb 09 '16 at 11:33

Nikhil Nanjappa

6,454
3
28
44

Thank You for the Help Sir. I am able to get the pdf in the modal box nw. But is there any way to stop viewers from saving or print the pdf? – Fresher Feb 10 '16 at 07:07
Here - http://stackoverflow.com/questions/4930914/prevent-pdf-file-from-downloading-and-printing . I'm afraid its not an easy solution though – Nikhil Nanjappa Dec 06 '16 at 17:32
Number 3 is easiest. – sianipard Jul 30 '17 at 01:22
Thanks, it worked for me. But now I am getting error displaying that pdf. ERROR - Not allowed to load local resource. Please help with this – Abhijit Oct 11 '19 at 06:33
That error seems to suggest there is something wrong with the way you are loading files (not displaying PDF part). How exactly are you loading the files .ie. are you using `file://` or `` etc ? – Nikhil Nanjappa Oct 11 '19 at 09:31
From https://pdfobject.com/ PDFObject is not a rendering engine. PDFObject just writes an element to the page, and relies on the browser or browser plugins to render the PDF. If the browser does not support embedded PDFs, PDFObject is not capable of forcing the browser to render the PDF. @gabriel beltrami's answer achieves this. – Andy Gee Nov 21 '22 at 00:22

score 13 · Answer 3 · answered Aug 02 '16 at 16:04

<div class="modal fade" id="modal-agreement">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

A little explanation would be helpful. How does your code answer the question? — showdev, Aug 02 '16 at 16:31

score 2 · Answer 4 · answered Jul 17 '19 at 19:37

You can as well try this

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DisplayPDF</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">

                        <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px">

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</body>
</html>

But I am getting error like this : Not allowed to load local resource: file:///D:/ — Abhijit, Oct 11 '19 at 06:30

score 1 · Answer 5 · answered Sep 18 '20 at 16:10

Can add iframe in modal/popup.

<iframe src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="600" height="780" style="position: absolute;top: 66px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 3;height: 100%;"></iframe>

based on your requirement you can style the parameter.

score 0 · Answer 6 · answered Jul 22 '21 at 22:45

Full screen Modal displaying pdf using Vuejs in JS.

html

 <div class="modal " tabindex="-1" id="idXyz">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">[[formName]]</h5>
                <button type="button" class="btn btn-danger"
                        data-bs-dismiss="modal" aria-label="Close">close
                </button>
            </div>
            <div class="modal-body">
                <embed v-bind:src="getUrl" frameborder="0" width="100%" height="100%">
            </div>
        </div>
    </div>
</div>

Javascript

var pdfVueModal = new Vue({
    el: '#idXyz',
    data: {
        getUrl: null,
        formName: null
    },
    methods: {
        showPdf: function (getUrl, formName) {
            this.getUrl = getUrl;
            this.formName = formName;
            $('#idXyz').modal('show');
        }
    },
    delimiters: ["[[", "]]"],
});

score 0 · Answer 7 · edited Sep 09 '21 at 20:07

But I am getting error like this : Not allowed to load local resource: file:///D:/

Well... Your browser is not allowed to directly load that file from your harddrive. In your view you are probably getting something like this:

<img src="C:\xampp\htdocs\socialNet\public\uploads\joew.png" />

You need a URL for the browser to access this image. In your view you need something like:

The asset() function from Laravel creates a URL from the public folder and appends the param you give it. So this will create a URL like: http://localhost/public/uploads/joew.png

Edit: The folder you specified (storage_path) is probably not readable for the browser at all. Change the uploads to public_path('uploads') and it will be accessible.

PDF file to be displayed on the dialog modal via bootstrap

7 Answers7

Linked