Иногда мы можем позволить пользователям загружать вложенный массив с данными в виде текстового файла CSV.

В этой статье мы рассмотрим, как разрешить пользователям загружать данные массива JavaScript в виде CSV на стороне клиента.

Использование метода window.open

Мы можем использовать метод window.open, чтобы открыть строку в кодировке URL, чтобы пользователи могли загрузить ее на свой компьютер.

Например, мы можем написать:

const rows = [
  ["name1", "new york", "abc"],
  ["name2", "san francisco", "def"]
];
let csvContent = "data:text/csv;charset=utf-8,";
for (const rowArray of rows) {
  const row = rowArray.join(",");
  csvContent += `${row}\r\n`;
}
const encodedUri = encodeURI(csvContent);
window.open(encodedUri);

У нас есть вложенный массив rows, который мы хотим преобразовать в строку CSV и позволить пользователям загружать его.

Чтобы выполнить преобразование, мы сначала определяем начало строки csvContent, которая определяет тип MIME и набор символов.

Затем мы перебираем rows записи, объединяем записи каждой строки и добавляем их к csvContent строке с символами новой строки.

Затем мы вызываем encodeURI со строкой csvContent, чтобы закодировать ее в строку с кодировкой URL.

И, наконец, мы можем загрузить строку в виде файла с window.open.

Мы также можем сократить for-of с помощью метода map:

const rows = [
  ["name1", "new york", "abc"],
  ["name2", "san francisco", "def"]
];
const csvContent = `data:text/csv;charset=utf-8,${rows
  .map((e) => e.join(","))
  .join("\n")}`;
const encodedUri = encodeURI(csvContent);
window.open(encodedUri);

Мы просто вызываем map на rows, чтобы сопоставить каждую строку с разделенной запятыми строкой с join.

Затем мы вызываем join для сопоставленных строк.

Загрузка файла таким образом не позволяет нам указывать имя файла.

Чтобы задать имя файла, мы можем создать невидимую ссылку и программно щелкнуть по ней.

Для этого мы:

const rows = [
  ["name1", "new york", "abc"],
  ["name2", "san francisco", "def"]
];
const csvContent = `data:text/csv;charset=utf-8,${rows
  .map((e) => e.join(","))
  .join("\n")}`;
const encodedUri = encodeURI(csvContent);
const link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "data.csv");
document.body.appendChild(link);
link.click()

Мы вызываем createElement, чтобы создать элемент a.

Затем мы устанавливаем href на encodedUri.

Затем мы устанавливаем атрибут download для имени файла с setAttribute.

Затем мы вызываем appendChild с link, чтобы прикрепить его к телу.

Затем мы вызываем click, чтобы щелкнуть по нему, чтобы начать загрузку.

Сохраните данные как Blob

Мы можем сохранить данные в виде большого двоичного объекта, переписав приведенный выше пример.

Например, мы можем написать:

const rows = [
  ["name1", "new york", "abc"],
  ["name2", "san francisco", "def"]
];
const csvContent = rows
  .map((e) => e.join(","))
  .join("\n");
const blob = new Blob([csvContent], {
  type: 'text/csv;charset=utf-8;'
});
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.setAttribute("href", url);
link.setAttribute("download", "data.csv");
document.body.appendChild(link);
link.click()
URL.revokeObjectURL(link.href)

У нас есть строка csvContent, которая содержит только строку CSV.

Затем мы создаем из него большой двоичный объект с помощью конструктора Blob.

Во втором аргументе мы устанавливаем type на тип данных большого двоичного объекта.

Затем мы вызываем URL.createObjectURL, чтобы создать закодированный URL-адрес, который мы можем загрузить.

И мы создаем элемент ссылки так же, как и раньше, но вместо этого url создан из URL.createObjectURL.

Кроме того, мы должны позвонить URL.revokeObjectURL, чтобы освободить ресурсы после завершения загрузки.

Заключение

Мы можем позволить генерировать CSV-файлы из вложенных массивов на стороне клиента и позволить пользователям загружать их с помощью некоторого кода JavaScript.

Больше контента на plainenglish.io