Angular 7前端项目点击链接下载本地CSV文件失败求助

你遇到的核心问题是路径配置错误——Angular把你写的src/assets/user-type.csv当成了路由路径解析，而非静态资源的访问路径，所以才会触发路由匹配失败的报错。下面给你几个针对性的解决方案：

1. 修正静态资源路径（最简方案） #

Angular在打包和开发服务时，会自动将src/assets目录映射到服务器根目录下的/assets路径，因此你需要去掉路径里的src前缀，改用绝对路径：

<a href="/assets/user-type.csv" download>Download user-type.csv</a>

另外建议移除target="_blank"，因为download属性本身就会触发浏览器的下载行为，新窗口打开反而可能干扰这个逻辑。

2. 确认Angular的Assets配置规则 #

确保你的angular.json文件已正确配置assets目录，这样目标文件才会被复制到开发服务器或生产打包的输出目录中。找到对应项目的build配置，检查assets数组：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "options": {
          "assets": [
            "src/favicon.ico",
            "src/assets" // 确保此行存在，整个assets目录会被纳入打包/同步范围
          ],
          // 其他配置项...
        }
      }
    }
  }
}

如果你的csv文件放在src/assets的子目录下（比如src/assets/csvs/user-type.csv），则路径要对应改为/assets/csvs/user-type.csv。

3. 用DomSanitizer处理安全URL（可选，解决潜在安全拦截） #

如果浏览器因安全策略拦截了下载请求，可以借助Angular的DomSanitizer生成安全URL：

首先在组件中注入并生成安全URL：

import { Component } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  public downloadUrl: SafeUrl;

  constructor(private sanitizer: DomSanitizer) {
    this.downloadUrl = this.sanitizer.bypassSecurityTrustUrl('/assets/user-type.csv');
  }
}

然后在模板中绑定这个安全URL：

<a [href]="downloadUrl" download>Download user-type.csv</a>

完成修改后重启ng serve并刷新页面，应该就能正常触发文件下载了。

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