Генерация электронной таблицы в JS

Часто бывают ситуации, когда JS приложение должно вывести какие-то данные, с которыми затем пользователю будет удобно работать в Excel (ну или OpenOffice). Это легко реализовать, путём генерации файла прямо в JS коде. Только для этого стоит использовать не обычный формат XLS/XLSX — эти форматы слишком сложны в реализации.

Гораздо проще сгенерировать файл в формате CSV. Этот формат предельно простой. Каждая строка в файле будет строкой в таблице. При этом значения полей должны быть перечислены через запятую.

Id статьи, Число просмотров
323, 156
324, 489
325, 387

При открытии такого файла в Excel или OpenOffice он будет отображаться, как обычная таблица.

Допустим, изначально у нас есть эти данные в виде объектов:

const viewsData = [
  {
    articleId: 323,
    views: 489
  },
  {
    articleId: 324,
    views: 156
  },
  {
    articleId: 325,
    views: 387
  }
]

Для преобразования этих данных в формат CSV можно использовать функцию map:

const csvContent = viewsData.map((dataItem) => {
  return `${dataItem.articleId},${dataItem.views}`
}).join('\n')

Теперь добавим заголовки колонок

const csvFullContent = `Id статьи, Число просмотров,\n${csvContent}`

Для того, чтобы пользователь мог скачать эту строку, как файл, создадим на странице тег <a>, где в качестве href укажем data-url:

const link = document.createElement('a')
link.href = `data:text/csv;charset=utf-8,${csvFullContent}`
link.textContent = 'Загрузить таблицу'
document.querySelector('body').appendChild(link)