JavaScriptでのダウンロード処理が，Chromeだとうまくいかない

前提・実現したいこと

全体としてはHyperappによるクラウドサービスを作っており，そのうちUIの調整部分を今作業しています。
その中で，リンクをクリックすると，サーバー上のファイルの内容に基づいたテキストファイル
（最終的には置換処理などを行った上で出力したい）をダウンロードする機能を実装しようとしています。
サーバーからのファイルの呼び出しはaxiosで行っています。

発生している問題

chromeでコードを実行すると，test.txtのダウンロード自体はできるのですが，
ファイルを開いてみると，想定している「01output.txt」の内容ではなく，
エントリーポイント？を記述している「index.html」の内容になってしまいます。
console.logでは，ちゃんとcontentの内容が表示されているのに，
なぜダウンロードされるファイルには反映されないのかわからず，ハマってしまっています。
chrome特有の設定が何かいるのでしょうか？

該当のソースコード

typescript
1<a href = "#" id ="download" download="test.txt"
2                           onclick={()=> {
3                             const url = `/templates/01output.txt`;
4                             axios.get(url).then(res => {
5                               const content = res.data
6                               const blob = new Blob([ content ], { type : "text/plain" });
7                               if (window.navigator.msSaveBlob) {
8                                 window.navigator.msSaveBlob(blob, "ie.txt");}
9                                 else {
10                                   console.log(content);
11                                   document.getElementById("download").href = window.URL.createObjectURL(blob);
12                                 }
13                               });
14                             }}
15                             >
16                             書面をダウンロード
17                           </a>

試したこと

edgeでは，ie.txtという名前でダウンロードができ，内容は想定どおり01output.txtの内容になっていました。
firefoxでは，test.txtがダウンロードされ，内容も想定どおり01output.txtの内容になっていました。

補足情報（FW/ツールのバージョンなど）

chrome( 69.0.3497.100（Official Build）（64 ビット）)

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

回答2件

自己解決

チームの他の人のヘルプで以下のようなコードになりました。
無事に動作しています。
何がどう違うことで挙動に違いが出るのか，正直あまり分かっていないところはありますが。。

該当箇所のコード

Typescript
1<a
2                          href="#"
3                          id="download"
4                          onclick={() => {
5                            const url = `/templates/01output.txt`;
6                            axios.get(url).then(res => {
7                              const content = res.data;
8                              const blob = new Blob([content], {
9                                type: 'text/plain',
10                              });
11                              doExportFile('test.xml', blob);
12                            });
13                          }}
14                        >
15                          書面をダウンロード
16                        </a>

別のComponentとして以下の記述

Typescript
1export const doExportFile = (name, blob) => {
2  if (window.navigator && window.navigator.msSaveOrOpenBlob) {
3    // If IE, you must uses a different method.
4    window.navigator.msSaveOrOpenBlob(blob, name);
5  } else {
6    var url = window.URL.createObjectURL(blob);
7    var a = document.createElement('a');
8    document.body.appendChild(a);
9    a.href = url;
10    a.download = name;
11    a.click();
12    window.URL.revokeObjectURL(url);
13    document.body.removeChild(a);
14  }
15};

投稿2018/09/24 03:22

knyk

総合スコア17

spookybird

2018/09/24 03:36

クリックした対象とは別に新たにaタグを作成してbodyに追加し、そこにhref属性を設定してクリックを発火してから追加したaタグを削除しています。もうちょっとやり方考えた方がいいと思いますが...まあ動くなら別にそれでいいのかもしれませんが。

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

onclickイベントハンドラ内で非同期通信した結果をhref属性に突っ込んでるので、その値が設定されるのが遅くてブラウザがダウンロード始めるのに間に合ってないんじゃないですか。
hrefが#のままダウンロードやっちゃってる気がします。

結果を待ってあげる必要があるので、こうですかね。

html
1<a id ="download" download="test.txt"
2   onclick={(e) => {
3      // href属性が設定されていればここで終了
4      // 終了前にhref属性を空にしておけば次のクリックで再度取得しなおします
5      if (e.target.href) return;
6
7      // デフォルト動作をキャンセル
8      e.preventDefault();
9
10      const url = `/templates/01output.txt`;
11      axios.get(url).then(res => {
12        const content = res.data
13        const blob = new Blob([ content ], { type : "text/plain" });
14        if (window.navigator.msSaveBlob) {
15          window.navigator.msSaveBlob(blob, "ie.txt");}
16        else {
17          console.log(content);
18          e.target.href = window.URL.createObjectURL(blob);
19          // hrefを設定した上で再度自身のクリックイベント発火
20          e.target.click();
21        }
22      });
23    }}
24  >
25  書面をダウンロード
26</a>