Как скачать файл, созданный в браузере
Короткий ответ
Положите данные в Blob, создайте для него временный адрес и нажмите на ссылку с атрибутом download:
<button id="save">Download JSON</button>
<script>
function downloadFile(content, fileName, type) {
const blob = new Blob([content], { type });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileName;
link.click();
URL.revokeObjectURL(url);
}
document.getElementById('save').addEventListener('click', () => {
const data = { name: 'Anna', score: 42 };
downloadFile(JSON.stringify(data, null, 2), 'result.json', 'application/json');
});
</script>CSV для Excel
Соберите строки таблицы и соедините их переводами строк. Невидимый символ в начале помогает Excel правильно прочитать буквы:
const rows = [['Name', 'Score'], ['Anna', 42], ['Oleg', 37]];
const csv = rows.map((row) => row.join(',')).join('\n');
downloadFile('' + csv, 'scores.csv', 'text/csv');Файл с сервера
Чтобы скачать файл по адресу, достаточно ссылки с download. Для файла, полученного через fetch(), возьмите его Blob:
const response = await fetch('/api/reports/7.pdf');
const blob = await response.blob();
const url = URL.createObjectURL(blob);Частая ошибка
Каждый вызов URL.createObjectURL() держит данные в памяти до закрытия страницы. Вызывайте URL.revokeObjectURL(), когда адрес больше не нужен.
const url = URL.createObjectURL(blob);
link.href = url;
link.click();
URL.revokeObjectURL(url);Функции из этого ответа
- JSON.stringify — Преобразует значение в строку в формате JSON.