Скачивайте файлы асинхронно, как это делает диск Google - PullRequest
0 голосов
/ 12 февраля 2020

У меня есть проект Laravel, который использует jQuery и Pusher JS. Когда я нажимаю кнопку, я выполняю вызов ajax и создаю файл CSV, который запускает событие ExportHasFinished . Это событие транслирует результаты на JS с помощью Pusher. Во внешнем интерфейсе я вижу карточку, которая сообщает мне, когда файл готов к загрузке. Все это работает на моей странице export . То, чего я пытаюсь добиться, - это сохранить загрузку в фоновом режиме, как это делает Google Диск, и иметь возможность доступа к другим страницам, пока это происходит.

HTML для карты загрузки находится в файле макета, а JS включен в заголовок, поэтому он доступен на всех других страницах. На моей странице export я показываю карту загрузки, но когда я go перехожу на другую страницу, карта скрывается и экспорт больше не выполняется. Есть ли способ, которым я могу достичь этого?

Вот код для Pusher:

var pusher = new Pusher(pusherKey, { cluster: 'eu' });
var channel = pusher.subscribe('export.' + loggedInUser);

channel.bind('App\\Events\\ExportHasFinished', function(data) {
    if(data.fileURL) {
        // change the text of the download card
        downloadCard.find('.card-header').html('Ready for download');
        downloadCard.find('.card-subtitle').html('Your download will start soon.');

        // remove download card
        setTimeout(function( ) { downloadCard.fadeOut('slow'); }, 2000);

        // download file
        window.open(data.fileURL, '_self');
    }
    else {
        downloadCard.find('.card-subtitle').html('There was an error.');
    }
});

А вот код для вызова Ajax:

$('.export-all').on('click', function(e) {
    e.preventDefault();

    $.ajax({
        async: true,
        method: "POST",
        url: exportAllAjaxUrl,
        data: { _token: CSRF_TOKEN, company_id: companyId, dataType: dataType },
        success: function(data) {
            if(data) {

            }
        },
        error: function(xhr, status, error) {
            if(xhr.responseJSON) {
                alert(xhr.responseJSON.errors)
            }
        },
    });
});

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...