ファイルをダウンロードするaタグの、ダウンロード開始・終了を検知するスマートな方法を探しています

###前提・実現したいこと
ファイルがダウンロードされるurlを持ったaタグがクリックされた際の、ファイルダウンロード開始のタイミング、完了のタイミングが検知したい。

###発生している問題・エラーメッセージ
そもそも検知できるかどうかすら、調べてもいまいち情報が出てこない。

###該当のソースコード
とくになし。

###試したこと
clickイベントは分かるが、ダウンロード完了をどうやったら検知できるかがわからない。

###補足情報(言語/FW/ツール等のバージョンなど)
【追記】全ブラウザ対応なので、特定のブラウザのみで使える方法等は不可でお願いします。

ajax等でバイナリを取ってくる→window.URL.createObjectURLで無理やりダウンロードのような動作をさせる、という方法や、クッキーを使ったテクニックもありますが、もっとスマートにやる方法がないかを模索しています。

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

回答3件

自己解決

とりあえずの解決として、aタグをクリックした際にJavaScriptでデータをダウンロードさせる方法を取りました。ES6用のクラスとしてFileDownloaderというクラスを作ってみました。これでしばらく運用しようと思っています。まだ意見は募集しておりますので、こっちのほうが楽だぞ！という意見がありましたらぜひ投稿お願いいたします。

JavaScript
1export default class FileDownloader {
2    static download(url, method = 'GET', postData = null) {
3        let deferred = $.Deferred(function(dfd) {
4            var xhr = new XMLHttpRequest();
5            xhr.open(method, url, true);
6            xhr.responseType = "arraybuffer";
7            xhr.onload = function(e) {
8                if (xhr.readyState === 4) {
9                    // 通信完了
10                    switch (xhr.status) {
11                        case 200: //成功
12                            FileDownloader.downloadFromXhr(xhr);
13                            dfd.resolve();
14                            break;
15                        default:
16                            dfd.reject(xhr.status + " " + xhr.statusText);
17                            break;
18                    }
19                }
20            }.bind(this);
21            xhr.send();
22        });
23        return deferred.promise();
24    }
25    static downloadFromXhr(xhr, bom = false) {
26        let content = xhr.response;
27        let mimeType = xhr.getResponseHeader('content-type');
28        let name = 'download';
29        let contentDisposition = xhr.getResponseHeader('content-disposition');
30        if (contentDisposition) {
31            let match = contentDisposition.match(/filename="(.*?)"/);
32            name = match[1];
33        }
34        FileDownloader.downloadFromBinary(content, mimeType, name, bom);
35    }
36    static downloadFromBinary(content, mimeType, name, bom = false) {
37        // BOMは文字化け対策
38        if (bom) {
39            var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
40            content = [bom, content];
41        }
42        var blob = new Blob([content], {
43            type: mimeType
44        });
45
46        var a = document.createElement('a');
47        a.download = name;
48        a.target = '_blank';
49
50        if (window.navigator.msSaveBlob) {
51            // for IE
52            window.navigator.msSaveBlob(blob, name)
53        }
54        else if (window.URL && window.URL.createObjectURL) {
55            // for Firefox
56            a.href = window.URL.createObjectURL(blob);
57            document.body.appendChild(a);
58            a.click();
59            document.body.removeChild(a);
60        }
61        else if (window.webkitURL && window.webkitURL.createObject) {
62            // for Chrome
63            a.href = window.webkitURL.createObjectURL(blob);
64            a.click();
65        }
66        else {
67            // for Safari
68            window.open('data:' + mimeType + ';base64,' + window.Base64.encode(content), '_blank');
69        }
70    }
71}
72