IEでも動くようにしたいです。

Question

下記のjsは、
・画像をダウンロードしてページ移動するjsなのですが・・・IEでは画像のダウンロードの部分が利きません。

少しjs詳しい友人に相談したところjs部分をIEとchrome用で二つに分けて作らないとダメだと言われたのですが、
そういうものなのでしょうか？
できれば一つのjsでIEにも対応するように作りたいのと、なぜIEでは利かないのかの理由が分かりましたらご教授頂けますでしょうか。

window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('[data-href]').forEach(x=>{
    x.addEventListener('click',()=>{
        location.href=x.dataset['href'];
      }, 5000);
  });
});
</script>

<a data-href="https://mnakashi.web.fc2.com/test/2.html" href="https://mnakashi.web.fc2.com/test/sample.png" download="sample.png">ダウンロード</a>

Answer 1

なぜIEでは利かないのか

アロー関数（=>）がieで非対応です。functionで書き直せば問題ないかと思います。

---

ただし、IEはもう開発が終了しているので、今後は「IEが非対応」な機能性は増える一方となります。IE対応の必要性と、そのために回せる開発工数を考えて、対応するかしないか自体を検討する必要があります。

Answer 2

IEはアロー関数とアンカーのdownload属性に対応していません
hrefの先がサーバーサイドでダウンロード用のヘッダはいてくれるような
仕組みが必要だと思います。
外部サイトではなく同じサイト内ならajaxでデータをうけとってBlobで受けておいて
window.navigator.msSaveOrOpenBlob()でダイアログを出す方法もありますが
そこまでする必要があるかよく検討した方が良いと思います

Answer 3

es6で書いて問題ないですが、IEサポートしたいなら、babelなどでes5へコンパイルする必要があります。

https://www.i-ryo.com/entry/2020/01/11/211504#ES6ES2015%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%AF%BE%E5%BF%9C%E7%8A%B6%E6%B3%81