how to show the pdf in a modal instead of opening it in a new window in react js

I have created a pdf file using blob text in react js and using “window.open(fileURL, “_blank”)” i am able to see the pdf in a new window.

But now my requirement is just to show the pdf as a modal in ui and when clicked on the modal it can be viewed in another window.Can anybody please help on this.

Below is my code snippet:

var oReq = new XMLHttpRequest();

 var URLToPDF = baseUrl+"/downloadPDF

  oReq.open("GET", URLToPDF, true);

oReq.responseType = "blob";
var that = this;
oReq.onload = function() {

    const pdfFile = new Blob([oReq.response], { type: 'application/pdf' });

    const fileURL = URL.createObjectURL(pdfFile);

     window.open(fileURL, "_blank");

};
   oReq.send();

Answer

You can add iframe with inside your modal.

 <div className="modal">
     <div className="modalContent">
         <iframe src="http://www.africau.edu/images/default/sample.pdf" style="width:600px; height:500px;" frameborder="0"></iframe>
     </div>
 </div>

Advertisement

Answer