如何在AngularJS中强制下载PDF/图片/视频/音频文件

我之前也踩过Chrome这个更新的坑！新版本的Chrome会自动识别图片、PDF、音视频这类文件，直接用内置预览器打开，完全忽略了前端的download属性，咱们得从服务器响应头和前端处理两个维度来解决，推荐优先改服务器端，这是最彻底的方案：

方案一：修改S3签名URL的响应头（推荐） #

问题的核心是：Chrome会根据服务器返回的Content-Disposition头来决定是预览还是下载。S3默认返回的是inline（在线预览），所以咱们需要在生成签名URL时，强制指定返回attachment头，告诉浏览器“这是要下载的文件”。

你需要调整payOutService.getSignedUrlFromS3ByPath这个方法，在生成S3签名URL的时候，添加response-content-disposition参数。比如用AWS SDK的话，代码大概是这样的（你可以对应到你的服务实现里）：

// 服务端生成签名URL的示例（Node.js为例）
const AWS = require('aws-sdk');
const s3 = new AWS.S3();

function getSignedUrl(filePath, fileName) {
  return s3.getSignedUrl('getObject', {
    Bucket: '你的Bucket名',
    Key: filePath,
    ResponseContentDisposition: `attachment; filename="${fileName}"`, // 关键参数！
    Expires: 3600 // URL有效期
  });
}

前端代码只需要确保download属性正确设置就行，原来的代码可以微调：

$scope.downloadFile = function () {
  const fileInfo = { path: collection.file_path, file_name: collection.file_name };
  payOutService.getSignedUrlFromS3ByPath(fileInfo)
    .success(function (signedUrl) {
      const link = document.createElement("a");
      link.download = fileInfo.file_name; // 确保文件名带扩展名
      link.href = signedUrl;
      link.rel = "noopener noreferrer"; // 安全起见添加这个属性
      link.click();
    })
    .error(function(err) {
      console.error('获取下载链接失败:', err);
    });
};

这样S3返回的文件头会包含Content-Disposition: attachment; filename="xxx"，Chrome就会直接触发下载，不会预览了。

方案二：前端转Blob下载（无法修改S3配置时用） #

如果暂时改不了服务端的S3配置，咱们可以把文件先下载到前端转成Blob，再创建本地URL触发下载，绕开Chrome的内置预览逻辑：

$scope.downloadFile = function () {
  const fileInfo = { path: collection.file_path, file_name: collection.file_name };
  payOutService.getSignedUrlFromS3ByPath(fileInfo)
    .success(function (signedUrl) {
      // 用Fetch获取文件并转成Blob
      fetch(signedUrl)
        .then(response => {
          if (!response.ok) throw new Error('文件获取失败');
          return response.blob();
        })
        .then(blob => {
          const blobUrl = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = blobUrl;
          link.download = fileInfo.file_name;
          link.style.display = 'none';
          document.body.appendChild(link);
          link.click();
          // 清理资源，避免内存泄漏
          document.body.removeChild(link);
          URL.revokeObjectURL(blobUrl);
        })
        .catch(err => {
          console.error('下载失败:', err);
          // 这里可以添加用户友好的错误提示，比如alert('下载失败，请稍后重试')
        });
    })
    .error(function(err) {
      console.error('获取下载链接失败:', err);
    });
};

注意事项 #

• 方案二需要确保S3的CORS配置允许你的域名发起GET请求，并且允许返回Blob所需的头
• 大文件用方案二可能会占用较多前端内存，所以优先用方案一
• 测试前记得清除Chrome缓存，避免旧的响应头影响结果

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