@react-pdf/renderer生成PDF时可点击URL链接失效如何解决

问题表现 #

• 基于@react-pdf/renderer开发PDF生成功能时，除链接跳转外其余功能均运行正常，库内置的Link元素无法正常触发跳转
• 链接相关实现代码：

const add_hyperlink = (url_text: string) => {
  return <Text><Link src={url_text}>{url_text}</Link></Text>;
};

• 具体异常现象：生成的PDF中链接视觉显示正常，鼠标悬停时指针会切换为手型，但Chrome内置PDF阅读器中点击链接无任何响应，Adobe Reader中点击则会触发安全拦截
• 尝试替换为原生<a>标签实现后，异常表现完全一致

排查注意事项 #

两个名称高度相近的库适用场景完全不同，排查时不要混用跨场景的解决方案：

• @react-pdf/renderer：用于在React环境中创建、生成新的PDF文件
• react-pdf：用于在React应用中渲染、展示已有的PDF文件

网上流传的引入import 'react-pdf/dist/Page/AnnotationLayer.css';注解层样式修复链接点击的方案，仅适用于react-pdf库的PDF预览场景，对@react-pdf/renderer生成PDF的场景无效。
本次问题的使用场景为通过@react-pdf/renderer创建新PDF、输出可下载的PDF文件。

解决方案 #

异常根因为传入Link组件src属性的是带二次跳转逻辑的重定向链接，这类链接会被各类PDF阅读器判定为风险内容拦截，Chrome内置PDF阅读器也无法正常处理这类跳转逻辑。
将src属性替换为无重定向的最终直达目标链接后，链接即可正常点击跳转，无需额外配置。

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