Angular中下载文件链接无法正常工作的问题求助

这个问题我之前也碰到过！本质是Angular的静态资源打包规则在搞鬼——你放在component文件夹里的PDF没被正确识别成静态资源，导致点击链接时实际下载的是Angular路由返回的HTML页面（就是那个705B的文件），自然打不开。给你几个靠谱的解决办法：

• 方法一：把PDF移到默认静态资源目录
  Angular默认会把src/assets下的文件当作静态资源打包，所以你可以把File.pdf放到src/assets/pdf/目录下，然后修改HTML里的链接：

  My File <a href="/assets/pdf/File.pdf" download="File.pdf">here</a>
  

  这种方法最省心，不用改配置，重启服务就能用。

• 方法二：修改配置让Angular识别组件内的静态资源
  如果一定要把PDF留在landing-page/res文件夹里，需要修改angular.json的配置，告诉Angular要打包这个文件夹：
  找到architect -> build -> options -> assets数组，添加你的res文件夹路径：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/app/components/landing-page/res"  // 新增这一行
  ]
  

  然后修改HTML里的链接为绝对路径（避免路由层级影响）：

  My File <a href="/res/File.pdf" download="File.pdf">here</a>
  

  注意改完配置后要重启ng serve才会生效。

• 方法三：用ES模块导入PDF（Angular 12+适用）
  这种方法更符合Angular的模块化思路，首先在landing-page.component.ts里导入PDF文件：

  import pdfFile from './res/File.pdf';
  
  @Component({
    // 组件元数据
  })
  export class LandingPageComponent {
    pdfUrl = pdfFile;
  }
  

  然后在HTML里用属性绑定：

  My File <a [href]="pdfUrl" download="File.pdf">here</a>
  

  Angular会自动处理文件的打包路径，不用担心路径错误的问题。

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