Как управлять DOM на чистом JavaScript?
Управление DOM с помощью JavaScript в современных браузерах и IE 11+
Предположим, что у нас есть элемент table и button для экспорта ячеек таблицы в CSV следующим образом:
<table id="exportMe" class="table">
...
</table>
<button id="export">Export</button>
Экспорт ячеек таблицы в CSV
Функция ниже экспортирует все ячейки table в формат CSV. Сначала мы выбираем все строки, зацикливаемся над ними и экспортируем каждую строку в CSV.
В каждом ряду мы проходим все ячейки и извлекаем их текстовое содержимое.
const toCsv = function(table) {
// Query all rows
const rows = table.querySelectorAll('tr');
return [].slice.call(rows)
.map(function(row) {
// Query all cells
const cells = row.querySelectorAll('th,td');
return [].slice.call(cells)
.map(function(cell) {
return cell.textContent;
})
.join(',');
})
.join('\n');
};
Скачать CSV
Приведенная ниже функция создает поддельный элемент, содержимое которого вызывает событие click. Для получения дополнительной информации, вы можете посетить пост Загрузить файл.
const download = function(text, fileName) {
const link = document.createElement('a');
link.setAttribute('href', `data:text/csv;charset=utf-8,${encodeURIComponent(text)}`);
link.setAttribute('download', fileName);
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
Последнее, что нужно, это соединить все части вместе. Нам просто нужно справиться с событием click экспорта кнопки:
const table = document.getElementById('exportMe');
const exportBtn = document.getElementById('export');
exportBtn.addEventListener('click', function() {
// Export to csv
const csv = toCsv(table);
// Download it
download(csv, 'download.csv');
});
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться