您可以在 React JS 应用程序的新选项卡中显示 PDF 文件吗

Question

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

Answer 1

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

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

Answer 2

你可以用纯 HTML 和一点纯 JS 做到这一点：

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

如果您想在新标签中使用它。