通过 bootstrap 在对话框模式上显示 PDF 文件引导示例<...</desc> <question vote="13"> <p>我的要求是，单击按钮后，应在对话框模式中显示 pdf 文件。请帮忙！</p> <pre><code><!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>  <button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button>  <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> </div> </div> </div> </div> </body> </html> </code></pre> </question> <answer tick="false" vote="27"> <p>您还可以将 pdf 嵌入模式中。像这样：</p> <pre><code><embed src="sample.pdf" frameborder="0" width="100%" height="400px"> </code></pre> <p>这对我有用</p> </answer> <answer tick="true" vote="18"> <p>很抱歉让您失望，但默认情况下不能仅在模式中显示 pdf。这不是有意的行为。即使使用 <pre><code><iframe></code></pre>，您也无法在引导模式内渲染 pdf。此外，大多数在线提供的 hack 都不支持跨浏览器。更理想的方法是使用插件，我会给你一些链接，你可以使用它们来实现你想要的。</p> <p>1）结账<pre><code>PDFObject</code></pre>JS，</p> <pre><code><script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script> </code></pre> <p>PDFObject 将 PDF 文件嵌入到 HTML 文档中。 <a href="http://pdfobject.com/" rel="noreferrer">链接</a>.</p> <p>2) Bootstrap 的简单模态插件。 <a href="http://bootsnipp.com/snippets/VX7EN" rel="noreferrer">演示片段</a>和<a href="http://saribe.github.io/eModal/#demo" rel="noreferrer">网站</a></p> <p>3) 使用 jQuery 对话框模态弹出窗口。 <a href="http://www.aspsnippets.com/demos/1261/" rel="noreferrer">演示</a>。</p> <p>希望有帮助。</p> </answer> <answer tick="false" vote="13"> <pre><code><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">×</span> </button> <object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object> </div> </div> </div> </div> </code></pre> </answer> <answer tick="false" vote="2"> <p>你也可以试试这个</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!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">  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</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></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>可以在modal/popup中添加iframe。</p> <pre><code><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> </code></pre> <p>根据您的要求，您可以设置参数的样式。</p> </answer> <answer tick="false" vote="1"> <p>在 JS 中使用 Vuejs 全屏模态显示 pdf。</p> <p><strong>html</strong></p> <pre><code> <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> </code></pre> <p><strong>Javascript</strong></p> <pre><code>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: ["[[", "]]"], }); </code></pre> </answer> <answer tick="false" vote="0"> <p>但是我收到这样的错误：不允许加载本地资源：file:///D:/</p> <p>好吧...您的浏览器不允许直接从硬盘加载该文件。在你看来，你可能会得到这样的东西：</p> <pre><code><img src="C:\xampp\htdocs\socialNet\public\uploads\joew.png" /> </code></pre> <p>您需要浏览器的 URL 才能访问此图像。在您看来，您需要类似的东西：</p> <p>Laravel 中的 asset() 函数从公共文件夹创建一个 URL 并附加您提供的参数。因此，这将创建一个类似以下的 URL：<pre><code>http://localhost/public/uploads/joew.png</code></pre></p> <p>编辑：您指定的文件夹<pre><code>(storage_path)</code></pre>可能根本无法被浏览器读取。将上传更改为<pre><code>public_path('uploads')</code></pre>，即可访问。</p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!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">  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg">  <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</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></code></pre> </div> </div> <p></p> </answer> </body></html> - javascript - SO中文参考