サーバー(Flask)側でファイルを作成し、クライアント(vue)に返したい

##【環境】
vue.js(2.9.6)
python(3.6.3)
flask(1.1.1)

##【実現したいこと】

0.vue.js 側でボタンを押す
1.テーブルデータを読み込む
2.openpyxlでシートを作成、書き込み
3.クライアント側でダウンロード

です。コードは以下のように書いています。

js
1...
2  methods:{
3    export_plan_table: function(e) {
4      e.preventDefault();
5      let self = this;
6
7      let data = {
8        table_data: self.table_data,
9      };
10
11      axios({
12        method: "POST",
13        url: "http://0.0.0.0:5100/export_plan_table",
14        data: data
15      })
16        .then(function(response) {
17          console.log(response)
18          let test_xlsx = response.data
19          console.log("成功");
20        })
21        .catch(error => {
22          console.log("失敗");
23        });
24    },
25  }

python
1@app.route('/export_plan_table', methods=["POST"])
2def export_plan_table():
3
4    req_data = request.data.decode('utf-8')
5    received_json = json.loads(req_data)
6
7    wb = px.Workbook()
8    sheet = wb.active
9　　 ...
10    
11    ...
12    wb.save('test.xlsx')
13    download_file_name = '{0}.{1}'.format(datetime.date.today(), 'xlsx')
14    download_file = '../test.xlsx'
15    XLSX_MIMETYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
16
17    return send_file(download_file, as_attachment=True,
18                     attachment_filename=download_file_name,
19                     mimetype=XLSX_MIMETYPE)

##【現状できていること】
以上のコードによって、実現したいことの0,1,2までは完成しています。
3に関してですが、vue側にデータを受け取ることはできているのですが

ダウンロードダイアログが出てこないのと、
受け取ったデータを確認するとエンコード?がうまくいっていない

という問題が発生しています。
様々なサイトを参考にしたのですが、解決できないので質問させていただきました。
ご回答いただけると幸いです。

参考にしたサイト

https://qiita.com/5zm/items/760000cf63b176be544c
https://www.yoheim.net/blog.php?q=20170801
https://tkkm.tokyo/post-177/

行動規範の内容に同意します

回答1件

自己解決

・最終的に以下のようなコードで実現できました。リクエストで

dataType
responseType

を指定する必要があったようです。

python
1    wb.save('test.xlsx')
2    download_file_name = 'test.xlsx'
3    download_file = '../test.xlsx'
4    XLSX_MIMETYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
5
6    send_file(download_file, as_attachment=True,
7              attachment_filename=download_file_name,
8              mimetype=XLSX_MIMETYPE)

vue
1      axios({
2        method: "POST",
3        url: "http://0.0.0.0:5100/xxx",
4        data: data,
5        dataType: "binary",
6        responseType: "blob"
7      })
8        .then(function(response) {
9          let xlsx_file = response.data;
10          let blob = new Blob([xlsx_file], {
11            type:
12              "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
13          });
14          let link = document.createElement("a");
15          link.href = window.URL.createObjectURL(blob);
16          link.click();
17          console.log("成功");
18        })