如何在 React 中引用 pdf 文件

Question

我有一个 Reactjs SPA，其文件结构如下所示：

\n\n

\n\n

在该应用程序中有一个简单的组件（Resume.js），我希望用户能够在浏览器中查看/下载pdf文件（resume_english.pdf）。然而，我无法在本地或在我计划托管 SPA 的 GitHub 页面中执行此操作。它总是将我重定向到主页。

\n\n

Resume.js看起来像这样：

\n\n

import React, {Component} from \'react\';\n\nclass Resume extends Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {};\n    }\n\n    render() {\n        return (\n            <div className={\'resume-container\'}>\n                <div id={\'resume-pdf\'}>You can view, download and print my r\xc3\xa9sum\xc3\xa9 in pdf format in <a\n                    href={\'./public/resume_english.pdf\'}>English</a> and <a href={\'#\'}>Spanish</a></div>\n            </div>\n        );\n    }\n}\n\nexport default Resume;\n

\n\n

关于如何解决它可能有什么问题有什么想法吗？我已经尝试过像这样导入，但没有成功。

\n

Answer 1

看起来这是用 create-react-app 制作的。如果是这样，该public目录中的文件将被复制到build，并且该build目录将作为您站点的根目录。所以适当的 href 是/resume_english.pdf.

尝试直接在浏览器中输入网址即可。类似http://localhost:3000/resume_english.pdf或https://danielsto.github.io/resume_english.pdf