Я работал над проектом, в котором мне нужно было экспортировать файл 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-файл, однако этого вполне достаточно для инди-хакера. Если вы знаете лучший способ, дайте мне знать в комментариях.
Удачного взлома