Получите скидку 65% на любой курс программирования на популярной образовательной платформе Skillbox!

Зарегистрируйте домен и получите 2 месяца бесплатного хостинга и SSL-сертификат на 1 год в подарок

Скачивание файла с сервера Ajax-запросом через jQuery

Скачивание файлов с сервера — одна из задач, которую часто приходится решать веб-разработчикам. Использование Ajax-запросов для загрузки данных с сервера является распространенной практикой, однако, когда речь заходит о скачивании файлов, появляются некоторые особенности, которые нужно учитывать. В этой статье мы рассмотрим, как сделать так, чтобы при нажатии на кнопку на странице произошло скачивание файла с сервера с использованием jQuery и Ajax.

Шаг 1: Подготовка серверной части на PHP

Предположим, у вас есть файл example.pdf, который нужно скачать. Создадим PHP-скрипт, который будет отвечать на запросы, определять где этот файл или создавать этот файл, а затем отправлять этот файл клиенту.

// Файл для скачивания
$file = 'files/example.pdf';

// Проверяем существование файла
if (file_exists($file)) {
    // Устанавливаем заголовки для скачивания файла
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="' . basename($file) . '"');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    // Отправляем файл в поток
    readfile($file);
    exit;
} else {
    // В случае отсутствия файла возвращаем ошибку
    http_response_code(404);
    echo "Файл не найден!";
}

Этот PHP-скрипт проверяет, существует ли запрашиваемый файл. Если файл найден, скрипт устанавливает необходимые заголовки для его скачивания и отправляет его в поток с помощью readfile(). Если файл не существует, сервер возвращает ошибку 404.

Шаг 2: Создание HTML-страницы с кнопкой

Теперь создадим на странице кнопку при нажатии на которую произойдет скачивание нужного файла:

<html lang="ru">
<head> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Скачивание файла</title> 
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
</head> 
<body> 

<button id="download-btn">Скачать файл</button> 

<script src="script.js"></script> 
</body> 
</html>

Шаг 3: Реализация Ajax-запроса с использованием jQuery

$(document).ready(function() {
    $('#download-btn').click(function() {
        $.ajax({
            url: 'download.php', // путь к вашему PHP-скрипту
            method: 'GET',
            xhrFields: {
                responseType: 'blob'
            },
            success: function(data, status, xhr) {

                // Получаем заголовок Content-Disposition
                const contentDisposition = xhr.getResponseHeader('Content-Disposition');
                let filename = 'downloaded_file.pdf'; // стандартное имя файла

                // Извлекаем имя файла из заголовка, если оно есть
                if (contentDisposition) {
                    const match = contentDisposition.match(/filename="(.+)"/);
                    if (match.length > 1) {
                        filename = match[1];
                    }
                }

                // Создаем ссылку с помощью jQuery
                const $a = $('<a></a>');
                const url = window.URL.createObjectURL(data);
                $a.attr('href', url);
                $a.attr('download', filename);
                
                // Добавляем ссылку в тело документа и кликаем по ней
                $('body').append($a);
                $a[0].click();

                // Удаляем ссылку после скачивания
                $a.remove();
                window.URL.revokeObjectURL(url);
            },
            error: function() {
                alert('Ошибка при скачивании файла');
            }
        });
    });
});

Код выше настраивает Ajax-запрос на отправку на сервер, где PHP-скрипт будет обрабатывать запрос и отправлять файл в ответ. В клиентском коде (на jQuery) мы проверяем заголовок Content-Disposition, чтобы получить имя файла и использовать его при скачивании. Если заголовок не установлен, будет использоваться имя по умолчанию (downloaded_file.pdf).

Этот способ позволяет динамически скачивать файлы с сервера на PHP, используя Ajax-запросы и jQuery. Использование PHP в качестве серверного языка позволяет легко реализовать отправку файлов клиенту с корректными заголовками, необходимыми для правильного скачивания. Такой подход делает ваше веб-приложение более удобным и интерактивным, улучшая пользовательский опыт.

Категория: JavaScript + jQuery