通过引导程序显示在对话框模式上的 PDF 文件答案

【问题标题】：PDF file to be displayed on the dialog modal via bootstrap通过引导程序显示在对话框模式上的 PDF 文件
【发布时间】：2016-05-19 02:22:33
【问题描述】：

我的要求是，单击按钮时，应在对话框模式上显示 pdf 文件。请帮忙！

<!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>

【问题讨论】：

stackoverflow.com/questions/13305707/… 的可能重复项。只需在 modal-body 中使用 iframe
先生，谢谢您的链接，但我想使用引导模式窗口来完成。
你可以像这样在模态体内使用 iframe <div class="modal-body"> <iframe src="A - Cover Page.pdf"></iframe> </div>
谢谢先生，但不是必需的解决方案。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您还可以将 pdf 嵌入模态框内。像这样：

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

这对我有用

【讨论】：

非常适合我

【解决方案2】：

很抱歉让您失望，但默认情况下不能只在模态框内显示 pdf。这不是预期的行为。即使使用<iframe>，您也无法在引导模式中呈现 pdf。此外，大多数在线提供的 hack 不支持跨浏览器。更理想的方法是使用相同的插件，我会给你一些链接，你可以使用它们来实现你想要的。

1) 结帐PDFObjectJS，

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

PDFObject 将 PDF 文件嵌入到 HTML 文档中。 Link.

2) Bootstrap 的简易模式插件。 Demo Snippet 和 Website

3) 使用 jQuery 对话框模式弹出窗口。 Demo.

希望对您有所帮助。

【讨论】：

感谢您的帮助，先生。我能够在模态框 nw 中获取 pdf。但是有什么方法可以阻止查看者保存或打印 pdf？
这里 - stackoverflow.com/questions/4930914/… 。恐怕这不是一个简单的解决方案
3 号最简单。
谢谢，它对我有用。但是现在我在显示该pdf时遇到错误。错误 - 不允许加载本地资源。请帮忙解决这个问题
该错误似乎表明您加载文件的方式有问题（不显示 PDF 部分）。你究竟是如何加载文件的.ie。你在使用file:// 或<input type="file"> 等吗？

【解决方案3】：

<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 -->

【讨论】：

稍微解释一下会很有帮助。你的代码如何回答这个问题？

【解决方案4】：

你也可以试试这个

<!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>

【讨论】：

但我收到这样的错误：不允许加载本地资源：file:///D:/

【解决方案5】：

可以在modal/popup中添加iframe。

<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>

根据您的要求，您可以设置参数样式。

【讨论】：

【解决方案6】：

在JS中使用Vuejs的全屏Modal显示pdf。

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: ["[[", "]]"],
});

【讨论】：

【解决方案7】：

但我收到这样的错误：不允许加载本地资源：file:///D:/

嗯...您的浏览器不允许直接从您的硬盘加载该文件。在您看来，您可能会得到这样的结果：

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

您需要浏览器的 URL 才能访问此图像。在您看来，您需要以下内容：

Laravel 的asset() 函数从公共文件夹创建一个 URL 并附加你给它的参数。所以这将创建一个类似的 URL：http://localhost/public/uploads/joew.png

编辑：您指定的文件夹(storage_path) 可能根本无法被浏览器读取。将上传内容更改为public_path('uploads')，即可访问。

【讨论】：