Диалог сохранения файла

by denvdmj

HTML

<h1>Диалог сохранения файла</h1>

<p>Диалог сохранения файла сохраняющий <i>blob</i> и использующий <i>createObjectURL(blob)</i>
</p>
<button id="button-save">Сохранить blob на диск</button>
<textarea>введите текст</textarea>

CSS

body {
    background: #EEE;
    color: #222;
    font: 10.5pt/130%"PT Sans";
    min-width: 20em;
    margin: auto;
    padding: 1em 4em;
}
canvas {
    border: 6px ridge #BFB;
}
img {
    border: 6px ridge #BBF;
}
textarea {
    width: 100%;
    height: 10em;
    margin: 1em 0;
}

JavaScript

document.getElementById('button-save').onclick = function test() {
    var data = [];
    data.push(document.body.textContent);
    data.push(document.querySelector('textarea').textContent);
    var blob = new Blob([data.join('\n-------\n')], {
        type: 'text/plain;charset=utf-8'
    });
    if (navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, 'backup.txt');
    } else {
        saveFileDialog(blob, 'backup.txt');
    }
};

function saveFileDialog(blob, filename, mimetype) {
    var a = document.createElement('a');
    if (mimetype) a.type = mimetype;
    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.dispatchEvent(new MouseEvent('click'));
}