javascript - 如何在模式中显示pdf而不是在react js中的新窗口中打开它

Question

我使用react js中的blob文本创建了一个pdf文件，并使用“window.open(fileURL,“_blank”)”我可以在新窗口中查看pdf。

但现在我的要求只是在 ui 中将 pdf 显示为模态，当单击模态时可以在另一个窗口中查看它。任何人都可以帮忙解决这个问题吗？

下面是我的代码片段:

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

您可以在模态中添加 iframe。

 <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>