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

Question

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

1）我不确定要保存PDF文件的确切位置（src文件夹还是公用文件夹）

2）如何正确链接到pdf文件？现在我有这样的东西：

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

并且不显示-它更改了URL，但没有带您进入PDF。

任何建议，不胜感激！

Answer 1

您需要将文件保存在公用文件夹中，并将download属性添加到定位标记。

Answer 2

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>

Answer 3

我在项目的两个不同区域遇到了这个问题，即 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>

Answer 4

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

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

pdf 位置：

在公共文件夹中