PDF not shown if browser downloads content automatically

Question

PDF not shown if browser downloads content automatically

272 Views Asked by gretesh At 18 May 2025 at 02:46

Has anyone an idea how to tackle cases where client's browser has the setting turned on to automatically download files (instead of opening them in browser)?

In my current implementation, in such a case, the file is downloaded but the featherlight/iframe remains empty/white.

I'm triggering the featherlight simply via a button in 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>

Thanks in advance!

Original Q&A

There are 1 best solutions below

**adampweb** · Answer 1

Change button to an anchor a, and add download attribute to it. Look for this demo: 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>

UPDATE: I misunderstood what you want. You can simply embed a PDF file in Bootstrap modal and show modal without Featherlight (there is a conflict between Bootstrap and Featherlight)

IMPORTANT!!! PDF is not displayed in this code preview, please code the code from below to a HTML file and test it.

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

PDF not shown if browser downloads content automatically

There are 1 best solutions below

Related Questions in BOOTSTRAP-4

Related Questions in LIGHTBOX

Related Questions in FEATHERLIGHT.JS

Related Questions in FEATHERLIGHT

Trending Questions

Popular # Hahtags

Popular Questions