1

I want to display a pdf in a Bootstrap modal, so in the .modal-body I added :

<object width="1000" height="500" data="path/to/pdf" type="application/pdf">
      <embed src="path/to/pdf" type="application/pdf" />
</object>

My problem is that the first time I open the modal, the pdf appears well but the second time and after it shows a grey screen as followed : enter image description here

When I press F11 or F12, the PDF come back normally, but again if I close and open it shows grey. I precise that the modal is created through Jquery just in case it can cause any trouble.

KenTay7
  • 111
  • 1
  • 10
  • *the modal is created [by] jquery* - is this both times? I looks like you start with some html, then recreate the html the second time. Try just hiding the modal rather than recreating it. – freedomn-m Jun 08 '21 at 08:16
  • 1
    I don't recreate it, I create it only one time when the page load. – KenTay7 Jun 08 '21 at 08:46
  • 1
    Did you see [this](https://stackoverflow.com/questions/67831725/bootstrap-modals-not-showing-pdf-document-after-close-and-re-show) question, looks the same to me. That one suggests a network problem to be the cause. Also what browsers did you try? – ferikeem Jun 09 '21 at 19:39
  • Oh yes I didn't see this post it's the same problem. I tried on chrome and Edge, both have the same issue. – KenTay7 Jun 10 '21 at 07:21

2 Answers2

1

You can use this solution: JavaScript: Changing src-attribute of a embed-tag

The embed tag must be removed an recreated through jquery, otherwise it remains in the cache.

Simone
  • 11
  • 1
0

Possible solution in this case is to re render the element (either embed or IFrame). Don't remove and create it every time instead try to update the src, title or any attributes as you want. This would help to display the PDF without any issues.

Karthik
  • 65
  • 1
  • 10