React JS从Firebase下载图片：URL打开新标签而非触发下载问题

问题原因 #

Firebase Storage生成的默认下载URL，响应头里的Content-Disposition字段默认值为inline，浏览器会直接预览图片而非触发下载，导致FileSaver调用时图片在新标签页打开。

解决方案 #

方案1：上传时设置文件元数据，强制触发下载 #

修改Firebase上传函数，在上传时指定Content-Disposition为attachment，生成的下载URL访问时会直接触发下载：

export async function addMedia(location: "initial" | "prep" | "merge" | "sribe" | "other", file: string) {
    const fileName = uuidv4();
    const storageRef = ref(storage, `/${location}/${fileName}`);

    // 从data_url中解析文件MIME类型
    const mimeTypeMatch = file.match(/data:(.*?);/);
    const mimeType = mimeTypeMatch ? mimeTypeMatch[1] : 'image/png';
    const fileExtension = mimeType.split('/')[1];

    // 上传时设置元数据，指定Content-Disposition
    const snapshot = await uploadString(storageRef, file, "data_url", {
        contentType: mimeType,
        contentDisposition: `attachment; filename="${fileName}.${fileExtension}"`
    });

    const downloadLink = await getDownloadURL(snapshot.ref);
    return downloadLink;
}

方案2：前端将图片转为Blob后再下载 #

如果不想修改上传逻辑，前端通过fetch获取图片资源转为Blob，再用FileSaver保存，绕开响应头限制：

const downloadImage = async (url, name) => {
    try {
        const response = await fetch(url);
        const blob = await response.blob();
        FileSaver.saveAs(blob, name);
    } catch (err) {
        console.error('图片下载失败:', err);
    }
};

方案3：直接从Firebase Storage获取Blob保存 #

利用Firebase Storage的getBlob方法直接获取文件Blob，再调用FileSaver：

import { getBlob, ref } from "firebase/storage";
import { storage } from './your-firebase-config'; // 导入你的Firebase存储实例

const downloadImage = async (location, fileName, saveName) => {
    try {
        const storageRef = ref(storage, `/${location}/${fileName}`);
        const blob = await getBlob(storageRef);
        FileSaver.saveAs(blob, saveName);
    } catch (err) {
        console.error('下载失败:', err);
    }
};

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