如何在 create-react-app 项目中链接到本地​​ pdf 文件?

IT技术 html reactjs pdf create-react-app
2021-05-02 13:14:42

我有一个 create-react-app 项目,我想在其中链接到我保存在项目中的 pdf 文件。我想我的问题是双重的:

1) 我不确定我到底需要在哪里保存 PDF 文件(src 文件夹与公共文件夹)

2)如何正确链接到pdf文件?现在我有这样的事情:

<a href="/portfolio-revamp/public/documents/resume.pdf">Resume</a>

它没有显示 - 它会更改 URL 但不会将您带到 PDF。

非常感谢任何建议!

4个回答

您需要将文件放在公用文件夹中。如果你想让它在浏览器中打开,那就是它会做的。如果要强制用户下载,可以在锚标签中添加“下载”属性。

  1. src/例如,将文件放在src/static/my-file.pdf.
  2. 在组件顶部导入文件,例如import myFile from "./static/my-file.pdf";(路径相对于src/)。
  3. 引用a标签中的对象<a href={myFile}>Link to My File</a>

我在项目的两个不同区域遇到了这个问题,在 src 文件夹中的 App 组件和来自子导航组件的链接中。我在 src 目录中创建了一个“docs”文件夹,并使用 require 语法链接到我的文件,它对我有用。

在导航组件的实例中,我通过将目录向上更改两级来访问该文件。

<Link href={require("../../docs/FILE_NAME.PDF")} target="blank">
  Resume    
<Link>

在 App 组件的实例中,我在同一个目录中搜索。

<Link href={require("./docs/FILE_NAME.PDF")} target="blank">
  Resume
</Link>

添加“下载”帮助我使用 Create React App

<a
  href="/pdfname.pdf"
  download
>
  Download Resume
</a>

pdf位置:

在公用文件夹中