时间戳

首页 > 解决方案 > 将 Firebase 存储 getDownloadUrl 反应到链接

reactjs - 将 Firebase 存储 getDownloadUrl 反应到链接

问题描述

我正在尝试创建一个下载链接以从我的 Firebase 存储中获取 CSV 文件。在 Class 中，您可以看到我们正在使用一个函数将下载 URL 放在 de 链接中。

import React, { Component } from 'react'
import { storage, auth }  from '../../handlers/Firebase'
import { Link } from 'react-router-dom';

class Dashboard extends Component {

    constructor() {
        super();
        this.state = {
            userAuth : auth.currentUser
        }
        this.getDownloadUrl = this.getDownloadUrl.bind(this);
    }

    getDownloadUrl(){
        var storageRef = storage.ref('images/test.csv');
        storageRef.getDownloadURL().then(function(url) {
            // we get correct URL in the console, but when we click on the 'a' the page just refresh...
            console.log( "Got download url: ", url );
            var link_item = document.getElementById('download-link')
            link_item.setAttribute('href', url)
        });
    }

    render() {

        //This is the data for in the CSV file
        var csvData = 'Title 1;Title 2;Title 3\r\nTest 1;Test 2;Test 3';

        var file = new Blob([csvData], {
            encoding: "UTF-8",
            type: "text/csv;charset=UTF-8"
        });

        // Create a root reference
        var storageRef = storage.ref();

        // Create a reference to 'images/mountains.jpg'
        var Ref = storageRef.child('images/test.csv');

        Ref.put(file).then(function(snapshot) {
            console.log('Uploaded a blob or file!');
        });

        return (
            <div className="dashboard-page">
                <div className="container">
                    <h2>Dashboard</h2>
                    <Link to={this.getDownloadUrl} id="download-link">Download file</Link>
                </div>
            </div>
        )

    }

}

export default Dashboard

我在链接中获得文件的 URL。但是当我单击链接时，页面只是刷新并且没有下载任何内容。我究竟做错了什么？

标签： reactjsfirebasecsvfirebase-storage

解决方案

我修好了它。我把这个函数getDownloadUrl放在render()了课堂上。我仍然不明白为什么我不能只在函数上返回以在 de 链接中加载 URL。但也许有人可以告诉我！

推荐阅读