JavaScript によるファイルのダウンロード
-
HTML の
download属性を使用してファイルをダウンロードする - JavaScript でカスタム作成関数を使用してテキストファイルを作成およびダウンロードする
-
Axiosライブラリを使用してファイルをダウンロードする
この記事では、JavaScript を使用してファイルをダウンロードする方法を学習します。ファイルの自動ダウンロードは、サーバーに接続せずに JavaScript 関数を使用して URL から直接ファイルを取得するのに役立ちます。これは、カスタムで記述された関数と HTML5 のダウンロード属性を使用して実現します。
HTML の download 属性を使用してファイルをダウンロードする
HTML 5 の download 属性は、ユーザーがハイパーリンクをクリックしたときにファイルをダウンロードするために使用されます。アンカータグ（<a> および <area>）とともに使用されます。ファイルのソースを指定する href 属性を設定する必要があります。download 属性の値は、ダウンロードされたファイルの名前を決定します。この値を削除すると、ダウンロードされたファイル名は元のファイル名と同じになります。
<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
上記のコードでは、download 属性を使用して画像 apple.png をダウンロードします。まず、画像のアドレスを含むアンカータグを作成し、それに download 属性を追加します。次に、ファイルのダウンロードを容易にするダウンロードボタンも作成しました。
JavaScript でカスタム作成関数を使用してテキストファイルを作成およびダウンロードする
このアプローチでは、テキストデータをその場で作成し、JavaScript を使用してテキストファイルを作成してからダウンロードします。
ダウンロードアルゴリズム
-
テキストデータを入力するためのテキスト領域を作成します。
-
createElementプロパティを使用してアンカータグ<a>を作成し、それにdownload属性とhref属性を割り当てます。 -
encodeURIComponentを使用してテキストをエンコードし、そのコンポーネントとして URI に追加します。これは、特定の特殊文字をエスケープシーケンスの組み合わせに置き換えるのに役立ちます。 -
hrefの属性値としてdata:text/plain; charset = utf-8を使用して、日付タイプをtext/plainに、エンコーディングをUTF-8に設定します。 -
この作成された要素をドキュメントの本文（HTML ページ）に追加します。
-
element.click()を使用して、マウスクリックをシミュレートします。 -
ドキュメントの本文（HTML ページ）から要素を削除します。
クリックを探しているイベントリスナーをダウンロードボタンにアタッチします。テキスト領域のテキストとテキストファイルのファイル名をパラメータとしてダウンロード関数を呼び出します。
<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
Axios ライブラリを使用してファイルをダウンロードする
このアプローチでは、Axios ライブラリを使用してファイルをダウンロードします。アプローチの詳細に進む前に、Axios を使用してファイルをダウンロードするために使用されるデータ型である Blob とは何かを理解しましょう。
Blob
Blob は Binary Large Object の略で、バイナリデータを格納できるデータ型です。これは、プログラム、コードスニペット、マルチメディアオブジェクト、および JavaScript ネイティブ形式をサポートしないその他のものなどのデータを表します。
ファイルのダウンロード
-
ファイルのソースとして URL を使用し、
blobとしてresponseTypeを使用して、Axios のgetリクエストを作成します。 -
次の手順を実行して、Axios リクエストによって返された promise を解決します。
- Blob オブジェクトを表す URL を含む DOMString を作成します。
createElementプロパティを使用してアンカータグ<a>を作成し、それにdownloadおよびhref属性を割り当てます。- 最初のステップで作成した URL として
hrefを設定し、ダウンロードしたファイルの名前としてdownload属性を設定します。 - このリンクをドキュメントに添付し、
.click()メソッドを使用してクリックをシミュレートします。 - このリンクをドキュメントから削除します。
<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
ここでは、サイトからランダムな画像を取得し、Axios を使用してそれらの画像を blob の形式でリクエストし、アンカータグの download 属性を使用してダウンロードします。この方法は、前の方法のようにユーザーが入力したプレーンテキストに制限されません。API からあらゆる種類のデータをリクエストし、このアプローチを使用してコンピューター内にデータを保存できます。
Axios ライブラリを使用するメソッドを除いて、すべての主要なブラウザは上記のすべてのメソッドをサポートしています。Internet Explorer はまだネイティブ ES6 の約束をサポートしておらず、Axios はそれらに大きく依存しています。
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn