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

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

Ответ 1

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

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

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

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

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

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

Ответ 2

С html5 это возможно сейчас. Установите элемент "загрузить" attr в элементе.

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

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

Ответ 3

Это возможно только при настройке заголовка ответа HTTP по серверному коду. А именно,

Content-Disposition: attachment; filename=fname.ext

Ответ 4

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

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

Ответ 5

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

<?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

Ответ 6

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

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

Посмотрите этот пример:

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

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

Ответ 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>

Ответ 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. На хром он будет работать без добавления и удаления дочернего

Ответ 9

Лучшим для меня решением было то, что было написано Nick в своем блоге

Основная идея его решения заключается в использовании моделя заголовка сервера Apache и редактировании .htaccess для включения директивы FileMatch, которая заставляет все *.pdf файлы действовать как поток, а не вложение. Хотя на самом деле это не связано с редактированием HTML (в соответствии с исходным вопросом), он не требует какого-либо программирования как такового.

Первая причина, по которой я предпочитаю подход Nick, заключается в том, что она позволяла мне устанавливать ее на основе каждой папки, поэтому PDF в одной папке все еще можно было открыть в браузере, разрешая другим (те, которые мы хотели бы, чтобы пользователи редактировали, а затем повторно -upload) для принудительной загрузки.

Я также хотел бы добавить, что есть опция с PDF для отправки/отправки заполняемых форм через API на ваши серверы, но это займет некоторое время для реализации.

Вторая причина заключалась в том, что время - это соображение. Написание обработчика файлов PHP для принудительного размещения содержимого в заголовке() также займет меньше времени, чем API, но еще дольше, чем подход Ник.

Если вы знаете, как включить модем Apache и отредактировать .htaccss, вы можете получить это примерно через 10 минут. Для этого требуется хостинг Linux (а не Windows). Это не может быть подходящим подходом для всех видов использования, поскольку для его настройки требуется высокий уровень доступа к серверу. Таким образом, если вы сказали доступ, вероятно, потому, что вы уже знаете, как сделать эти две вещи. Если нет, проверьте блог Nick для получения дополнительных инструкций.

Ответ 10

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

Это решение требует, чтобы вы обслуживали предполагаемый файл из того же домена, или имеет разрешение CORS.

Сначала загрузите содержимое файла через XMLHttpRequest (Ajax).
Затем создайте 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

Ответ 11

Поведение должно зависеть от того, как браузер настроен для обработки различных типов MIME. В этом случае тип MIME - это приложение /pdf. Если вы хотите заставить браузер загружать файл, вы можете попробовать форсировать другой тип MIME в файлах PDF. Я рекомендую против этого, так как это должен быть выбор пользователей, что произойдет, когда они откроют PDF файл.

Ответ 12

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

Это сработало для меня:

В IIS перейдите в эту папку и дважды щелкните заголовки ответов HTTP.
Добавьте новый заголовок со следующей информацией:

Name: content-disposition Value: attachment

(from: http://forums.iis.net/t/1175103.aspx?add+CustomHeaders+only+for+certain+file+types+)

Ответ 13

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

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

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

Ответ 14

Наконец-то я нашел...... создать динамический тег привязки и кликнуть по нему

<script> 
   $('#myclick').click(function(){
       $('body').append('<a id="link" href="mypdf.pdf" 
        download="Payment.pdf">&nbsp;</a>');
       $('#link')[0].click();
   });
</script>

"Payment.pdf" предназначен только для нестандартного имени.

Ответ 15

Вы можете использовать download.js(https://github.com/rndme/download и http://danml.com/download.html). Если файл находится во внешнем URL-адресе, вы должны сделать запрос Ajax, но если это не так, вы можете использовать функцию:

download(Path, name, mime)

Прочитайте их документацию для более подробной информации в GitHub.