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



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

431   13  

13 ответов:

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

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

обновление (2014):

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

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

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

С 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

это возможно только при установке заголовка ответа http кодом на стороне сервера. А именно:

Content-Disposition: attachment; filename=fname.ext

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

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

вам нужно будет использовать 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

можно использовать

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

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

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

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

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

создать php файл с именем скачать.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>

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

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

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

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

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

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

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

ex. <a href="somepathto.pdf" download="filename">

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

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

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

  1. сначала загрузите содержимое файла через XMLHttpRequest (Ajax).
  2. затем сделайте URI данных, кодируя base64 содержимое файла и установите media-type в 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

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

    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. На chrome он будет работать без добавления и удаления ребенка

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

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

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

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

    Name: content-disposition Value: attachment

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

Comments

    Ничего не найдено.