使用AngularJS下载文件遇问题：链接报错如何解决？

我明白你在AngularJS里实现文件下载时遇到的糟心问题——先是Plunker链接找不到服务器，换了链接又提示下载失败但明明文件存在，肯定很头疼。咱们一步步来排查问题出在哪，再给你对应的解决办法。

一、Plunker链接失效的原因 #

你提到的第一个Plunker链接提示“服务器未找到”，大概率是因为这类在线示例平台会定期清理旧内容、调整服务，或者那个特定的评论示例已经被移除/归档了，这属于外部资源的问题，不是你的操作出错，但咱们可以不用依赖旧示例，直接从代码层面解决下载问题。

二、“下载失败但文件存在”的常见操作/代码问题 #

结合你给出的部分控制器代码（$scope.fileHref），大概率是踩了以下几个常见坑：

1. 跨域问题（最常见） #

如果你的前端AngularJS项目和文件所在服务器不是同域名、同端口、同协议，浏览器会因为同源策略阻止下载请求，这时候就会提示下载失败，但文件实际在服务器上是存在的。

• 解决办法：
  • 让后端配置CORS（跨域资源共享）规则，允许你的前端域名访问文件资源；
  • 把文件放到和前端项目同域的服务器目录下；
  • 通过后端代理转发请求：前端请求同域的后端接口，再由后端去获取目标文件并返回给前端。

2. 文件路径/URL配置错误 #

你在$scope.fileHref里设置的文件路径可能存在问题：

• 相对路径层级错误：比如文件实际在/assets/files/test.pdf，但你写的是files/test.pdf，如果当前页面路由是/user/detail，相对路径会解析成/user/files/test.pdf，自然找不到文件；
• 绝对路径域名/协议错误：比如服务器强制HTTPS，但你写的是http://xxx；或者域名拼写错误；
• 文件名大小写不匹配：很多服务器是区分大小写的，比如文件是Report.pdf，你写的是report.pdf。

3. AngularJS安全策略拦截 #

AngularJS有严格的$sce（Strict Contextual Escaping）安全策略，对于不符合规则的外部URL或资源路径，会自动拦截，导致无法正常触发下载。

• 解决办法：
  在控制器里注入$sce，把文件URL标记为安全资源：

  var app = angular.module('plunker', []);
  app.controller('MainCtrl', function($scope, $sce) {
    // 替换成你的实际文件URL
    var fileUrl = 'https://your-server.com/path/to/your-file.pdf';
    $scope.fileHref = $sce.trustAsResourceUrl(fileUrl);
  });
  

  然后在HTML中使用：

  <a ng-href="{{fileHref}}" download="custom-filename.pdf">下载文件</a>
  

4. 服务器响应头配置错误 #

服务器返回文件时，如果没有正确设置响应头，浏览器可能无法识别为可下载文件：

• 缺少Content-Disposition头：如果没有设置Content-Disposition: attachment; filename="your-file.pdf"，浏览器可能直接在页面打开文件，而非触发下载；
• Content-Type设置错误：比如PDF文件应该设置为application/pdf，如果设置成text/plain，会导致浏览器无法正确识别文件类型，进而提示下载失败。

三、完整的AngularJS文件下载实现示例 #

给你两种常用的实现方式，覆盖不同场景：

方式1：直接通过a标签下载（适合同域/已配置CORS的公开文件） #

控制器代码

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $sce) {
  // 同域文件路径或已配置CORS的外部URL
  var fileUrl = '/assets/files/sample.pdf';
  // 信任该URL为安全资源
  $scope.downloadLink = $sce.trustAsResourceUrl(fileUrl);
});

HTML代码

<a ng-href="{{downloadLink}}" download="sample.pdf">点击直接下载文件</a>

方式2：通过JS触发下载（适合需要权限验证的文件） #

如果文件需要携带token等权限信息，建议用这种方式：

控制器代码

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $http) {
  $scope.downloadFile = function() {
    $http({
      method: 'GET',
      url: 'https://your-server.com/api/download/protected-file',
      responseType: 'blob', // 必须设置为blob类型
      headers: {
        // 携带权限信息，比如token
        'Authorization': 'Bearer your-auth-token'
      }
    }).then(function(response) {
      // 创建Blob对象
      var blob = new Blob([response.data], { type: response.headers('Content-Type') });
      // 创建临时下载链接
      var url = window.URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url;
      // 从响应头获取文件名，或者自定义
      var filename = response.headers('Content-Disposition')?.split('filename=')[1] || 'downloaded-file.pdf';
      a.download = filename;
      // 触发下载
      document.body.appendChild(a);
      a.click();
      // 清理临时资源
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }).catch(function(error) {
      console.error('下载请求失败:', error);
      alert('下载失败，请检查网络或权限');
    });
  };
});

HTML代码

<button ng-click="downloadFile()">点击下载受保护文件</button>

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