ファイルのダウンロード時に"void(0)"を保存しようとしてしまう

Question

不具合の概要

画面内のリンクをクリックした際にAPIを呼びだし、
そのレスポンスをファイルとしてダウンロードさせたいです。

実装し、想定通りファイルがダウンロードできるようにはなりましたが、
同時に下記画像のように"void(0)"もダウンロードしようとしてネットワークエラーとなってしまいます。

■Chromeでの実行時

ちなみにChromeの「設定」→「詳細設定」→「ダウンロード」→ダウンロード前に各ファイルの保存場所を確認する、をONにすると
この"void(0)"はダウンロードされなくなりますが、
ブラウザの設定に関わらず"void(0)"が表示されないようにしたいです。

もし対処法をご存じの方がいらっしゃいましたら、アドバイスを頂きたいと思います。

実装

ソースは下記の通りです。

■画面

<a name="linkDownloadFile" download="新しいテキスト ドキュメント.txt" href="javascript:void(0);" data-hogeid="12">新しいテキスト ドキュメント.txt</a>

■JS

//リンククリック時
$('[name=linkDownloadFile]').on('click', function(e) {
  var id = $(e.currentTarget).data('hogeid');
  var fileName = $(e.currentTarget).text();
  var path = '/xxx/download/' + id;
  downloadFile('GET', path, fileName);
});

//ファイルのダウンロード処理
function downloadFile(method, path, fileName) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function (e) {
    var res = xhr.response;
    if (xhr.status != 200) {
    
      //省略
      
      return;
    }
    
    if (!fileName || fileName.length == 0) {
      var disposition = xhr.getResponseHeader('Content-Disposition');
      if (disposition && disposition.indexOf('attachment') !== -1) {
        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        var matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) {
          fileName = matches[1].replace(/['"]/g, '');
        }
      }
    }
    
    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(res);
    link.download = decodeURI(fileName);
    link.click();
  };

  xhr.onerror = function(e) {
    //省略
  };

  xhr.ontimeout = function(e) {
    //省略
  }

  xhr.onabort = function(e) {
    //省略
  }
  
  var url = domain + path;
  xhr.open(method, url, true);
  xhr.responseType = "blob";
  xhr.timeout = 10000;
  xhr.send();
}

開発環境

JQuery 3.2.1
Chrome 78.0.3904.97

Answer 1

hrefにjavascript: void(0)が入っているから
です。
つまり、javascriptのAjax処理は非同期のため、同時に、ブラウザのデフォルトのハイパーリンクの仕様である、downloadリンク機能が動いてしまっているのでしょう。
クリックイベントをつけているので、HTMLの上は初期のコードでは、hrefを外されてはいかがでしょうか？

Comments

[flaumig]

素早いご回答ありがとうございます！
aタグからhref属性とdownload属性を外したところ意図した通りの挙動になりました。

「カーソルをリンクだと分かるようにしたいが、ジャンプはさせたくない」という安易な考えから
href="javascript:void(0);"としておりましたが、仰る通りそもそも不要な要素でした。

[miyabi_pudding]

そうそう、hrefつけないとカーソルがデフォルトでならないから、クリックイベント要素でも、入れたくなりますよね。
今回の場合は致し方ないので、CSSで調整ですね　汗

Answer 2

ajaxで受けたデータをダウンロードさせるのですよね？
アンカーはダミーにして、新規で

<a href="data:ファイルタイプ;base64・・・" download="hoge">

を作ってクリックしてダウンロードさせればよいのでは？

Comments

[flaumig]

ご回答ありがとうございます。
ファイルダウンロード処理の中で下記のように新しい要素を作成しているのですが、
仰っているのはこれとはまた違う方法でしょうか？

var link = document.createElement('a');
link.href = window.URL.createObjectURL(res);
link.download = decodeURI(fileName);
link.click();