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

【问题标题】：How do I link to local pdf file in a create-react-app project?如何在 create-react-app 项目中链接到本地 pdf 文件？
【发布时间】：2019-01-26 22:59:06
【问题描述】：

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

1) 我不确定我需要将 PDF 文件保存在哪里（src 文件夹与公用文件夹）

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

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

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

非常感谢任何建议！

【问题讨论】：

标签： html reactjs pdf create-react-app

【解决方案1】：

您需要将文件放在公用文件夹中。如果您希望它在浏览器中打开，这就是它的作用。如果要强制用户下载，可以在锚标签中添加“下载”属性。

【讨论】：

我将 PDF 添加到公用文件夹，但它仍然没有链接。我的 href 中有前导斜杠，因为没有它，每次单击链接时它都会不断添加到 URL。仍然不确定我是否需要做其他事情。
您是否也将download 属性添加到锚标记？
我将下载标签添加到锚标签中。我还必须直接在文件顶部导入 pdf 文件——这样就成功了。
@technazi 是为了什么？
@efischency 我收回了！

【解决方案2】：

将文件放在src/ 中的某个位置，例如src/static/my-file.pdf。
导入组件顶部的文件，如import myFile from "./static/my-file.pdf";（路径相对于src/）。
在a 标签中引用对象：<a href={myFile}>Link to My File</a>

【讨论】：

这比使用/public 文件夹更好，如果没有正确指定文件路径，则不会出现编译时错误
这还能用吗？也许在普通的 JavaScript 中，因为 TypeScript 在import 行抛出错误：Cannot find module '../.../abc.pdf' or its corresponding type declarations. TS2307 ?
丑，但是你可以使用// @ts-ignore绕过TS错误

【解决方案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>

【讨论】：

【解决方案4】：

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

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

pdf 位置：

在公共文件夹中

【讨论】：