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間でのドラッグ＆ドロップという操作に違和感が・・・