Вы можете сделать это в родном JavaScript. Вам придется проанализировать ваши данные в правильном формате CSV следующим образом (при условии, что вы используете массив массивов для своих данных, как описано в вопросе):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "\r\n";
});
или более короткий путь (используя функции стрелок ):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("\n");
Затем вы можете использовать JavaScript window.open
и encodeURI
функции для загрузки файла CSV следующим образом:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
Редактировать:
Если вы хотите дать своему файлу определенное имя, вам нужно сделать что-то немного по-другому, поскольку не поддерживается доступ к URI данных с помощью
window.open
метода. Для этого вы можете создать скрытый
<a>
узел DOM и установить его
download
атрибут следующим образом:
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
window.open
. Тем не менее, вы можете создать скрытую ссылку, у которой в качествеdownload
атрибута задано желаемое имя файла. Затем, нажав эту ссылку, вы скачаете файл с нужным вам именем, я добавлю его в свой ответ.document.body.appendChild(link);
чтобы получить полную поддержку в FF.data = [["Hello, world"]]
. Это выведет два столбца, когда он должен вывести один.encodeURIComponent()
функции или что-то? Я использую Chrome в качестве браузера.Основываясь на ответах выше, я создал эту функцию, которую я протестировал в IE 11, Chrome 36 и Firefox 29
Например: https://jsfiddle.net/jossef/m3rrLzk0/
источник
window.open
вelse
оlink.download !== undefined
.link.style.visibility='hidden'
. B / c атрибут DOM доступен только для чтения. Более подробную информацию можно найти в updates.html5rocks.com/2015/04/… в разделе «Запись в свойства только для чтения в строгом режиме приведет к ошибке»Это решение должно работать с Internet Explorer 10+, Edge, старой и новой версиями Chrome, FireFox, Safari, ++
Принятый ответ не будет работать с IE и Safari.
Выполнение фрагмента кода загрузит фиктивные данные как csv
Кредиты дандавису https://stackoverflow.com/a/16377813/1350598
источник
setTimeout
.iframe
раздел может быть заменен просто location.href = ...URL.createObjectURL
(заканчиваетсяURL
неUrl
).Я пришел сюда в поисках большего соответствия RFC 4180, и мне не удалось найти реализацию, поэтому я сделал (возможно, неэффективную) для своих собственных нужд. Я думал, что поделюсь этим со всеми.
Надеюсь, это поможет кому-то в будущем. Это сочетает в себе как кодировку CSV, так и возможность загрузки файла. В моем примере на jsfiddle . Вы можете скачать файл (в предположении браузера HTML 5) или просмотреть вывод в консоли.
ОБНОВИТЬ:
Теперь кажется, что Chrome утратил способность называть файл. Я не уверен, что случилось или как это исправить, но всякий раз, когда я использую этот код (включая jsfiddle), загруженный файл теперь называется
download.csv
.источник
Решение от @Default отлично работает на Chrome (большое спасибо за это!), Но у меня была проблема с IE.
Вот решение (работает на IE10):
источник
В обновлении Chrome 35 поведение атрибута загрузки было изменено.
https://code.google.com/p/chromium/issues/detail?id=373182
чтобы работать в Chrome, используйте это
источник
Работаем на всех языках
источник
Там вы идете:
источник
Люди пытаются создать свою собственную строку CSV, которая терпит неудачу в крайних случаях, например, специальные символы и тому подобное, конечно, это решаемая проблема, верно?
papaparse - использовать для кодирования JSON в CSV.
Papa.unparse()
,Пример использования
https://github.com/mholt/PapaParse/issues/175 - см. этот комментарий для обсуждения поддержки браузера.
источник
Вы можете использовать приведенный ниже фрагмент кода для экспорта массива в файл CSV с использованием Javascript.
Это обрабатывает часть специальных символов, а также
Вот ссылка на работающий jsfiddle
источник
источник
Создать BLOB-объект с данными CSV .ie
var blob = new Blob([data], type:"text/csv");
Если браузер поддерживает сохранение больших двоичных объектов, т.е.
if window.navigator.mSaveOrOpenBlob)===true
сохраните данные в формате csv, используя:window.navigator.msSaveBlob(blob, 'filename.csv')
Если браузер не поддерживает сохранение и открытие BLOB-объектов, сохраните данные CSV как:
Полный фрагмент кода:
источник
Здесь есть два вопроса:
Все ответы на первый вопрос (кроме вопроса Милиметрика) здесь кажутся излишними. И тот, что Milimetric, не покрывает альтренативные требования, такие как окружающие строки с кавычками или преобразование массивов объектов.
Вот мои взгляды на это:
Для простого csv достаточно одной map () и join ():
Этот метод также позволяет указывать разделитель столбцов, отличный от запятой, во внутреннем соединении. например вкладка:
d.join('\t')
С другой стороны, если вы хотите сделать это правильно и заключить строки в кавычки "", то вы можете использовать магию JSON:
если у вас есть массив объектов, таких как:
источник
.replace
следует указывать фигурные и квадратные скобки..replace
делается на возвращаемой строке,values()
которая принимает объект и возвращает массив значенийvalues()
Метод не был найден , когда я попробовал ваш код.values()
явного вызоваObject
. Я исправил пример.Здесь есть много собственных решений для преобразования данных в CSV, но почти все они будут иметь различные предостережения в отношении типа данных, которые они будут правильно форматировать, не запуская Excel или подобные.
Почему бы не использовать что-то проверенное: Papa Parse
Тогда просто объедините это с одним из локальных решений загрузки здесь, например. тот, что @ArneHB выглядит хорошо.
источник
Функция одной стрелки с ES6:
Затем :
На случай, если это кому-то понадобится reactjs,
react-csv
Есть для этогоисточник
react-csv
Библиотека работает как шарм. Отличное решение для тех, кто использует модули.Вот как я загружаю файлы CSV на стороне клиента в моем приложении Java GWT. Отдельное спасибо Ксавье Джону за его решение. Проверено, что он работает в FF 24.6.0, IE 11.0.20 и Chrome 45.0.2454.99 (64-разрядная версия). Я надеюсь, что это сэкономит кому-то немного времени:
источник
Ниже приведено нативное решение для js.
источник
Вот угловая дружественная версия:
источник
Ответы выше работают, но имейте в виду, что если вы открываете в формате .xls, столбцы ~~ могут быть разделены ~~
'\t'
вместо','
, ответ https://stackoverflow.com/a/14966131/6169225 работал хорошо для меня, пока я использовал.join('\t')
на массивах вместо.join(',')
.источник
Я использую эту функцию для преобразования
string[][]
в файл CSV. Он заключает в кавычки ячейку, если она содержит пробел"
, a,
или другой пробел (кроме пробелов):Примечание : не работает в Internet Explorer <11, если
map
не заполнен.Примечание . Если ячейки содержат числа, вы можете добавить их
cell=''+cell
передif (cell.replace...
тем, как преобразовать числа в строки.Или вы можете написать это в одну строку, используя ES6:
источник
Я бы рекомендовал использовать такую библиотеку, как PapaParse: https://github.com/mholt/PapaParse
Принятый ответ в настоящее время имеет несколько проблем, включая:
источник
Просто попробуйте это, некоторые ответы здесь не обрабатывают данные Unicode и данные, которые имеют запятую, например, дату.
источник
Скачать файл CSV
источник
В случае, если кому-то это нужно для нокаута js, он работает в основном с предложенным решением:
HTML:
посмотреть модель:
источник
Я добавил в функцию Ксавье Джонса, чтобы при необходимости также включать заголовки полей, хотя использует jQuery. Бит $ .each нужно будет изменить для нативного цикла javascript
источник
Это модифицированный ответ, основанный на принятом ответе, в котором данные будут поступать из JSON.
источник
Если вы ищете действительно быстрое решение, вы также можете дать шанс этой небольшой библиотеке, которая создаст и загрузит CSV-файл для вас: https://github.com/mbrn/filefy
Использование очень просто:
источник