ReactJS实现PDF下载本地正常但部署到AWS Amplify后失效如何解决？

我已经找到该问题的解决方案并整理如下，可供遇到相同问题的开发者参考。

问题描述 #

我尝试在React应用中实现PDF文件下载功能，使用的代码如下：

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

// React函数组件内的相关逻辑...
<a href={ResumePDF} target="_blank" rel="noreferrer" download="zolyomi_resume.pdf">
    <Button>download</Button>
</a>

我已确认文件存放路径正确、导入逻辑无误，本地运行时下载功能完全正常，但将代码提交到关联的GitHub仓库、部署到AWS Amplify后，下载功能就失效了。

解决方案 #

AWS Amplify的应用设置中需要单独指定可重定向的文件类型，默认未包含PDF格式，需手动添加，操作步骤如下：

• 打开AWS Amplify控制台
• 进入出现问题的对应应用页面
• 在左侧侧边栏选择「Rewrites and Redirects」选项
• 编辑页面中长正则格式的重写规则，默认的扩展名列表中不包含pdf，你需要在css（或其他任意已有扩展名）后面添加|pdf，注意保持规则类型为rewrite不要改为redirect
• 保存设置，确认控制台已更新配置后刷新页面，PDF下载功能即可恢复正常。

要点总结 #

Amazon Amplify默认仅支持css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json等格式的文件可重定向，PDF等其他格式需要手动添加到重写规则的扩展名列表中。

内容的提问来源于stack exchange，提问作者theurul