Javascript 能否在React JS应用程序中的新选项卡中显示PDF文件

我正在试用React JS并制作我的第一个应用程序。我想制作一个按钮，在新选项卡中显示PDF文件，该按钮将显示在新选项卡中，类似于在本地文件中查看PDF文件的方式。我尝试过几种方法，但所有的解决方案都不适合我的应用程序。还有一种方法可以完全在前端完成这项工作，比如将pdf文件放入应用程序文件中，因为一些解决方案告诉我将其放在后端或服务器端。

您可以使用纯HTML和一些纯JS来完成这项工作：

<button onclick = "showpdf('./pdfs/myfile.pdf')"></button>
<script>
function showpdf(directory){
window.open(directory);
}
</script>

函数showpdf（目录）{
打开（目录）；
}

这是如果您想在新选项卡中使用它。

从“react”导入react
import react from  'react'
import file from "../../forms/f14134.pdf";


const myComponent = ()=>{
return
<div>
    <iframe
            style={{ width: "563px", height: "666px" }}
            src={file}
            type='application/pdf'
            title='title'
          />
</div>
export default myComponent

从“../../forms/f14134.pdf”导入文件；
常量myComponent=（）=>{
返回
导出默认myComponent

---

react将使用您的对象启动pdf viewer的本机浏览器版本，如果您没有很多，可以直接导入react

如果您尝试了几种方法，请在此处列举它们，并说明它们如何不起作用。他们中的大多数人都在制作我自己的pdf viewer，但我认为它不适合我的应用程序，另一个was代表香草javascript和html，但我不确定它是否适用于JSX。我主要寻找基于浏览器显示的内容，如我上面所解释的。您可以像导入常规组件一样导入pdf，然后使用

a

标记在新窗口中打开它。这一个确实适用于html和javascript，但它是一个在React中没有什么不同，基本上我将您的答案与我标记为正确的答案结合在一起。您导入PDF文件（

import file from'file.PDF'）并使用

window.open（file）打开`文件是importNo problem dude的名称！非常感谢，我尝试了这个方法，效果很好，我只是不喜欢它占用一定的空间，而不是整个窗口，而是

window.open（file）

did justice我只是演示了样式标记的属性，你可以删除样式，它将是整个屏幕：D