在 ReactJS 中下载 PDF 文件可以在本地运行，但不能在 Amazon Amplify AWS 上运行

Question

我已经找到了这个问题的解决方案，并将其包含在这篇文章中。这只是为了提醒任何遇到同样问题的人。

问题：我试图在我的 React 应用程序中下载 PDF。这是用于下载的嵌入代码：

import ResumePDF from "../../files/Resume.pdf";

// somewhere in a react functional component...
<a href={ResumePDF} target="_blank" rel="noreferrer" download="zolyomi_resume.pdf">
    <Button>download</Button>
</a>

现在，我验证了该文件位于正确的位置并且正在正确导入。事实上，当我在本地运行这个时，它没有任何问题。当我部署到 AWS Amplify（提交到链接的 github 存储库）时出现问题。

解决方案：在 AWS Amplify 中，应用程序设置中有一个特定部分，您可以在其中指定某些文件类型链接到某些扩展名。

基本上，您必须指定.pdf 文件是可重定向文件的有效形式。

1. 前往您的 AWS Amplify 控制台
2. 导航到有问题的应用程序
3. 从左侧边栏中选择重写和重定向

4. 编辑看起来像长正则表达式字符串的重写。默认情况下，pdf 扩展名不包含在此列表中，因此您必须添加它。在单词css（或任何其他文件扩展名）后添加以下内容：|pdf. 确保将其保留为 arewrite而不是redirect. 它应该看起来像这样：

5. 保存，确保它在控制台中更新，然后刷新页面。现在应该可以了。

TL;DR Amazon Amplify 使您可以指定可重定向的文件类型。默认情况下，PDF 不是。除此之外的其他文件类型css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json也不是，因此您必须自己添加它们。

Answer 1

这里的根本问题是您aws amplify在该部分中缺少一个条目rewrites & redirects。您的应用程序的默认配置将具有以下内容：

• source address-></^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>与相应的target address-> /index.html.

如果您仔细观察，就会发现regex仅允许某些文件类型 - 并且pdf不是其中的一部分。您可以简单地将edit其row更改source address为</^[^.]+$|\.(?!(pdf|css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>. 请注意，我已经预先修复了它pdf|......这应该为您提供所需的修复。

redirects您可以通过转到应用程序的主页来访问该部分aws amplify，然后转到app settings-> rewrites & redirects。

IMO 以上是一个修补程序，而不是一个干净的解决方案。大pdf文件会给您带来打包和服务的麻烦。正确的方法是将这些文件放入您的文件中object-store S3并正确配置redirects。您可以redirects 在此处阅读更多相关信息。amplify.yml您甚至可以在您的预构建步骤中自动执行这些步骤。