View/Download React 中的 Pdf 文件 - 路由器 4

Question

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

我需要做的就是为这些 PDF 文件创建一个 link 并在浏览器中查看或下载它们。

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

无论我如何 link 它（Link 组件或标签）它仍然会转到我路由器配置中的最后一条路线。

过去两个小时我一直在谷歌搜索...但没有运气..

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

谢谢

Answer 1

我遇到了同样的问题，我认为这是因为 CRA 处理查询的方式：我最终将我的 PDF 文件放在 public 文件夹中，然后 link 使用 :

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

作为我的标签的来源。

我猜这不是最好的方法，但效果很好...

Answer 2

我尝试了 squizz 的方法，但我发现的问题是，如果您多次单击 link，它将返回到最后一条路线。

您可以在 src 中创建一个文件夹来保存您的 pdf，然后 link 正常保存它们，例如：

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

唯一的问题是，您会在文件中附加一个散列，因此它会以 myfile.d2e24234.pdf 之类的形式出现。我认为它与文件加载器有关...目前正在尝试解决。

编辑

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

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

Answer 3

这对我有用：

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

Answer 4

运行进入同样的问题并通过诉诸老式 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 5

我在项目的两个不同区域遇到了这个问题，在 src 文件夹中的 App 组件和子导航组件的 link 中。我在 src 目录中创建了一个 'docs' 文件夹，并在我的文件中使用了 link 的 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 6

我发现这些答案中有很多都使我想做的事情变得过于复杂，所以这里是对我有用的答案。我将所有 pdf 转储到 /public/documents/<sample-consent-form.pdf> 并以这种方式链接它们。这将在新 window 中打开 pdf 视图，无需任何自定义组件或库。

const consentLink = (
    <span>
        Please review our{" "}
        <a href="/documents/sample-consent-form.pdf" target="_blank">
            consent policy
        </a>{" "}
        before accepting
    </span>
);

View/Download React 中的 Pdf 文件 - 路由器 4

View/Download Pdf Files in React - Router 4

reactjs

create-react-app

react-router-v4