任意のファイルをダウンロードする

任意のファイルをダウンロードするには、次の方法で可能です。

サンプルコード

JavaScript

var srcPath    = 'source/demo.jpg', // ダウンロードするファイル
    dlFileName = 'sample.jpg';      // 保存するファイル名

var sampleElem = document.getElmentById('sample'); // 押すきっかけとなる要素

sampleElem.addEventListener('click', function() {
	// a要素の生成
	anchorTmpElem = document.createElement('a');
	anchorTmpElem.setAttribute('href', srcPath);
	anchorTmpElem.setAttribute('target', '_blank');
	anchorTmpElem.setAttribute('download', dlFileName);
	anchorTmpElem = dlBtnElem.parentNode.appendChild(anchorTmpElem);

	// イベントの発火
	if (document.dispatchEvent) {
		var ev = document.createEvent('MouseEvents');
		ev.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		anchorTmpElem.dispatchEvent(ev);
	} else if (document.fireEvent) {
		anchorTmpElem.click();
	}

	anchorTmpElem.parentNode.removeChild(anchorTmpElem);
}, false);

ダウンロードボタンを押すとa要素を作成します(8~12行目)。
document.dispatchEventが利用可能な場合はイベントを作成し、clickイベントを割り当て発火させます(16~18行目)。
document.dispatchEventが利用不可能な場合はそのままclickイベントを発火させます(20行目)。
最後に不要なa要素を削除します(23行目)。

  • ※ 毎回生成してイベントを発火させないとうまく動作しません。
  • ※ download属性が利用できないブラウザは別ウィンドウで開きます。
  • ※ ブラウザからアクセス可能なファイル(Data URI Schemeを含む)に限定します。

JavaScript逆引きリファレンス一覧へ戻る