Как сделать PDF-файл доступным для загрузки по ссылке HTML?
Вопрос
Я даю ссылку на PDF-файл на своей веб-странице для скачивания, как показано ниже.
<a href="myfile.pdf">Download Brochure</a>
Проблема в том, что когда пользователь нажимает на эту ссылку, тогда
- Если у пользователя установлен Adobe Acrobat, то он открывает файл в том же окне браузера в Adobe Reader.
- Если Adobe Acrobat не установлен, пользователю будет предложено загрузить файл.
Но я хочу, чтобы он всегда появлялся у пользователя для загрузки, независимо от того, установлен «Adobe Acrobat» или нет.
Скажите пожалуйста, как мне это сделать?
Решение
Вместо ссылки на файл .PDF сделайте что-то вроде
<a href="pdf_server.php?file=pdffilename">Download my eBook</a>
который выводит пользовательский заголовок, открывает PDF-файл (двоичный сейф) и печатает данные в браузере пользователя, после чего он может сохранить PDF-файл, несмотря на настройки браузера.pdf_server.php должен выглядеть так:
header("Content-Type: application/octet-stream");
$file = $_GET["file"] .".pdf";
header("Content-Disposition: attachment; filename=" . urlencode($file));
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header("Content-Description: File Transfer");
header("Content-Length: " . filesize($file));
flush(); // this doesn't really matter.
$fp = fopen($file, "r");
while (!feof($fp))
{
echo fread($fp, 65536);
flush(); // this is essential for large downloads
}
fclose($fp);
ПС:и, очевидно, запустите некоторые проверки работоспособности переменной «файл», чтобы люди не могли украсть ваши файлы, например, не принимать расширения файлов, запрещать косые черты, добавлять к значению .pdf.
Другие советы
Это распространенная проблема, но мало кто знает, что есть простое решение HTML 5:
<a href="./directory/yourfile.pdf" download="newfilename">Download the pdf</a>
Где newfilename
— это имя файла, предложенное пользователю для сохранения файла.Или по умолчанию будет использоваться имя файла на стороне сервера, если вы оставите его пустым, например:
<a href="./directory/yourfile.pdf" download>Download the pdf</a>
Совместимость:Я тестировал это на Firefox 21 и Iron, оба работали нормально.Он может не работать в браузерах, несовместимых с HTML5 или устаревших.Единственный протестированный мною браузер, который не требует принудительной загрузки, — это IE...
Проверьте совместимость здесь: http://caniuse.com/#feat=download
Не зацикливаться через каждую строку файла.Использовать файл чтения вместо этого это быстрее.Это с сайта php:http://php.net/manual/en/function.readfile.php
$file = $_GET["file"];
if (file_exists($file)) {
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header("Content-Type: application/force-download");
header('Content-Disposition: attachment; filename=' . urlencode(basename($file)));
// header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
ob_clean();
flush();
readfile($file);
exit;
}
Обязательно очистите переменную get, так как кто-то может загрузить некоторые файлы php...
Вместо использования PHP-скрипта для чтения и очистки файла удобнее переписать заголовок, используя .htaccess
.Это сохранит «красивый» URL (myfile.pdf
вместо download.php?myfile
).
<FilesMatch "\.pdf$">
ForceType applicaton/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Я нашел способ сделать это с помощью старого доброго HTML и JavaScript/jQuery, который изящно деградирует.Протестировано в IE7-10, Safari, Chrome и FF:
HTML для ссылки для скачивания:
<p>Thanks for downloading! If your download doesn't start shortly,
<a id="downloadLink" href="...yourpdf.pdf" target="_blank"
type="application/octet-stream" download="yourpdf.pdf">click here</a>.</p>
jQuery (код на чистом JavaScript был бы более подробным), который имитирует нажатие на ссылку после небольшой задержки:
var delay = 3000;
window.setTimeout(function(){$('#downloadLink')[0].click();},delay);
Чтобы сделать это более надежным, вы можете добавить обнаружение функции HTML5, а если ее там нет, используйте window.open()
чтобы открыть новое окно с файлом.
Это ключ:
header("Content-Type: application/octet-stream");
При отправке PDF-файла отправляется контент типа application/x-pdf-document или application/pdf.Adobe Reader обычно устанавливает обработчик для этого типа MIME, чтобы браузер передавал документ в Adobe Reader при получении любого из типов PDF MIME.
В HTML5 есть более простой способ:Добавить Download
атрибут.
Он поддерживается большинством современных браузеров.
<a download href="file.pdf">Download PDF</a>
Я знаю, что очень поздно ответил на этот вопрос, но я нашел способ сделать это в JavaScript.
function downloadFile(src){
var link=document.createElement('a');
document.body.appendChild(link);
link.href= src;
link.download = '';
link.click();
}
Попробуй это:
<a href="pdf_server_with_path.php?file=pdffilename&path=http://myurl.com/mypath/">Download my eBook</a>
Код внутри pdf_server_with_path.php:
header("Content-Type: application/octet-stream");
$file = $_GET["file"] .".pdf";
$path = $_GET["path"];
$fullfile = $path.$file;
header("Content-Disposition: attachment; filename=" . Urlencode($file));
header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");
header("Content-Description: File Transfer");
header("Content-Length: " . Filesize($fullfile));
flush(); // this doesn't really matter.
$fp = fopen($fullfile, "r");
while (!feof($fp))
{
echo fread($fp, 65536);
flush(); // this is essential for large downloads
}
fclose($fp);
Здесь другой подход.Я предпочитаю использовать логику веб-сервера, а не полагаться на поддержку браузера или решать эту проблему на уровне приложения.
Если вы используете Apache и можете поместить файл .htaccess в соответствующий каталог, вы можете использовать приведенный ниже код.Конечно, вы также можете поместить это в httpd.conf, если у вас есть к нему доступ.
<FilesMatch "\.(?i:pdf)$">
Header set Content-Disposition attachment
</FilesMatch>
Директива FilesMatch — это просто регулярное выражение, поэтому ее можно задавать сколь угодно детально или добавлять другие расширения.
Строка заголовка выполняет то же самое, что и первая строка в приведенных выше сценариях PHP.Если вам также нужно установить строки Content-Type, вы можете сделать это таким же образом, но я не нашел в этом необходимости.
Я решил свою проблему, используя весь URL-адрес PDF-файла (вместо того, чтобы просто указывать имя или местоположение файла в href):href="домен .com/pdf/имя_файла.pdf»
если вам нужно ограничить скорость загрузки, используйте этот код !!
<?php
$local_file = 'file.zip';
$download_file = 'name.zip';
// set the download rate limit (=> 20,5 kb/s)
$download_rate = 20.5;
if(file_exists($local_file) && is_file($local_file))
{
header('Cache-control: private');
header('Content-Type: application/octet-stream');
header('Content-Length: '.filesize($local_file));
header('Content-Disposition: filename='.$download_file);
flush();
$file = fopen($local_file, "r");
while(!feof($file))
{
// send the current file part to the browser
print fread($file, round($download_rate * 1024));
// flush the content to the browser
flush();
// sleep one second
sleep(1);
}
fclose($file);}
else {
die('Error: The file '.$local_file.' does not exist!');
}
?>
Для дополнительной информации кликните сюда
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File Uploader</title>
<script src="../Script/angular1.3.8.js"></script>
<script src="../Script/angular-route.js"></script>
<script src="../UserScript/MyApp.js"></script>
<script src="../UserScript/FileUploder.js"></script>
<>
.percent {
position: absolute;
width: 300px;
height: 14px;
z-index: 1;
text-align: center;
font-size: 0.8em;
color: white;
}
.progress-bar {
width: 300px;
height: 14px;
border-radius: 10px;
border: 1px solid #CCC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6666cc), to(#4b4b95));
border-image: initial;
}
.uploaded {
padding: 0;
height: 14px;
border-radius: 10px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#66cc00), to(#4b9500));
border-image: initial;
}
</>
</head>
<body ng-app="MyApp" ng-controller="FileUploder">
<div>
<table ="width:100%;border:solid;">
<tr>
<td>Select File</td>
<td>
<input type="file" ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)" />
</td>
</tr>
<tr>
<td>File Size</td>
<td>
<div ng-repeat="file in files.slice(0)">
<span ng-switch="file.size > 1024*1024">
<span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
<span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
</span>
</div>
</td>
</tr>
<tr>
<td>
File Attach Status
</td>
<td>{{AttachStatus}}</td>
</tr>
<tr>
<td>
<input type="button" value="Upload" ng-click="fnUpload();" />
</td>
<td>
<input type="button" value="DownLoad" ng-click="fnDownLoad();" />
</td>
</tr>
</table>
</div>
</body>
</html>
В приложении Ruby on Rails (особенно с чем-то вроде камня Prawn и плагином Prawnto Rails) это можно сделать немного проще, чем с помощью полноценного скрипта (как в предыдущем примере PHP).
В вашем контроллере:
def index
respond_to do |format|
format.html # Your HTML view
format.pdf { render :layout => false }
end
end
Render: Layout => False Part сообщает браузеру открыть «Хотите загрузить этот файл?» пригласить вместо того, чтобы пытаться отображать PDF.Тогда вы сможете нормально ссылаться на файл: http://mysite.com/myawesomepdf.pdf