ファイルをダウンロードするには a tag に download 属性を付けると楽です : The Anchor element - HTML: HyperText Markup Language | MDN
<a href="./sample.txt" download>download link</a>ただし、注意書きにあるように
download only works for same-origin URLs,
と同じオリジンしか動かないとなっていますが、Chrome 114.0.5735.26 だとダウンロードできます
JavaScript でダウンロードしてみます
<script>
function download(path, filename) {
// fetch parameterは要件にあわせる
fetch(path, {
method: 'GET',
headers: { 'Content-Type': 'application/octet-stream' },
mode: 'no-cors',
})
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`)
}
return response.blob()
})
.then((response) => {
const fileUrl = URL.createObjectURL(response)
const link = document.createElement('a')
link.href = fileUrl
link.download = filename
link.style.display = 'none'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
})
}
</script>
<button onClick="download();">download</button>fetch に設定するパラメータは要件にあったものにします
fetch() - Web API | MDN
fetch mode について
Request: mode property - Web APIs | MDN
指定する Content-Type: 'application/octet-stream' はダウンロードするファイルの種類が分からない時に設定するといいようです
MIME タイプ (IANA メディアタイプ) - HTTP | MDN
fetch で画像をとってきて、問題なければファイルをダウンロードできるように a tag を組み立ててクリックして作った a tag を削除してます
fetch mode: no-cors で CORS が必要なリンク先を指定してしまうとレスポンスが空になって 0byte のファイルがダウンロードされるので注意です
// Responseの例
{
"body": null,
"bodyUsed": false,
"headers": {},
"ok": false,
"redirected": false,
"status": 0,
"statusText": "",
"type": "opaque",
"url": ""
}mode: cors にしてアクセスできるようにするなどする必要があります
アクセス先からのレスポンスヘッダーに
Content-Disposition: attachment を設定するとダウンロードされるはずです
Content-Disposition - HTTP | MDN
References:
Download Any Files in HTML and JavaScript: Ultimate Tutorial | WM