Firebase下载文件时移除前缀并重命名文件名

要实现下载时重命名文件，你需要放弃直接通过window.open打开URL的方式，改为通过XHR获取文件Blob后，手动创建下载链接并指定文件名。具体步骤如下：

1. 提取并处理目标文件名：从props.fullPath中解析出原始文件名，移除末尾的UUID后缀。
2. 通过Blob创建自定义下载链接：利用XHR获取文件Blob后，创建<a>标签并设置download属性为处理后的文件名，触发下载操作。

修改后的代码如下：

getDownloadURL(ref(storage, props.fullPath))
  .then((url) => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
      // 从fullPath中提取文件名并移除末尾的UUID后缀
      const originalFileName = props.fullPath.split('/').pop(); // 获取路径中的文件名部分
      // 匹配末尾的UUID格式字符串（8-4-4-4-12结构）并移除
      const targetFileName = originalFileName.replace(/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, '');
      
      // 创建下载链接
      const downloadLink = document.createElement('a');
      const blobUrl = URL.createObjectURL(blob);
      downloadLink.href = blobUrl;
      downloadLink.download = targetFileName; // 指定下载后的文件名
      document.body.appendChild(downloadLink);
      downloadLink.click();
      
      // 清理资源
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(blobUrl);
    };
    xhr.open('GET', url);
    xhr.send();
  })
  .catch((error) => {
    console.log("download file error ", error)
  });

关键说明： #

• 文件名处理逻辑：使用正则表达式匹配并移除末尾的UUID后缀，确保原始文件名（如Data.csv）被保留。如果你的UUID格式不同，可以调整正则表达式以适配。
• Blob下载方式：通过创建临时的<a>标签并设置download属性，浏览器会使用指定的文件名保存文件，而不是Storage中的原始文件名。
• 资源清理：下载完成后，记得移除创建的<a>标签并释放Blob URL，避免内存泄漏。

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