Экспорт списка в HTML в JavaScript
Доброго времени суток! Сегодня мы рассмотрим с Вами как можно конвертировать список в HTML таблицу в JavaScript.
Код:
/**
* list - список или массив объектов строк
* columns - колонки, которые должны попасть в экспортируемую таблицу
*/
function list2Html(list, columns)
{
if(0 === list.length)
throw new Error("Нечего экспортировать!");
// функция, которая создает html-код из данных
const html = (headers, rows) => {
const th = headers.map(el => `<th>${el}</th> `).join('');
const trows = rows.map(row => row.map(col => `<td>${col}</td>`).join(''));
return `
<table border="1" style="text-align: center">
<thead>
<tr>${th}</tr>
</thead>
<tbody>
${trows.map(trow => `<tr>${trow}</tr>`).join('')}
</tbody>
</table>
`;
}
const rows = []
/**
* Так как, список у нас состоит из объектов, у которых есть определенные свойства
*
*/
for (const item of list)
{
// мы создаем новый объект, которому добавляем свойства из параметра columns
// чтобы у всех строк было похожее количество столбцов, даже если столбцы пустые
const obj = columns.reduce((result, item) => {
result[item] = "";
return result;
}, {});
// проходимся по каждому свойству объекта, и смотрим есть ли у него такое же свойство
// как и в списке columns, если нет, то значит этот столбец в экспортируемой таблице не нужен
for (const column in item)
{
if(columns.includes(column))
{
obj[column] = item[column];
}
}
// оставляем только значения из объекта
rows.push(Object.values(obj));
}
// формируем и возвращаем html
return html(columns, rows);
}
При нажатии на кнопу экспорта — создаем таблицу и отдаем на загрузке браузеру
function downloadFile(data="", fileName="test.txt", type="text/plain;charset=UTF-8") {
// создаем невидимый элемент ссылки
const a = document.createElement("a");
a.style.display = "none";
document.body.appendChild(a);
// в качестве данных для загрузки из ссылки устанавливаем данные из формы
a.href = window.URL.createObjectURL(
new Blob([data], { type })
);
// атрибут download ссылки используется для загрузки файла
a.setAttribute("download", fileName);
// запускаем загрузку путем эмулирования нажатия клавиши
a.click();
// удаляем ссылку из DOM
document.body.removeChild(a);
}
function exportQuestions()
{
const questions = ...; // данные пришли от API, например, и уже находятся на стороне браузера
const data = list2Html(this.questions, ['title', 'type', 'theme', 'content', 'solution']);
downloadFile(data, `questions_${Date.now()}.html`,'text/html');
return true;
},
Вот таким образом можно экспортировать данные из браузера в HTML с помощью JavaScript.
