HTML5 атрибут "download"

2 хв. читання

Атрибут завантаження - спосіб сказати браузеру, що лінк посилається на завантаження файлу, це може бути медіа-файл або PDF документ або веб-сторінка і т.д. Це те, що ви використовували, щоб мати справу з серверним кодом. Наприклад, ви будете посилатися на серверний файл force-download.php і передавати в аргумент файл, який ви хочете завантажити.

    <a href="force-download.php?file=download-webpage.html">Download Webpage HTML</a>

Тоді на стороні сервера ви повинні будете отримати вміст запитуваного файлу і змусити браузер скачати вміст, роблячи щось подібне:

    function downloadFile($file){
        $file_name = $file;
        $mime = 'application/force-download';
        header('Pragma: public'); 	// required
        header('Expires: 0');		// no cache
        header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
        header('Cache-Control: private',false);
        header('Content-Type: '.$mime);
        header('Content-Disposition: attachment; filename="'.basename($file_name).'"');
        header('Content-Transfer-Encoding: binary');
        header('Connection: close');
        readfile($file_name);
        exit();
    }

Тепер ми можемо уникнути цього кроку і просто використовувати атрибут "download" в посиланні.

    <a download="" href="download-webpage.html">Download Webpage HTML</a>

Атрибут "download" на даний час не підтримується всіма браузерами, нині тільки Chrome, Firefox і Opera підтримують атрибут, інші браузери будуть вважати, що це звичайне посилання.

Для перегляду поточної підтримки браузерами атрибуту "download" Ви можете скористатися цим посиланням.

Атрибут "download" чудово підходить для таких речей як PDF документ, якщо хочете ви можете зробити щоб замість простого відкриття документа в браузері відбулося його завантаження.

Ви навіть можете змінити ім'я файлу, який буде завантажуватися, додавши значення до атрибута, як у наступному прикладі:

    <a download="invoice.pdf" href="some-random-generated-filename.pdf">Download Invoice</a>
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 1.6K
Приєднався: 1 рік тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід