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

Question

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

1）我不确定我需要将PDF文件保存在哪里（src文件夹还是public文件夹）

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

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

但是它没有显示 - 它会更改URL，但不会让您进入PDF文件。

非常感谢任何建议！

- akorn3000

Answer 1

您需要将文件放置在公共文件夹中。如果您想要在浏览器中打开它，那么它就会执行该操作。如果您希望强制用户下载，则可以向锚标记添加“download”属性。

- efischency

---

我已将PDF添加到公共文件夹，但仍无法链接。我的href中有前导斜杠，因为没有它，每次单击链接时都会将其添加到URL中。仍然不确定是否需要做其他事情。 - akorn3000

你是否也给锚点标签添加了 download 属性？ - efischency

我在锚标签中添加了下载标签。我还不得不直接在文件顶部导入pdf - 这就解决了问题。 - akorn3000

Answer 2

1. 将文件放在src/目录下的某个位置，例如src/static/my-file.pdf。
2. 在组件顶部导入文件，例如import myFile from "./static/my-file.pdf";（路径相对于src/）。
3. 在a标签中引用该对象：<a href={myFile}>链接到我的文件</a>

- Ryan

---

这是一个比使用“/public”文件夹更好的方法，如果文件路径没有正确指定，则不会提供编译时错误。 - kenS

这个有用吗？在普通的 JavaScript 中可能可以，但是 TypeScript 在“import”行抛出了一个错误：“找不到模块'../.../abc.pdf'或其对应的类型声明。TS2307”。 - Alex

丑陋的，但您可以使用 // @ts-ignore 绕过 TS 错误。 - Georgio

@Alex 你需要将以下代码添加到 /src/react-app-env.d.ts 文件中才能让它工作：declare module '*.pdf' { const src: string; export default src; } - Herbertusz

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>

- Stephen

Answer 4

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

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

PDF位置：

在公共文件夹中

- atazmin