如何使用 javascript/jquery/bootstrap 以模态方式打开 pdf？答案

【问题标题】：How to open pdf in modal using javascript/jquery/bootstrap?如何使用 javascript/jquery/bootstrap 以模态方式打开 pdf？
【发布时间】：2026-01-09 02:00:01
【问题描述】：

如何在不下载的情况下使用 javascript/jquery/bootstrap 以模态方式打开 pdf？我正在尝试使用引导模式，但它不起作用。为什么？我正在使用以下源代码 - http://bootsnipp.com/snippets/P3Vvm

<div class="container">
    <div class="row">
        <h2>Showing PDF in popup modal preview using Bootstrap Easy Modal Plugin</h2>
        <a class="btn btn-primary view-pdf" href="http://wellnesshabitat.nexmapp.com/wp-content/uploads/2017/04/License.pdf">View PDF</a>        
    </div>
</div>

jQuery 代码： /* * 这是插件 */ (function(a){a.createModal=function(b){defaults={title:"",message:"你的消息在这里！",closeButton:true,scrollable:false};var b=a.extend({ },defaults,b);var c=(b.scrollable===true)?'style="max-height: 420px;overflow-y: auto;"':"";html='';html+=' ';html+='';html+='';html+='×';if(b.title.length>0){html+=''+b.title+""}html+="";html+='"; html+=b.message;html+="";html+='';if(b.closeButton===true){html+='关闭'}html+="";html+="";html+="";html+= "";a("body").prepend(html);a("#myModal").modal().on("hidden.bs.modal",function(){a(this).remove()} )}})(jQuery);

/*
* Here is how you use it
*/
$(function(){    
    $('.view-pdf').on('click',function(){
        var pdf_link = $(this).attr('href');
        var iframe = '<div class="iframe-container"><iframe src="'+pdf_link+'"></iframe></div>'
        $.createModal({
        title:'My Title',
        message: iframe,
        closeButton:true,
        scrollable:false
        });
        return false;        
    });    
})
    .iframe-container {    
    padding-bottom: 60%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

【问题讨论】：

请附上您的相关代码，并请附上您的代码中哪一部分不起作用。

标签： javascript jquery pdf model bootstrap-modal

【解决方案1】：

    1) Checkout PDFObject JS,

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

    1)PDFObject embeds PDF files into HTML documents. https://pdfobject.com/

    2) Easy Modal Plugin for Bootstrap. http://bootsnipp.com/snippets/VX7EN
    3) Using jQuery Dialog Modal Popup Window. 

    Hope it helped.



  [1]: http://bootsnipp.com/snippets/VX7EN

【讨论】：

【解决方案2】：

请向我们展示您目前拥有的代码。此外，默认情况下，您不能在模式中显示 pdf bootstrap / jQuery。你有两个选择：

使用库like this one
在模态框内使用 iframe 并加载此 GDocs 链接：

https://docs.google.com/gview?embedded=true&url=" + LinkToThePDFFile

请提供更多信息以获得更好的答案。

【讨论】：