React.js接入Firebase云存储时Excel可下载但PDF无法自动下载问题

你当前的下载逻辑依赖iframe加载资源触发下载：浏览器无法内嵌预览的Excel类文件会直接触发下载，但PDF属于浏览器默认支持内嵌预览的格式，只会在你隐藏的iframe中加载，不会触发下载动作，所以请求返回200但没有下载弹窗。

方案1：替换DownloadComponent为动态a标签触发下载（最简单适配） #

直接替换原有DownloadComponent的实现即可，无需修改上层Devize组件逻辑：

import { useEffect } from 'react';

const DownloadComponent = ({ downloadSrc, fileName }) => {
  useEffect(() => {
    // 动态创建a标签触发下载
    const a = document.createElement('a');
    a.href = downloadSrc;
    // 若需要指定下载文件名可打开下行注释，否则使用Firebase存储的默认文件名
    // a.download = fileName;
    a.target = '_blank';
    document.body.appendChild(a);
    a.click();
    // 下载触发后清理元素
    document.body.removeChild(a);
  }, [downloadSrc]);

  // 无需渲染可视内容
  return null;
};

export default DownloadComponent;

方案2：Blob跨域兼容方案（方案1失效时使用） #

如果Firebase跨域配置导致a标签的download属性不生效，可以用fetch先把文件转成Blob对象再触发下载：

import { useEffect } from 'react';

const DownloadComponent = ({ downloadSrc, fileName }) => {
  useEffect(() => {
    const fetchAndDownload = async () => {
      try {
        const res = await fetch(downloadSrc);
        const blob = await res.blob();
        const blobUrl = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = blobUrl;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        // 释放blob占用的内存
        window.URL.revokeObjectURL(blobUrl);
        document.body.removeChild(a);
      } catch (err) {
        console.log('下载失败：', err);
      }
    };
    fetchAndDownload();
  }, [downloadSrc]);

  return null;
};

export default DownloadComponent;

可以在下载触发后重置Devize组件里的startDownload和downloadUrl状态，避免下次点击同一个文件时状态无变化无法触发下载。

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