如何在模态中显示 pdf 而不是在 React js 中以新的 window 打开它

Question

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 1

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>

Answer 2

I have used @mantine components 
  import {modal,Anchor} from '@mantine/core'
   
 const showFilesInModal=()=>{
    const [isModalOpened, setIsModalOpened] = useState<boolean>(false);

return (<>
 <Anchor
                            className="underline"
                            onClick={() => setIsModalOpened(true)}
                          >
                            <Modal
                              opened={isModalOpened}
                              onClose={() => setIsModalOpened(false)}
                              title="Files"
                              size="lg"
                            >
                              {/* Modal content */}
                              <div className="h-max w-max">
                                <img src="your file source"
                                />

                              </div>
                            </Modal>
                               link
                          </Anchor>
                       
</>)
}

Answer 3

To open your pdf in new window rather than new tab you can use this lines of native JS code

const fileURL = URL.createObjectURL(blob);
let newWin = window.open(fileURL, "pdf show", "width=800,height=600");
newWin.focus();