Заголовки и бинарная загрузка в AJAX

Question

Мой код отлично работает в PHP. Можно ли добиться того же в Jquery / AJAX? Мне очень нужен asyn c процесс.

index. php

$mp3_file = 'song.mp3'; //the actual file you want to download
header('Content-Type: audio/mpeg');
header('Content-Disposition: attachment; filename="' . basename($mp3_file) . '.mp3"');
readfile($mp3_file);

Answer 1

Наконец, вместо AJAX я использовал asyn function () и fetch (), и это сработало хорошо.

async function fetch(data) {
                    await fetch('myurl.php', {
                        method: "POST",
                        body: data,
                        headers:
                                {
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                    'Cache-Control': 'no-cache',
                                    'Expires': '-1'

                                }

                    }).then(res => {
                        //Do some staff
                        if (res.ok) {
                            return res.blob();

                        } else {
                            throw new Error(res.statusText);
                        }
                    }).then(resblob => {
                                if (resblob != undefined) {
                                var blob = new Blob([resblob]);                          
                                const url = window.URL.createObjectURL(blob);
                                const a = document.createElement('a');
                                a.style.display = 'none';
                                a.href = url;
                                a.download = 'yourfilename.gif'; // the filename you want to give
                                document.body.appendChild(a);
                                a.click();
                                window.URL.revokeObjectURL(url);

                    }

                }).catch(reason => {
                    alert("Unable to load blob file.");

Answer 2

Вот рабочее решение, но без создания / удаления папок. Вам нужно будет адаптировать ваш php скрипт. Я просто даю необходимые инструкции для понимания другими людьми.

PHP скрипт

<?php

$mp3_file = 'song.mp3'; //the actual file you want to download

header('Content-Type: audio/mpeg');
header('Content-Disposition: attachment; filename='.basename($mp3_file));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($mp3_file));
readfile($mp3_file);
exit;
?>

Javascript Примечание: это будет работать в современных браузерах. Если вам нужна поддержка старых браузеров или у вас действительно большой файл, вы можете проверить плагин fileDownload

$.ajax({
    url: "php-script.php",
    type: "POST",
    data: {"variableName" : 'some value'},
    xhrFields: {
        responseType: 'blob'
    },
    success: function (_data) {
        var blob = new Blob([_data]);
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = 'song.mp3'; // the filename you want to give
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
        alert('The download prompt was opened');
    },
    error: function() {
        alert('Something went wrong!');
    }
});