JavaScriptでファイルを即時ダウンロードさせる処理を作ってみた

1. WebRTCでPeer to Peerする
2. 自身のブラウザで画像ファイルとかをドラッグ＆ドロップする
3. 自身のブラウザでそのファイルを送信処理をする
4. 接続している相手のブラウザで勝手に即時ダウンロード
（ブラウザの設定で、保存ディレクトリを固定だったら勝手に保存される）
↑これ、結構ひどいことできますよね。。

ということで、
この記事はWebSocketやWebRTCを使って他人と接続し、他人からのPUSHを受け取れる状態になっておくことが前提になります。

で、どうやるの？

自身がPUSHして、相手側の受信イベントのコールバックでこんなスクリプトを実行するだけです。

// dataの内容は下記
var filename = data.filename;
var blob = new Blob([data.file], {type: data.mimeType}); 

// ファイルを自動でダウンロードする
var element = document.createElement("a");
element.download = filename;
element.href = window.URL.createObjectURL(blob);
element.click();

この受信処理で、PDF・PNG・GIFは問題なくダウンロードできたのは確認しました。

これだけではアレなので、筆者の場合…↓

筆者の場合 その１（送信ファイルの準備）

上記コードの、「data」の内容は下記です。

ドラッグ＆ドロップできるdivを用意し、ファイルをドロップする。
そのdropイベントで、受け取ったファイルの内容が「data」です。

dropイベントのコールバック

var files = event.dataTransfer.files;
for (var i = 0, l = files.length; i < l; i++) {
  var file = files[i];
  // ★★★data★★★↓
  var data = {
    file: file,
    filename: file.name,
    mimeType: file.type
  };
}

筆者の場合 その２（送信処理）

筆者が作ってみた環境では、PeerJSを使いました。
前回はライブラリ使わずに色々やりましたが、これはめっちゃ便利でした…。
dataConnection.sendってやるだけで、JSONやバイナリBlobs、ArrayBuffersを良しなに送れます。
（PeerJSはBinaryPackシリアライゼーションフォーマットを利用しているらしい）
http://nttcom.github.io/skyway/docs/

ということで、上記の「data」は dataConnection.sendで送っているだけです。
※ connection時のオプション指定で、serializationを「binary」にするのをお忘れなく。

おわりに

aタグにdownload属性なんてあったんだっていう発見ができました。
そして、PeerJSの便利さも覚えてきたので、これらを使って何か作りたいと思ってます。

以上！