Question

我有一组pdf文件，位于我项目的文件夹中。

我需要做的就是创建这些PDF文件的链接，并在浏览器中查看或下载。

我使用React Router 4和React 16以及create-react-app bootstrapping工具。

无论我如何链接它（链接组件或标签），它仍然会进入我的路由器配置中的最后一个路由。

我最近两个小时一直在Google上搜索...但没有运气..

有没有办法告诉路由器不要路由PDF / XLS文件？

由于

Answer 1

我试过squizz的方式，但我发现的问题是，如果你点击链接超过一次或两次，它将恢复回到最后一条路线。

您可以在src中创建一个文件夹来保存您的PDF文件，并正常链接到它们，例如：

import pdf from '../files/myfile.pdf'
render () {
    <a href={pdf}>Click here for my pdf</a>
}

唯一的问题是，你会得到一个附加到你的文件的哈希，所以它将作为myfile.d2e24234.pdf或其他东西。我认为它与文件加载器有关...目前正试图解决它。

修改

如果您不想使用src，答案是从create-react-app项目中删除服务工作者。由于某种原因，它会影响react-router对服务器路由的处理。

我在这里写了一个github问题来阅读它：https://github.com/facebookincubator/create-react-app/issues/3608

Answer 2

我遇到了同样的问题，我认为这是因为CRA处理查询的方式：我最终将我的PDF文件放在公共文件夹中，并使用以下链接链接到它们：

{process.env.PUBLIC_URL + '/myfile.pdf'}

作为src到我的标签。

我认为不是最好的方法，但效果还不错......

Answer 3

进入同样的问题并通过诉诸老式的HTML修复它：

<a href="docs/document.pdf">
  Document
</a>

使用webpack.config中的CopyWebpackPlugin将pdf复制到我公开提供的文件夹：

plugins: [
    new CopyWebpackPlugin([
      {
        from: 'docs/document.pdf',
        to: path.resolve(BUILD_PATH + "/docs/document.pdf")
      },
    ])
]

Answer 4

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

这对我有用：

<Link
    to="route"
    onClick={(event) => { event.preventDefault(); window.open(filePath); }}>
        Click to download
</Link>

在React中查看/下载Pdf文件 - 路由器4

5 个答案: