如何从下载Url firebase存储中单击reactjs下载文件？

npm install firebase

import firebase from 'firebase/app';
import 'firebase/storage';

const firebaseConfig = {
  // 在这里填入你的 Firebase 配置信息
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

// 初始化 Firebase 应用
firebase.initializeApp(firebaseConfig);

// 获取 Firebase 存储实例
const storage = firebase.storage();

import React from 'react';
import firebase from 'firebase/app';
import 'firebase/storage';

const DownloadFileButton = ({ fileUrl }) => {
  const handleDownload = () => {
    const fileRef = storage.refFromURL(fileUrl);

    fileRef
      .getDownloadURL()
      .then((url) => {
        // 创建一个链接元素并模拟点击下载
        const link = document.createElement('a');
        link.href = url;
        link.download = fileRef.name;
        link.click();
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <button onClick={handleDownload}>下载文件</button>
  );
};

export default DownloadFileButton;

import React from 'react';
import DownloadFileButton from './DownloadFileButton';

const MyComponent = () => {
  const fileUrl = '在这里填入 Firebase 存储文件的下载 URL';

  return (
    <div>
      {/* 其他组件内容 */}
      <DownloadFileButton fileUrl={fileUrl} />
    </div>
  );
};

export default MyComponent;