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

admin管理员组

文章数量:1277400

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();

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();

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Apr 2, 2019 at 9:30 kinnukinnu 38822 gold badges1212 silver badges2525 bronze badges 2

• 3 You can use iframe for the model. – Ravi Kumar Gopalakrishnan Commented Apr 2, 2019 at 9:36
• can you please show some examples for that? – kinnu Commented Apr 2, 2019 at 9:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

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>

I have used @mantine ponents 
  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>
                       
</>)
}

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();

本文标签： javascripthow to show the pdf in a modal instead of opening it in a new window in react jsStack Overflow