Блог

Я пытаюсь создать ссылку для скачивания, чтобы получить CSV-файл из моего хранилища Firebase. В классе, который вы можете видеть, мы используем функцию для размещения URL-адреса загрузки в ссылке.

 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 3rnTest 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-адрес файла в ссылке. Но когда я нажимаю на ссылку, страница просто обновляется, и ничего не загружается. Что я делаю не так?

Я это исправил. Я поместил функцию getDownloadUrl в render() класс. Я все еще не понимаю, почему я не могу просто ввести возврат для функции, чтобы загрузить URL-адрес в de link. Но, может быть, кто-нибудь может мне это сказать!