（HTML）クリックしたときにブラウザーで開く代わりにPDFファイルをダウンロードする

ブラウザで開くのではなく、PDFファイルのリンクをダウンロード可能にする方法を知りたいですか？これはHTMLでどのように行われますか？（私はそれがJavaScriptまたは何かを介して行われていると思います）。

HTMLではこれを行うことはできません。これはサーバーベースのソリューションです。ブラウザが保存ダイアログをトリガーするように、ファイルをストリーミングする必要があります。

これをしないことをお勧めします。ユーザーがPDFを操作する方法は、ユーザーに委ねる必要があります。

更新（2014）：

だから...この答えはまだたくさんの反対票を獲得しています。その一部は、これが4年前に回答されたと思います。Sarimが指摘したように、これを処理できるHTML 5 download属性があります。

私は同意し、Sarimの答えは良いと思います（OPが戻る場合は、おそらくそれが選択された答えになるはずです）。ただし、この答えは依然としてそれを処理するための信頼できる方法です（YiğitYenerの答えが指摘し、奇妙なことに、人々は同意します）。ダウンロード属性はサポートを獲得しましたが、まだむらがあります。

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

送信される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を使用して、PDFの代わりにPHPファイルにリダイレクト（書き換え）します。

使用できます

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

この例を確認してください：

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

これはASP.NETにも当てはまります。他のすべてのサーバー側言語で同様のソリューションを見つけることができると思います。ただし、私の知る限りではJavaScriptによる解決策はありません。

html5属性がなければ、phpを使用してこれを実現できます。

次のコードを使用して、download.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>

新しいタブで開く代わりにブラウザから画像または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サーバーのヘッダーmodを使用し、.htaccessを編集して、すべての* .pdfファイルを添付ファイルではなくストリームとして機能させるFileMatchディレクティブを含めることです。これには実際にはHTMLの編集は含まれませんが（元の質問に従って）、プログラミング自体は必要ありません。

私がニックのアプローチを好んだ最初の理由は、フォルダーごとに設定できるので、1つのフォルダー内のPDFをブラウザーで開いたまま、他のフォルダー（ユーザーが編集して再アップロードしたいフォルダー）を許可できるためです。ダウンロードとして強制されます。

また、PDFには、APIを介してサーバーに入力可能なフォームを投稿/送信するオプションがありますが、実装には時間がかかります。

2番目の理由は、時間を考慮することです。header（）でコンテンツの配置を強制するPHPファイルハンドラーを作成することも、APIよりも時間がかかりませんが、Nickのアプローチよりも時間がかかります。

Apache modをオンにして.htaccssを編集する方法を知っている場合は、約10分で取得できます。（Windowsではなく）Linuxホスティングが必要です。構成するには高レベルのサーバーアクセスが必要なため、これはすべての用途に適切なアプローチとは限りません。そのため、アクセスと言ったのは、おそらくこれら2つのことを行う方法をすでに知っているからです。そうでない場合は、ニックのブログで詳細な手順を確認してください。

html5の方法（私の以前の答え）はすべてのブラウザーで使用できるわけではないため、もう1つの方法は少しハックです。

このソリューションでは、同じドメインから目的のファイルを提供している、またはCORS権限を持っている必要があります。

1. まず、XMLHttpRequest（Ajax）を介してファイルのコンテンツをダウンロードします。
2. 次に、ファイルのコンテンツをbase64エンコードしてデータURIを作成し、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

特定のフォルダーに動的な名前で作成され、IISによって提供されるファイルに対して、これを行う必要がありました。

これは私のために働きました：

• IISで、そのフォルダーに移動し、[HTTP応答ヘッダー]をダブルクリックします。

• 次の情報を含む新しいヘッダーを追加します。

  Name: content-disposition Value: attachment

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

HTML5を使用している場合（そして、今では誰もがそれを使用していると思います）、という属性がありますdownload。

例。 <a href="somepathto.pdf" download="filename">

ここfilenameはオプションですが、指定すると、ダウンロードしたファイルにこの名前が付けられます。

動作は、ブラウザがさまざまなMIMEタイプを処理するように設定されている方法に依存する必要があります。この場合、MIMEタイプはapplication / pdfです。ブラウザに強制的にファイルをダウンロードさせたい場合は、PDFファイルに別のMIMEタイプを強制することができます。ユーザーがPDFファイルを開いたときに何が起こるかを選択する必要があるため、これはお勧めしません。

download.js（https://github.com/rndme/downloadおよびhttp://danml.com/download.html）を使用できます。ファイルが外部URLにある場合は、Ajaxリクエストを行う必要がありますが、そうでない場合は、次の関数を使用できます。

download(Path, name, mime)

詳細については、GitHubのドキュメントをご覧ください。

最後に、動的アンカータグを作成してクリックしました。

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

「Payment.pdf」はカスタム名専用です。