Edge × htmlのdownload属性でドはまりしたお話

割とマジで足掛け1か月くらい悩み続けてました。。。

download属性？

全然知らなかったんですが、aタグにはdownload属性があり、ファイルのダウンロードの際にdownload属性を参照してファイル名がつくみたいです。

これは、全ブラウザ共通でdownload属性を付けると、該当のファイル名でファイルがダウンロードされます。(飛び先がHTMLであっても)

何が起きたか

そんなことは何も知らずに、PHP側の処理で download というオプションが必要だったため、気づかずにaタグにオプションを渡していました。

そのオプション名でわかる通り、ファイルのダウンロードに関するオプションです。

コード的にはこんな感じになってました。

<a href="hogehoge?download=1" download="1">ほげ</a>

<?php
// リンクの遷移先
// ※実際はもっといろいろ書いてますｗ
function hogehoge() {
    if ($_GET['download'] == 1) {
        header('Content-Disposition: attachment; filename="hogehoge.txt"');
    }
}
?>

リンクをクリックした結果起きたこと

• Firefox: hogehoge.txt でダウンロード
• Chrome: hogehoge.txt でダウンロード
• IE: hogehoge.txt でダウンロード
• Edge: 1.txt でダウンロード

という結果になりました。。。
何をどう確認しても、どう修正しても1.txtでダウンロードされるんでなんでやねーん！って・・・。
デバッグツールでヘッダー情報確認しても問題なくhogehoge.txtがわたってるんだぜ。。。

まとめ

• download属性ってのがあるらしい！
• Edgeだけヘッダー情報との優先度が違うらしい！
• というかいらない属性を付けんなって！