如果浏览器自动下载内容，PDF 不显示答案

【问题标题】：PDF not shown if browser downloads content automatically如果浏览器自动下载内容，PDF 不显示
【发布时间】：2021-01-27 14:10:40
【问题描述】：

有没有人知道如何处理客户端浏览器设置为automatically download files（而不是在浏览器中打开）的情况？

在我当前的实现中，在这种情况下，文件已下载，但羽毛灯/iframe 保持为空/白色。

我只是通过 html 中的一个按钮来触发羽毛灯：

    <button type="button" class="btn btn-modal" href="file.pdf" data-featherlight="iframe">
       <img class="modal-button-icon" src="icon.svg" alt="Grundriss" style=>
    </button>

提前致谢！

【问题讨论】：

标签： bootstrap-4 lightbox featherlight.js featherlight

【解决方案1】：

将button 更改为锚点a，并为其添加download 属性。寻找这个演示：https://davidwalsh.name/download-attribute

<a class="btn btn-modal" href="file.pdf" download="file.pdf" data-featherlight="iframe">
       <img class="modal-button-icon" src="icon.svg" alt="Grundriss">
</a>

更新：我误解了你想要什么。您可以简单地在 Bootstrap modal 中嵌入 PDF 文件并在没有 Featherlight 的情况下显示 modal（Bootstrap 和 Featherlight 之间存在冲突）

重要！！！ 此代码预览中不显示 PDF，请将下面的代码编码为 HTML 文件并进行测试。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            
            <object data="https://www.soundczech.cz/temp/lorem-ipsum.pdf" type="application/pdf" style="width: 100%; height: 600px;">
                <embed src="https://www.soundczech.cz/temp/lorem-ipsum.pdf" type="application/pdf">
                    <p>This browser does not support PDFs. Please download the PDF to view it: <a href="https://www.soundczech.cz/temp/lorem-ipsum.pdf">Download PDF</a>.</p>
                </embed>
            </object>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>

【讨论】：

谢谢，但不幸的是这对我没有用。文件仍会被下载，灯箱仍为白色/空白。