こんにちわ、フリーランスエンジニア兼ライターのワキザカ サンシロウです。
あなたは、ファイルダウンロード機能を作ったことがありますか？Word、Excel、PowerPoint、PDFなどダウンロードが必要になるケースは多岐にわたりますよね。
そこで今回は、download属性を使ったダウンロード方法という基本的な内容から、
- FileApiのBlobを活用したダウンロード方法
- ボタンクリックでダウンロードする方法
など応用的な内容も含め、ファイルダウンロード機能の作り方について徹底的に解説します！
download属性でダウンロードする方法とは
まずはじめに、一番簡単なHTML5でダウンロードする方法について説明します。
HTMLで次のようなコードを書くと、ファイルをダウンロードするリンクを作ることができます。
<a href="img/test.png" download="test.png">ダウンロード</a>
ファイルをダウンロードするリンクにdownload属性を追加してダウンロードできるようにしています。「img/test.png」がファイルパスで、「test.png」ダウンロード時のファイル名です。
ファイルをダウンロードするだけであれば、この方法で簡単にダウンロードできるので覚えておくと便利ですよ。
Blobを使ってテキストで入力したデータをダウンロードする方法とは
次に、テキストで入力したデータをダウンロードする方法について説明します。FileApiの「Blob」を使えば、テキストで入力した文字をテキストファイルとしてダウンロードすることができます。
こちらもよく使う方法なので、HTML5のdownload属性とあわせて覚えておくのがおすすめです。
<input type="text" id="txtData" />
<br />
<script type='text/javascript'>
function handleDownload() {
//テキストボックスの値を取得
var txtData = document.getElementById("txtData").value;
//ファイルタイプ、保存するテキストを指定してblobを作成
var blob = new Blob([ txtData ], {
"type" : "text/plain"
});
//ファイルをダウンロード
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, "test.txt");
// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
window.navigator.msSaveOrOpenBlob(blob, "test.txt");
} else {
document.getElementById("download").href = window.URL.createObjectURL(blob);
}
}
</script>
<a id="download" href="#" download="test.txt" onclick="handleDownload()">ダウンロード</a>
blobでテキストタイプ、テキストボックスで入力した値(txtData)を使ってデータを作成し、ファイルを保存しています。
サンプル紹介
最後に、すぐに使えるサンプルコードを用意しました。
※download属性を利用したaタグの「img/test.png」「test.png」の部分のみ利用環境に合わせて変更いただければ、そのままご利用できます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>ダウンロードテスト</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<a href="img/test.png" download="test.png">HTML5のdownloadでダウンロード</a><br />
<br/><br/>
<input type="text" id="txtData" />
<br/>
<script type='text/javascript'>
function handleDownload() {
//テキストボックスの値を取得
var txtData = document.getElementById("txtData").value;
//ファイルタイプ、保存するテキストを指定してblobを作成
var blob = new Blob([ txtData ], {
"type" : "text/plain"
});
//ファイルをダウンロード
if (window.navigator.msSaveBlob) {
window.navigator.msSaveBlob(blob, "test.txt");
// msSaveOrOpenBlobの場合はファイルを保存せずに開ける
window.navigator.msSaveOrOpenBlob(blob, "test.txt");
} else {
document.getElementById("download").href = window.URL.createObjectURL(blob);
}
}
</script>
<a id="download" href="#" download="test.txt" onclick="handleDownload()">入力したテキストをダウンロード</a>
</body>
</html>
まとめ
今回は、ファイルダウンロード機能の作り方についてご紹介しました。WEBアプリを作る場合、ファイルのダウンロード機能を使うケースは多いです。
今回説明した方法はどれも簡単に使うことができるので、ぜひ使ってみてくださいね！
