[ HTML でテキストファイルや画像をダウンロード ]

Delphi Programming / Object Pascal

[掲載 2022年05月02日] [更新 2022年05月18日]　Delphi 一般・その他 [未分類 - OS の操作等]

HTML でテキストファイルや画像をダウンロード
動作確認等	Windows 10 ビルド 19042 Pro 64 bit HTML 5 (HTML Living Standard) に対応したブラウザ

[整理番号 - 1760]

HTML でテキストファイルや画像ファイルをダウンロード
01_ウェブページからテキストファイルをダウンロード
02_ウェブページから画像ファイルをダウンロード
03_PHP を使用して任意のファイルをダウンロード

04_Google Chrome で PDF ファイルをダウンロード可能にする
05_FireFox で PDF ファイルをダウンロード可能にする
06_Microsoft Edge で PDF ファイルをダウンロード可能にする

07_ブラウザの [ 名前を付けて保存 ] の設定
08_Google Chrome の [ 名前を付けて保存 ] の設定
09_FireFox の [ 名前を付けて保存 ] の設定
10_Microsoft Edge の [ 名前を付けて保存 ] の設定
11_IE 11 ( Internet Explorer ) の [ 名前を付けて保存 ] の設定

12_ポップアップメニューから [ 名前を付けてリンク先を保存 ]

13_Microsoft Edge の [ 開く ] 機能とダウンロード
14_ワードの文書とエクセルのブックのテスト用リンク

HTML でテキストファイルや画像ファイルをダウンロード

HTTP サーバのテキストファイルや画像ファイルのリンクをクリックすると，ブラウザではシームレス表示となり，ウェブページとして表示されます．
タグ <a> に download 属性を追加すると，リンクをクリックした時にダウンロードにすることができます．
download 属性は，HTML 5 で追加された機能です．

download 属性を追加しても，全ての種類のファイ0ルとブラウザでダウンロードになるとは限りません．ワードの文書，エクセルのブック，あるいは PDF 文書な等は，ブラウザよよって動作が異なることがあります．
ダウンロードするファイルは，HTML ファイルと同じサーバにないとダウンロードにはなりません．download 属性は，サーバサイドの機能です．他のサーバにあるファイルはダウンロードになりません．

下図は，今回動作確認したウェブブラウザの一覧です．全て 64 ビット版です．

図1
動作確認したブラウザとそのバージョン

Microsoft Edge は Chromium 版

以下は，ローカルコンピュータのファイルへのリンクです．セキュリティ上，サーバの HTML からは，ローカルコンピュータのファイルを操作することはできません．

[備考 1]
現時点におけるメジャーなウェブブラウザのデフォルトの設定は，PDF はシームレス表示となります．シームレス表示では，クライアント側のコンピュータに Adobe Acrobat や Adobe Reader がインストールされていなくても，ブラウザで PDF 文書が表示できます．

[備考 2]
ユーザに提供するファイルは，セキュリティの点からも，ZIP 書庫などとするのが一般的です．当サイトで提供しているファイルは，本ページと，関連した記事のページを除いて，ファイル数に関係なく全て ZIP 書庫です．

01_ ウェブページからテキストファイルをダウンロード

下のリンクをクリックすると，テキストファイルをブラウザでシームレス表示します．

テキストファイルを表示

これは，以下のように，<a> タグを使用したテキストファイルへのリンクとなっています．

リスト1

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <a href="http://mrxray.on.coocan.jp/savetest/testfile.txt">
  テキストファイルを表示</a>
</body>
</html>

タグ <a> に download 属性を追加するとダウンロードになります．download 属性に保存ファイル名を設定できますが，保存先を変更することはできません．
以下のコードの HTML ファイルを HTTP サーバに置いて，ブラウザで表示すれば動作を確認できます．ダウンロードするファイルのパスは各自の環境に合わせて変更してください．ダウンロードするファイルは，HTML ファイルと同じサーバにないとダウンロードにはなりません．

テキストファイルをダウンロード

リスト2

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <a href="http://mrxray.on.coocan.jp/savetest/testfile.txt" download>
  テキストファイルをダウンロード</a>
</body>
</html>

02_ ウェブページから画像ファイルをダウンロード

以下のリンクをクリックすると，画像をブラウザでシームレスに表示します．これは以下のコードのように，タグ <a> に download 属性がない場合です．

JPEG 画像を表示

リスト3

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <a href="http://mrxray.on.coocan.jp/savetest/testfile.jpg">
  JPEG 画像を表示</a>
</body>
</html>

画像の場合も，実際には画像のファイルですが，タグ <a> に download 属性を追加するとダウンロードになります．以下のコードの HTML ファイルを HTTP サーバに置いて，ブラウザで表示すれば動作を確認できます．ダウンロードするファイルのパスは各自の環境に合わせて変更してください．ダウンロードするファイルは，HTML ファイルと同じサーバにないとダウンロードにはなりません．

JPEG 画像をダウンロード

リスト4

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <a href="http://mrxray.on.coocan.jp/savetest/testfile.jpg" download>
  JPEG 画像をダウンロード</a>
</body>
</html>

JavaScript の関数を使用する例です．ボタンをクリックすると，<img> タグでページ内に表示している画像をダウンロードします．

図2
ダウンロード対象の画像

テスト用の HTML コードです．以下のコードの HTML ファイルを HTTP サーバに置いて，ブラウザで表示すれば動作を確認できます．
ダウンロードするファイルのパスは各自の環境に合わせて変更してください．

JavaScript の関数に <img> タグの name 属性の値を渡します．JavaScrip の関数は，その引数の値から <img> タグの src 属性の値を取得します．src 属性の値が画像ファイルの URL です．
JavaScript の関数では，<a? タグの要素を動的に生成して，download 属性を含めた各属性を設定して，クリック操作を自動的に実行します．

<input> タグを使用しているので，クリック部分はボタンとなります．一般的に，リンクはページの遷移，つまり別の記事のページへ移動することを意味します．その意味てはボタンの方が，個人的には適しているように思われます．

リスト5

<html>
<head>
  <meta charset="utf-8">

  <script type="text/JavaScript"> 
    function savefile(value) {
      var fileUrl = document.getElementsByName(value)[0].src;

      const link = document.createElement("a");
      link.href = fileUrl;
      link.download = '';
      link.click();        
      document.body.removeChild(link);    
    }     
  </script>     
</head>
<body>
  <input type="button" value="この画像をダウンロード" onclick="savefile('img2')"><br>
  <img name="img2" src="http://mrxray.on.coocan.jp/savetest/testfile.jpg">
</body>
</html>

03_ PHP を使用して任意のファイルをダウンロード

PDF ファイルの場合は，download 属性があっても，ブラウザの設定によってはダウンロードにはならず，シームレス表示になります．

PPD 文書ファイルへのリンク (download 属性なし)
PDF 文書ファイルへのリンク (download 属性あり)

PDF 文書に限らず，任意の種類のファイルをダウンロードするには，ダウンロード処理を行う PHP のコードを用意します．その PHP に，GET または POST メソッドでリクエスト送信します．その例です．PHP を使用するこの方法は，他のサーバのファイルもダウンロードできます．
下のボタンをクリックすると，当サイトの HTTP サーバにある PDF 文書ファイルをダウンロードします．

以下の PHP のコードを download.php の名前で保存します．保存の文字コードは UTF-8 にします．そのファイルをサーバの適当なディレクトリ内に置きます．
この PHP のコードでは，ダウンロード対象のファイルがあるディレクトリを固定しています．

リスト6

<?php
  $getfile = $_POST['file'];
  $file_path = "http://mrxray.on.coocan.jp/savetest/${getfile}";
  $file_name = basename($file_path);

  header('Content-Disposition: attachment; filename="'.$file_name.'"');
  header('Connection: close');

  while (ob_get_level()) { ob_end_clean(); }
  readfile($file_path); 
  exit;
?>

HTML のコードは，次のように <form> タグを使用します．<form> タグの action 属性に PHP の URL を指定します．ダウンロードするファイル名を <input> タグ手で指定します．今回は，ダウンロードするファイルがある場所を PHP 内で固定しているので，ここではディレクトリ名を除いたファイル名で指定しています．

上の PHP は当サイトのレンタルサーバに置いてあります．以下の HTML コードをローカルコンピュータにに保存してブラウザで表示すればと動作を確認できます．

リスト7

<html>
<head>
  <meta charset="utf-8">
</head>  

<body>
  <form method="POST" action="http://mrxray.on.coocan.jp/savetest/download.php">
    <input type="hidden" name="file" value="testfile.pdf">
    <input type="submit" value="PDF 文書をダウンロード" />
  </form>
</body>
</html>

上の HTML では <input> タグを使用しているので，ボタンクリックの操作となります．ページの遷移ではないのでボタンでよいと思われますが，どうしても <a> タグによるリンクにしたい場合は，次のように JavaScript で処理することもできます．

PDF 文書をダウンロード

リスト8

<html>
<head>
  <meta charset="utf-8">    
  <script type="text/JavaScript"> 
    function savefilephp(value) {
      var formtag = document.getElementById(value); 
      formtag.submit();   
    }     
  </script>     
</head>

<body>
  <form id="pdf" method="POST" action="http://mrxray.on.coocan.jp/savetest/download.php">
    <input type="hidden" name="file" value="testfile.pdf">
  </form> 
  <a href="javascript:void(0)" onclick="savefilephp('pdf')">PDF 文書をダウンロード</a>
</body>
</html>

ダウンロードするファイルの URL をフルパスで指定するようにすれば汎用性が高くなります．そのためには，上の PHP の最初の $getfile の行を削除して，$file_path = $_POST['file']; とします．

$file_path = $_POST['file']; // ダウンロードするファイルの URL
$file_name = basename($file_path); // ディレクトリを除いたファイル名

[備考]
レン 2タルサーバによっては，PHP ファイルを指定ディレクトリ内に置かないと動作しないことがあります．

04_ Google Chrome で PDF ファイルをダウンロード可能にする

メジャーなブラウザでは，PDF は，デフォルトでシームレス表示となります．
Google Chrome で PDF をダウンロードする設定にするには，以下のコマンドをアドレスバーに入力して，下図の設定画面を表示します．[PDF をダウンロードする] をクリックすると，PDF はダウンロードとなります．

// Grrgle Chrome で PDF をダウンロード設定するページを表示
// 以下をコピーして，アドレスバーに貼り付けて [Enter]
chrome://settings/content/pdfDocuments

図3
Google Chrome で PDF をダウンロード

05_ FireFox で PDF ファイルをダウンロード可能にする

メジャーなブラウザでは，PDF は，デフォルトでシームレス表示となります．
FireFox で PDF をダウンロードする設定にするには，以下のコマンドをアドレスバーで実行します．

// Firefox で PDF をダウンロード設定するページを表示
// 以下をコピーして，アドレスバーに貼り付けて [Enter]
about:preferences#general

この設定のページは，ブラウザ右上の [アプリケーションメニューを開きます] のアイコンからは，[設定] を選択すると表示できます．

図4
ブラウザ右上のアイコンをクリック

[設定] を選択

ページが表示されたら下にスクロールします．[ファイルとプログラム] の [プログラム] の項目で設定します．
[ファイルの種類 (Content Type)) の PDF の右側の [ 取り扱い方法] をクリックして，[ファイルを保存] を選択します．

図5
FireFox で PDF をダウンロード

06_ Microsoft Edge で PDF ファイルをダウンロード可能にする

メジャーなブラウザでは，PDF は，デフォルトでシームレス表示となります．
Microsoft Edge で PDF をダウンロードする設定にするには，以下のコマンドをアドレスバーに入力して，下図の設定画面を表示します．[常に DF ファイルをダウンロードする] をオンにします．
下図はオンになっている状態です．

// Microsoft Edge で PDF をダウンロード設定するページを表示
// 以下をコピーして，アドレスバーに貼り付けて [Enter]
edge://settings/content/pdfDocuments

図6
Edge で PDF をダウンロード

07_ ブラウザの [ 名前を付けて保存 ] の設定

筆者の知る限りでは，ダウンロードするファイルを，名前を付けて保存する機能を (JavaScript も含めて) HTML で，つまり，サーバ側で実装する方法はありません．[名前を付けて存] のダイアログを表示する機能は，ウェブブラウザが実装している機能です．ウェブブラウザの API を利用すれば可能かも知れません．次項以降は，名前を付けて保存を，クライアント側のブラウザで設定する方法です．

これ以降の [名前を付けて保存] の設定方法は，本ページの最初の方に掲載しているブラウザのバージョンで確認しています．ブラウザのバージョンによっては設定方法や動作が異なることがあります．ウェブブラウザのバージョンの確認方法については以下を参考にしてください．

参考リンク
[ウェブブラウザのバージョンを確認する方法]

08_ Google Chrome の [ 名前を付けて保存 ] の設定

Google Chrome では，ブラウザの右上の [Google Chrome の設定] アイコンをクリックして [設定] を選択します．

図7
ブラウザ右上のアイコンをクリック

[設定] を選択

Google Chrome の設定ページは，アドレスバーで以下のコマンドを実行して表示することもできます．

chrome://settings/downloads

ページが表示したら，左ペインの [詳細設定] をクリックして [ダウンロード] を選択します．右ペインの [ダウンロード前に各ファイルの保存場所を確認する] をオンにします．
下図はオンになっている状態です．

図8
Google Chrome の設定

デフォルト (既定) の保存先フォルダの変更方法は，以下の記事を参考にしてください．

参考リンク
[05_Google Chrome のデフォルトの保存先フォルダの変更]

09_ FireFox の [ 名前を付けて保存 ] の設定

FireFox は，ブラウザ右上の [アプリケーションメニューを開きます] のアイコンをクリックして [設定] を選択すると，[一般] のページが表示されます．

図9
ブラウザ右上のアイコンをクリック

[設定] を選択

FireFox の設定ページは，アドレスバーで以下のコマンドを実行して表示することもできます．

about:preferences#general

ページか表示されたら，下にスクロールすると，[ファイルとプログラム] [ダウンロード] の設定があります．検索ボックスで [ダウンロード] を検索することもできます．
[ファイルごとに保存先を指定する] をクリックして選択します．その下のプログラムのリストで，各プログラム単位で操作を設定します．

図10
FireFox のウンロード関係の設定

下図はエクセルの例です．名前を付けて保存するには，[ファイルを保存] にします．
ファイルごとのリストにない形式のファイルは，名前を付けて保存になります．例えば，テキストファイル，PNG画像，JPEG 画像は，ダウンロードの時に保存のダイアログが現れます．

この図の中の ms-excel は，Microsoft Excel の URI スキームです．URI スキームの機能を考えると，その設定は (標準設定) にしておいた方が無難と思われます．

図11
FireFox のウンロード関係の設定

デフォルト (既定) の保存先フォルダの変更方法は，以下の記事を参考にしてください．

参考リンク
[07_Firefox のデフォルトの保存先フォルダの変更]

10_ Microsoft Edge の [ 名前を付けて保存 ] の設定

Microsoft Edge は，ブラウザ右上の [設定など] アイコンをクリックして [設定] を選択します．

図12
ブラウザ右上のアイコンをクリック

[設定] を選択

Microsoft Edge の設定ページは，アドレスバーで以下のコマンドを実行して表示することもできます．

edge://settings/downloads

ページが表示されたら，左ペインの [ダウンロード] を選択します．右ペインの以下の項目をオンにします．
[ダウンロード式時の動作を毎回確認する] 　　(デフォルトはオフ)
[ダウンロードの開始時にダウンロードメニューを表示]　　　(デフォルトはオン)

図13
Microsoft Edge のダウンロード設定

[Office ・・・] のデフォルトは　オン
(この図ではオフ)

上の図の設定にすると，ダウンロード開始時に下図のダイアログが汗われます．
Microsoft Edge には，純粋な [名前を付けて保存] の機能はありません．[開く] と [名前付けて保存] の選択操作になります．
[Office ファイルをブラウザーで開く] がオン (デフォルトはオン) の時は，Microsoft Office 関係のファイルでは，下図のダイアログは現れません．

図14
Microsoft Edge の，ダウンロード開始時に現れるダイアログ

現れるのはブラウザの右上
[名前を付けて... ] をクリックすると，保存ダイアログが現れる
[名前を付けて保存] だけの機能はない

上の確認のダイアログの操作をキャンセルしたい場合，つまり，[開く] も [名前を付けて...] も選択しないで [ESC] キー，または，ブラウザ任意の場所をクリックして閉じると，Microsoft Edge を終了する時に下図のダイアログが現れます．
この時，ダウンロードの保存場所のフォルダには，暫定的なファイルが保存されます．[ブラウザを閉じる] をクリックすると，そのファイルは自動的に削除されます．

図15
Microsoft Edge を終了する時に現れるダイアログ

上のダイアログを [ESC] キーで閉じた場合

[開く] [名前を付けて..] のダイアログを，[キャンセル] ボタンで閉じれば，Microsoft Edge 終了時に上の図のダイアログは現れません．

図16
[キャンセル] ボタンで閉じる

[開く] [名前を付けて..] のダイアログを閉じると ([キャンセル] ボタンで閉じても)，下図のダイアログが表示されます．これは [ESC] キーとで閉じても問題ありません．
これは，ダウンロードの履歴のリストです．ダウンロードの履歴は，[...] ボタンクリックのメニューから消去できます．

このダウンロードの履歴は，ショートカットキー [Ctrl] + [J] でも表示できます．

図17
Microsoft Edge のダウンロードの履歴

[ESC] キーで閉じてもよい

デフォルト (既定) の保存先フォルダの変更方法は，以下の記事を参考にしてください．

参考リンク
[07_Microsoft Edge のデフォルトの保存先フォルダの変更]

11_ IE 11 ( Internet Explorer ) の [ 名前を付けて保存 ] の設定

IE 11 は，ブラウザ右上の歯車のアイコンをクリックして [インターネットオプション] を選択します．

図18
ブラウザ右上のアイコンをクリック

[インターネットオプション] を選択

[インターネットオプション] のダイアログが現れます．[プログラム] タブを選択します．[リンクの開き方を選択] の項目がありますが，筆者の環境では変更できないようになっています．
同じくブラウザの右上の歯車のアイコンから [ダウンロードの表示] を選択するとダイアログを表示します．そのダイアログの左下に [オプション] の設定があります．
IE 11 では，ダウンロードの時，ブラウザの下端に選択のダイアログが現れます．

12_ ポップアップメニューから [ 名前を付けてリンク先を保存 ]

名前を付けて保存は，リンク部分，あるいは画像の上でマウスの右ボタンをクリックした時のメニューからも実行できます．下図は Google Chrome の例です．
IE 11 の場合は [対象をファイルに保存] となっています．

	図19 タグ <a> のポップアップメニュー b;f Google Chrome の場合 [名前を付けてリンク先を保存] を選択表示はないが，アクセラレータキーは[K]
	図20 タグ <img> のポップアップメニューこれは Google Chrome の場合表示はないが，アクセラレータキーは [V]

13_ Microsoft Edge の [ 開く ] 機能とダウンロード

Microsoft Edge で [名前を付けて保存] の機能を有効にすると，[開く] ボタンがあるダイアログが現れます．この [開く] ボタンをクリックすると，Microsoft Edge は，以下のフォルダの階層下に対象のファイルをダウンロードして保存します．保存したそのファイルを開きます．
この保存先は，デフォルトの保存先ではありません．その結果，ウェブブラウザの利用者は，ファイルをダウンロードしたことを意識しないでファイルを開くことができます．

%TEMP% は，アプリ終了後に削除されても構わないファイルの置き場所です．Microsoft Edge を終了すると，それらのファイルは自動的に削除されますが，ユーザの操作内容によっては残ることがあります．

%TEMP%\MicrosoftEdgeDownloads

[備考 1]
ファイルを開くということは，そのファイルを開くプログラムを起動することです．
HTML からはプログラムを起動することはできません．それができたら，悪意のあるファイルやプログラムをダウンロードさせて，自動的に実行きせることができててしまいます．
ダウンロードした後であれば，ダウンロードした方の判断と責任で，開いたり実行するかを決めることができます．

ダウンロード後に，拡張子に関連付けされたアプリでファイルを表示するのは，HTML ではなく，ウェブブラウザというアプリケーションが行います．

[備考 2]
ファイルを開くとしいうことは，閲覧もありますが，編集を期待することもあります．HTTP サーバのファイルを，クライアント側が編集して変更することはきません．それは，本ページの閲覧者が，記事をブラウザ上で変更できないのと同じです．HTML で書かれた本ページのファイルも，本ページからダウンロードするファイルも，筆者が利用しているレンタルサーバにあります．
ダウンロードして保存したローカルコンピュータのファイルであれば，編集して変更できます．

参考リンク
[HTML でワードの文書やエクセルのブックを開く]

14_ ワードの文書とエクセルのブックのテスト用リンク

ウェブサーバのファイルへのリンクをブラウザでクリックした時の動作は，ファイルの種類やブラウザ，あるいはブラウザの設定にって違うことがあります．リンクをクリックした時に現れるダイアログや表示で動作を変更できることもあります．
ワードの文書とエクセルのブックたけですが，以下は，動作確認のためのリンクです．