如何在创建-反应-应用程序项目中链接到本地 pdf 文件?

Question

我有一个创建-反应-应用程序项目，我想链接到我保存在项目中的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 文件夹中的应用程序组件和来自子导航组件的链接中。我在 src 目录中创建了一个"docs"文件夹，并使用需要语法链接到我的文件，它对我有用。

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

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

在应用程序组件的实例中，我在同一目录中搜索。

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

Answer 4

添加"下载"帮助我使用 Create React 应用程序

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

PDF 位置：

在公用文件夹中