Fetch API を使って画像データなどを取得してダウンロードする

こんにちは、いわむらです

もうすぐIEのサポートを終了するということもあり色々と利用できるものが増えるなと思っています

その中でも使う頻度が増えそうなFetchを利用して画像データを取得しそれをダウンロードする処理をこの間試しに書いたのでそれを今回書こうかなと思います

今回利用するFetchについてはMDNに詳細が書いてあるのでそちらを確認してもらえればと思います

Fetch の使用 - Web API | MDN

Fetch API は、リクエストやレスポンスといった HTTP のパイプラインを操作する要素にアクセスするための JavaScript インターフェイスです。グローバルの fetch() メソッドも提供しており、簡単で論理的な方法で、非同期にネットワーク越しでリソースを取得することができます。

MDN Web Docs

自分の方で作った処理がこんな感じになります

// TypeScript

const sampleUrl = `https://source.unsplash.com/EZpGDYWBAYA`

const downloadFile = async (url: string): Promise<void> => {
  try {
    const response = await fetch(url)
    const blob = await response.blob()
    const downloadTag = document.createElement('a')
    downloadTag.href = URL.createObjectURL(blob)
    downloadTag.download = `sample.png`
    downloadTag.click()
  } catch (error: AnyForError) {
    console.error(error.message)
  }
}

downloadFile(sampleUrl)

sampleUrlはダウンロード先が必要だったのでunsplash.comを利用しています

処理の流れとしてはfetchで特にGETなどのリクエストを指定しないとデフォルトでGETリクエストになるため特に指定はせずfetchの引数にurlだけ渡しています

レスポンスが返ってきたら返ってきた内容をblob型にしています

ダウンロードするためにまずaタグを作成します

そしてブラウザ内にあるblobのメモリ位置をURLにしてそれをダウンロードのhrefにしています

ダウンロードするときにはファイル名を指定したいのでdownload属性を指定します。今回はサンプルなのでsample.pngとしておきます

あとは作成したaタグを擬似的にクリックさせればブラウザでダウンロードが開始されるという感じの流れになっています

axiosとかを入れなくても比較的簡単に書けるのでパッケージを削りたい場合などにはどんどん使っていきたいなと思います

今回は以上です！読んでいただきありがとうございました！