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

Question

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

Answer 1

您可以使用纯 HTML 和一点纯 JS 来做到这一点：

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

如果您希望在新标签页中使用它。

Answer 2

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

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

Can you display PDF files in a new tab within a React JS Application

html

javascript

pdf

web-frontend

reactjs