ファイルをダウンロードさせるJavaScriptコード - みじんこのメモ書き

ファイルをダウンロードさせるJavaScriptコード

JavaScriptを使ってファイルをローカルに保存する。

ダウンロードできるもの

Web上のリソース

JavaScriptで生成した文字列

JavaScriptでファイルダウンロード処理を実現する - Qiita

canvas（画像として保存する）

1. HTML（正確にはDOM）の<a>要素を生成する。

2. 属性を設定する。

href

リンク先を指定。

download

リンクをクリックするとダウンロードを行うようにする。

ダウンロード時のファイル名も指定できる（任意）

3. 生成した<a>要素のクリック時の処理を実行させる。

基本

適当なURLからファイルをダウンロードする場合

code:javascript

let a = document.createElement("a")

a.href = "<任意のURL>"

a.download = "<ダウンロード時のファイル名>"

a.click()

文字列

code:javascript

let s = "適当な文字列"

let blob = new Blob(s, {"type":"text/plain"})

let a = document.createElement("a")

a.href = window.URL.createObjectURL(blob)

a.download = "<ダウンロード時のファイル名>"

a.click()

参考

BlobをJavaScriptで使う方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

Blob() - Web API | MDN

MIME タイプ (IANA メディアタイプ) - HTTP | MDN

URL.createObjectURL() - Web API | MDN

配列（JSON）

code:javascript

let json = 適当な配列、または連想配列

let blob = new Blob(JSON.stringify(json,undefined,2), {"type":"text/plain"})

let a = document.createElement("a")

a.href = window.URL.createObjectURL(blob)

a.download = "<ダウンロード時のファイル名>.json"

a.click()

参考

JSON.stringifyを改めて調べる。 - Qiita

canvasを画像として保存するコンソールコマンドを参照