Angular mat-raised-button外部链接无法触发PDF自动重定向问题排查

可能原因 #

Angular的mat-raised-button组件和原生<a>标签结合时，按钮的默认点击事件可能干扰<a>标签的跳转逻辑；或者浏览器对Angular应用中打开的新窗口有安全限制，导致重定向未触发。

解决办法 #

1. 改用按钮点击事件手动触发跳转 #

放弃用<a>标签包裹按钮，直接通过点击事件调用window.open()打开链接，绕过组件对跳转的干扰：

<button mat-raised-button color="primary" (click)="openPDF()">to the pdf</button>

在组件的TypeScript代码中添加对应方法：

openPDF(): void {
  window.open('https://www.the-external-site.com/information/', '_blank');
}

2. 优化<a>标签属性，确保默认行为生效 #

给<a>标签添加安全相关属性，解决浏览器的安全限制问题：

<a mat-raised-button color="primary" 
   href="https://www.the-external-site.com/information/" 
   target="_blank"
   rel="noopener noreferrer"
   referrerpolicy="no-referrer">
  to the pdf
</a>

3. 排查全局拦截逻辑 #

确认你的Angular应用中没有全局点击事件拦截器、路由守卫或第三方脚本（如广告拦截、安全插件）阻止了外部链接的跳转行为。

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