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

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

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

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

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

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

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

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

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

<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

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

Если вы хотите напрямую загрузить любое изображение или файл 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. На хроме он будет работать без добавления и удаления ребенка

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

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

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

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

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

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

Поскольку способ 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.

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

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

• В IIS перейдите в эту папку и дважды щелкните Заголовки ответа HTTP.

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

  Name: content-disposition Value: attachment

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

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

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

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

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

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

download(Path, name, mime)

Прочтите их документацию, чтобы узнать больше на GitHub.