Иногда мы можем позволить пользователям загружать вложенный массив с данными в виде текстового файла 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