Skip to content

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 “, “_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"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);, "_blank");



You can add iframe with inside your modal.

 <div className="modal">
     <div className="modalContent">
         <iframe src="" style="width:600px; height:500px;" frameborder="0"></iframe>