FlaskとJavaScriptのFetch通信でダウンロードさせる方法
はじめに
Flaskのレスポンスによってファイルをダウンロードさせる方法は以下のリンクのとおり3つあるようです。
qiita.com
しかしながら、Fetch通信によるPOSTに対するresponseにはこれらの方法だけでは対応出来ませんでした。解決した方法を以下に載せておきます。
前提
①Fetch通信で、Flaskサーバに対しPOSTリクエスト
②Flaskサーバでデータを処理し、ファイルを生成、responseヘッダに添付
③Fetchでresponseを受け取る
③で引っかかっていました。単なるinputによるPOSTとは勝手が違うようで、responseはメモリ上で受けるだけです。
解決方法
fetch("/export", { method:"POST", body:formdata //データを添付 }) .then(response => response.blob()) //blobで読み込む .then(blob => { //DOMでアンカー要素を生成 let anchor = document.createElement("a"); anchor.download = String(Date.now()) + '.geojson' anchor.href = window.URL.createObjectURL(blob); anchor.click(); }) .catch(function(err) { console.log("err=" + err); });
要はresponseをblobで読み込んでアンカーリンクを踏ませた事にするというわけですね。