HTML5ではドラッグ&ドロップでファイルをローカル環境にコピーすることができるようになりました。
既にネット上ではドラッグ&ドロップのサンプルをよく見かけるようになりましたが、固定ファイルのダウンロードのサンプルのみで、テキスト等を入力し、それをそのままテキストファイルとしてダウンロードするというサンプルが見当たらなかったので、自分で作成してみました。
動作確認はChromeのみで行っており、Chromeは起動オプション(–allow-file-access-from-files)を付与してあげないと、ローカル環境への書き込みを行ってくれない点に注意してください。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> function onSaveTest() { var sampleTextareaObj = document.getElementById("sampleTextarea"); var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)(); bb.append(sampleTextareaObj.value); var blob = bb.getBlob(); var blob_url = ''; if (window.createObjectURL) { blob_url = window.createObjectURL(blob); } else if (window.createBlobURL) { blob_url = window.createBlobURL(blob); } else if (window.webkitURL.createObjectURL) { blob_url = window.webkitURL.createObjectURL(blob); } document.getElementById('hoge').innerHTML = '<a id="file_download" href="' + blob_url + '" target="_blank">file</a>'; document.getElementById("file_download").addEventListener("dragstart", function (e) { e.dataTransfer.setData("DownloadURL", "text/plain:test.txt:" + blob_url); }, false); } </script> </head> <body> <textarea id="sampleTextarea" style="width:400px;height:200px;"></textarea><br> <input type="button" value="保存" onclick="onSaveTest();"><br> <div id="hoge"></div> </body> </html>
dragstartイベントの定義内で”test.txt”とファイル名を指定している部分を動的にしてあげることで、ダウンロードするファイルのファイル名も自由に設定できます。
これからはHTML5が主流になってくると思いますが、いまだにローカルPCとHTML間でのドラッグ&ドロップという操作に違和感が・・・