Я работал над проектом, в котором мне нужно было экспортировать файл CSV (значения, разделенные запятыми) с помощью JavaScript. Мне было лень, и я подумал, что смогу найти хороший пакет Node, который сделает большую часть работы за меня. Все пакеты Node, которые я нашел, казались очень мощными, с множеством опций, однако оказалось, что в них будет сложно разобраться.

Проблема с использованием пакета Node или, скажем, драгоценного камня в ruby, который является очень мощным, заключается в том, что если они не делают именно то, что вам нужно, вы можете потратить часы, если не дни, пытаясь понять, как заставить их работать на вас. В итоге я решил, что проще будет просто написать код самому.

У меня были данные, которые выглядели так в моем веб-приложении:

(Нет, это не мой биткойн-адрес — лол, это из списка самых богатых биткойн-адресов)

И я хотел, чтобы он выдавал что-то похожее на это при открытии в электронной таблице:

(Скриншоты из моего приложения CryptoChecker — https://www.1337ipjbp7u9mi9cdlngl3g5napum7twzm.com)

В моем случае у меня были данные, которые я хотел вывести в файл CSV в массиве объектов. Поскольку приложение является javascript, если пользователь закроет приложение, все данные будут потеряны. Общедоступные адреса довольно длинные, и их может быть сложно ввести в приложение, поэтому пользователь может захотеть сохранить эту информацию.

Я написал аналогичный код в React, Jquery и немного поработал с CSV в Ruby. Поэтому я сунул нос в точильный камень и принялся писать код. Я быстро понял, что ключевой проблемой будет инструмент управления файлами. В Ruby есть несколько отличных инструментов управления файлами, однако в Java Script это не так.

Несмотря на это, я нашел хороший Node-модуль, FileSaver.js (нажмите здесь, чтобы открыть страницу FileSaver npm), который сохраняет выходной файл в формате CSV и позволяет пользователю легко присвоить имя своему файлу. После установки модуля узла FileSaver и его импорта ключевая строка кода:

var blob = new Blob([csv], {type: "text/plain;charset=utf-8"});
  saveAs(blob, "yourcsv.csv");

Blob — это просто фрагмент данных, а название происходит от баз данных SQL и означает «Большой двоичный объект». Как видите, вы можете назвать файл (yourcsv.csv) и определить тип файла. Как только я заработаю, мне просто нужно привести свой массив объектов в правильный формат.

Я переписал свой фактический код, чтобы сделать этот пост более понятным для читателя. Я начинаю с простого массива объектов:

const arrayOfObjects = [{column1: "1", column2: "2", column3: "3"},{column1: 4, column2: 5, column3: 6}]

Отсюда код довольно прост для преобразования arrayOfObjects в csv:

arrayOfObjects.map((row) => {
csv += `\r\n ${row.column1}, ${row.column2}, ${row.column3}`
})

Обратите внимание, что \r\n - это возврат каретки + перевод строки. Это начинает новую строку. Если вы консольно регистрируете csv, вы получаете (если вы добавите ключи в качестве заголовков).

column1, column2, column3, 
1, 2, 3
4, 5, 6

Это именно то, что я хотел.

FileSaver.js работал отлично и загружал файл yourcsv.csv.

Вот суть кода на github (https://gist.github.com/1337ipJbP7U9mi9cdLngL3g5Napum7tWzM/fd9b8aafbba79dc76971e892c2c82ec0).

Чтобы предоставить вам код в формате, с которым вы могли бы легко поиграть, мне пришла в голову блестящая идея просто поместить этот пример кода в некоторые теги script внутри веб-страницы, а затем запустить его локально в браузере Chrome (обратите внимание, что ctr O позволяет вам чтобы открыть локальный файл). К сожалению, это затрудняло работу с Node-модулем FileSaver.js. Вы не можете использовать «Импорт» внутри тегов ‹script›.

В итоге мне пришлось зайти на страницу github для FileSaver.js (https://github.com/eligrey/FileSaver.js), скопировать файл FileSaver.js в папку dist и вставить его в новый файл в том же каталоге, что и мой код. Затем FileSaver.js импортируется с использованием тега script src= в строке 6, как показано ниже.

<script src="./filesaver.js"></script>

Вам также нужно будет сделать это, если вы хотите поиграть с кодом.

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

Удачного взлома