React前端无法从Cloud Storage存储桶下载文件问题排查

你的代码已经成功获取到了PDF的Blob数据，但缺少触发浏览器下载动作的关键步骤——浏览器不会自动处理Blob的下载，需要手动创建下载链接并触发点击。

修正后的XMLHttpRequest代码 #

const pathReference = ref(myStorage, `boats/${boatUid}/pdfs/${nameOfFile}`);
const url = await getDownloadURL(pathReference);
const xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.onload = (event) => {
    console.log(`Document downloaded`);
    const blob = xhr.response;
    // 新增：创建下载链接并触发浏览器下载
    const downloadLink = document.createElement('a');
    const objectUrl = URL.createObjectURL(blob);
    downloadLink.href = objectUrl;
    downloadLink.download = nameOfFile; // 指定下载后的文件名
    downloadLink.click();
    // 释放临时URL占用的内存
    URL.revokeObjectURL(objectUrl);
};
xhr.open("GET", url);
xhr.send();

关键步骤说明 #

• URL.createObjectURL(blob)：将Blob数据转换为浏览器可识别的临时URL，作为下载链接的地址。
• downloadLink.download：强制浏览器触发下载行为，并指定保存文件的名称，避免浏览器直接打开PDF而不是下载。
• URL.revokeObjectURL(objectUrl)：下载完成后释放临时URL的内存资源，避免内存泄漏。

更简洁的Fetch替代方案 #

如果觉得XMLHttpRequest写法繁琐，可以用fetchAPI实现相同功能，代码更易读：

const pathReference = ref(myStorage, `boats/${boatUid}/pdfs/${nameOfFile}`);
const url = await getDownloadURL(pathReference);
const response = await fetch(url);
const blob = await response.blob();
const downloadLink = document.createElement('a');
const objectUrl = URL.createObjectURL(blob);
downloadLink.href = objectUrl;
downloadLink.download = nameOfFile;
downloadLink.click();
URL.revokeObjectURL(objectUrl);

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