(HTML) Загрузите файл PDF вместо открытия их в браузере при нажатии

Question

Мне было интересно, как сделать ссылку на файл PDF скачиваемой, а не открывать ее в браузере? Как это делается в HTML? (Я бы предположил, что это делается через JavaScript или что-то).

Answer 1

С html5 теперь это возможно. Установите атрибут "download" в элементе.

<a href="http://link/to/file" download="FileName">Download it!</a>

Источник: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download

Answer 2

Это возможно только при установке заголовка ответа http с помощью кода на стороне сервера.А именно;

Content-Disposition: attachment; filename=fname.ext

Answer 3

Вы не можете сделать это с HTML. Это серверное решение. Вы должны потоковое файл, чтобы браузер, чем вызывает диалоговое окно сохранения.

Я бы посоветовал не делать этого. То, как пользователь взаимодействует с PDF, должно быть оставлено на усмотрение пользователя.

ОБНОВЛЕНИЕ (2014):

Итак ... этот ответ по-прежнему вызывает множество отрицательных голосов. Я предполагаю, что отчасти это то, что на это ответили 4 года назад, и, как указывает Сарим, теперь есть атрибут HTML 5 download , который может справиться с этим.

Я согласен и думаю, что ответ Сарима хорош (вероятно, это должен быть выбранный ответ, если ОП когда-нибудь вернется). Тем не менее, этот ответ по-прежнему является надежным способом справиться с ним (как указывает Йигит Йенер и, как ни странно, люди с этим согласны). Хотя атрибут загрузки получил поддержку, он все еще остается пятнистым:

http://caniuse.com/#feat=download

Answer 4

Вам нужно изменить отправленные заголовки http.В зависимости от вашего сервера, вы можете изменить ваш .htaccess следующим образом:

<FilesMatch "\.(?i:pdf)$">
  ForceType application/octet-stream
  Header set Content-Disposition attachment
</FilesMatch>

Answer 5

вам нужно будет использовать PHP-скрипт (или другой серверный язык для этого)

<?php
// We'll be outputting a PDF
header('Content-type: application/pdf');

// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');

// The PDF source is in original.pdf
readfile('original.pdf');
?>

и использовать httacces для перенаправления (перезаписи) в файл PHP вместо pdf

Answer 6

Вы можете использовать

Response.AddHeader("Content-disposition", "attachment; filename=" + Name);

Проверьте этот пример:

http://www.codeproject.com/KB/aspnet/textfile.aspx

Это относится к ASP.NET. Я уверен, что вы можете найти аналогичные решения на всех других языках на стороне сервера. Однако, насколько мне известно, яваскриптового решения не существует.

Answer 7

Без атрибута html5 этого можно добиться с помощью php:

Создайте php файл с именем download.php с этим кодом:

<?php
ob_start();
$file = "yourPDF.pdf"

if (file_exists($file)) 
{
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.basename($file));
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    ob_clean();
    flush();
    readfile($file);
    exit();
}

Теперь, если вы хотите автоматически начать загрузку PDF, напишите этот javascript:

<script>window.location = "download.php";</script>

Если вы хотите, чтобы это работало над ссылкой, используйте это ...

<a href='javascript:window.location = "download.php"'>
    Download it!
</a>

Answer 8

Если вы хотите напрямую загрузить любое изображение или файл PDF из браузера, а не открывать его в новой вкладке, тогда в javascript вы должны установить значение для загрузки атрибута создания динамической ссылки

    var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    var event = document.createEvent('Event');
    event.initEvent('click', true, true); 
    save.dispatchEvent(event);
   (window.URL || window.webkitURL).revokeObjectURL(save.href);

Для нового обновления Chromeкакое-то время событие не работает.для этого следующего кода будет использоваться

  var path= "your file path will be here"; 
    var save = document.createElement('a');  
    save.href = filePath; 
    save.download = "Your file name here"; 
    save.target = '_blank'; 
    document.body.appendChild(save);
    save.click();
    document.body.removeChild(save);

Добавление дочернего элемента и удаление дочернего элемента полезно только для браузера Firefox, Internet Explorer.На хроме он будет работать без добавления и удаления дочернего элемента

Answer 9

Поскольку способ html5 (мой предыдущий ответ) доступен не во всех браузерах, это еще один слегка взломанный способ.

Для этого решения требуется, чтобы вы служили нужному файлу из того же домена, ИЛИ не имели разрешения CORS.

1. Сначала загрузите содержимое файла через XMLHttpRequest (Ajax).
2. Затем создайте URI данных с помощью base64, кодирующего содержимое файла, и установите для типа носителя значение application/octet-stream.Результат должен выглядеть следующим образом:

data:application/octet-stream;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

Теперь установлено location.href = data.Это заставит браузер загрузить файл.К сожалению, вы не можете установить имя файла или расширение таким образом.Привязка к медиа-типу может привести к чему-то.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

Answer 10

Если вы используете HTML5 (и я полагаю, что в наши дни все это используют), существует атрибут с именем download.

ех. <a href="somepathto.pdf" download="filename">

здесь filename не является обязательным, но если оно указано, оно будет принимать это имя для загруженного файла.