如何在Angular中使用Google Cloud Storage签名URL下载文件

问题原因 #

浏览器会根据文件类型和响应头决定是在线预览还是下载，像图片、PDF这类支持预览的文件，默认会直接打开而非触发下载操作。

解决方法 #

方法1：给锚点添加download属性 #

动态创建a标签时加上download属性，指定下载后的文件名，强制浏览器触发下载：

// Angular组件中的实现代码
downloadFile(signedUrl: string, filename: string) {
  const downloadLink = document.createElement('a');
  downloadLink.href = signedUrl;
  downloadLink.download = filename; // 自定义下载后的文件名
  downloadLink.style.display = 'none';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

注意：如果签名URL是跨域地址，部分浏览器可能不支持download属性，此时需要用方法2。

方法2：先获取Blob再创建本地URL下载 #

通过Angular的HttpClient请求文件转为Blob，再生成本地URL触发下载，兼容性更强：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DownloadService {
  constructor(private http: HttpClient) {}

  async downloadFile(signedUrl: string, filename: string) {
    try {
      const blob = await this.http.get(signedUrl, {
        responseType: 'blob',
        headers: new HttpHeaders({
          'Content-Type': 'application/octet-stream'
        })
      }).toPromise();

      const blobUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = blobUrl;
      link.download = filename;
      link.click();
      window.URL.revokeObjectURL(blobUrl); // 及时释放内存资源
    } catch (error) {
      console.error('文件下载失败:', error);
    }
  }
}

额外注意事项 #

• 确保GCP签名URL的权限配置正确，允许GET请求访问
• 检查GCP存储对象的响应头，如果设置了Content-Disposition: inline，会强制浏览器预览，需要改为Content-Disposition: attachment; filename="xxx"（可在生成签名URL时指定响应头参数）

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