发表新帖
发表新帖

PDF file to be displayed on the dialog modal via bootstrap

前端 未结
关注
5 1014
忘掉有多难
忘掉有多难 2020-12-29 14:47

My requirement is, on click of a button, a pdf file should be displayed on dialog modal. Please Help!
相关标签:
5条回答
  • 北海茫月
    2020-12-29 15:28

    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

    0 讨论(0)
  • 囚心锁ツ
    2020-12-29 15:31 
    <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 -->
    0 讨论(0)
  • 梦如初夏
    2020-12-29 15:32

    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.

    0 讨论(0)
  • 闹比i
    2020-12-29 15:42

    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.

    0 讨论(0)
  • 再見小時候
    2020-12-29 15:44

    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>

    0 讨论(0)
 看不清?
提交回复
热议问题