任意のファイルをダウンロードする
任意のファイルをダウンロードするには、次の方法で可能です。
サンプルコード
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を含む)に限定します。