Как экспортировать информацию массива JavaScript в csv (на стороне клиента)?

515

Я знаю, что есть много вопросов такого рода, но мне нужно сделать это с помощью JavaScript. Я использую Dojo 1.8и имею всю информацию атрибута в массиве, который выглядит так:

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

Любая идея, как я могу экспортировать это CSVна стороне клиента?

Sam007
источник

Ответы:

838

Вы можете сделать это в родном 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".
По умолчанию
источник
4
Из того, что я знаю, нет способа сделать это, используя window.open. Тем не менее, вы можете создать скрытую ссылку, у которой в качестве downloadатрибута задано желаемое имя файла. Затем, нажав эту ссылку, вы скачаете файл с нужным вам именем, я добавлю его в свой ответ.
умолчанию
14
Я должен был добавить, document.body.appendChild(link);чтобы получить полную поддержку в FF.
Hardbyte
9
Этот ответ неверен: он потерпит неудачу для дела data = [["Hello, world"]]. Это выведет два столбца, когда он должен вывести один.
Аредридель
18
Это хорошо работает для ~ 7000 строк. Но начинает выдавать эту ошибку: NETWORK_INVALID_REQUEST . Кто-нибудь еще сталкивается с этой проблемой? Есть ли верхний предел данных о encodeURIComponent()функции или что-то? Я использую Chrome в качестве браузера.
Абидемон
13
@Abhidemon Ответ: вы должны использовать тип BLOB-объекта для чего-то такого большого, тогда он будет работать нормально, например: blob = new Blob ([csvContent], {type: "text / csv"}); href = window.URL.createObjectURL (blob); Более подробная информация: stackoverflow.com/a/19328891/1854079
mdubez
258

Основываясь на ответах выше, я создал эту функцию, которую я протестировал в IE 11, Chrome 36 и Firefox 29

function exportToCsv(filename, rows) {
    var processRow = function (row) {
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0)
                result = '"' + result + '"';
            if (j > 0)
                finalVal += ',';
            finalVal += result;
        }
        return finalVal + '\n';
    };

    var csvFile = '';
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }

    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}

Например: https://jsfiddle.net/jossef/m3rrLzk0/

Ксавье Джон
источник
6
Может отступить window.openв elseо link.download !== undefined.
MrYellow
2
Это хороший кусок кода. Есть ли шанс, что вы захотите лицензировать это под чем-то более либеральным, чем SO-дефолт CC-BY-SA? Например, CC0, MIT, BSD, Apache, X11. , , meta.stackexchange.com/questions/12527/…
joseph_morris
1
Я использовал этот метод для реализации экспорта в Excel в некоторых веб-приложениях. Но теперь Chrome 43+ перенес атрибуты DOM в цепочку прототипов. Исключение брошено в link.style.visibility='hidden'. B / c атрибут DOM доступен только для чтения. Более подробную информацию можно найти в updates.html5rocks.com/2015/04/… в разделе «Запись в свойства только для чтения в строгом режиме приведет к ошибке»
Blaise
1
Этот ответ пока самый лучший. Он включает в себя случаи со специальными символами и скобками.
Владимир Костов
2
Я использовал раздел загрузки этого ответа, и он хорошо работал на Chrome, спасибо!
Лиран Х
77

Это решение должно работать с Internet Explorer 10+, Edge, старой и новой версиями Chrome, FireFox, Safari, ++

Принятый ответ не будет работать с IE и Safari.

// Example data given in question text
var data = [
  ['name1', 'city1', 'some other info'],
  ['name2', 'city2', 'more info']
];

// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent = '';
data.forEach(function(infoArray, index) {
  dataString = infoArray.join(';');
  csvContent += index < data.length ? dataString + '\n' : dataString;
});

// The download function takes a CSV string, the filename and mimeType as parameters
// Scroll/look down at the bottom of this snippet to see how download is called
var download = function(content, fileName, mimeType) {
  var a = document.createElement('a');
  mimeType = mimeType || 'application/octet-stream';

  if (navigator.msSaveBlob) { // IE10
    navigator.msSaveBlob(new Blob([content], {
      type: mimeType
    }), fileName);
  } else if (URL && 'download' in a) { //html5 A[download]
    a.href = URL.createObjectURL(new Blob([content], {
      type: mimeType
    }));
    a.setAttribute('download', fileName);
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  } else {
    location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
  }
}

download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');

Выполнение фрагмента кода загрузит фиктивные данные как csv

Кредиты дандавису https://stackoverflow.com/a/16377813/1350598

Арне Х. Битубекк
источник
1
(По крайней мере, код HTML5) работает без setTimeout.
StubbornShowaGuy
@StubbornShowaGuy круто, тогда я удалю setTimeout из примера кода :)
Арне Х. Битубекк
Работает в последних версиях Chrome, IE и Firefox. Спасибо!
Уолла
Единственное по-настоящему кросс-браузерное решение здесь. Обратите внимание, что он работает в Safari 10.10 и мобильном Safari. Тем не менее, iframeраздел может быть заменен просто location.href = ...
Дан
2
Примечание: в функции есть опечатка, это на самом деле URL.createObjectURL(заканчивается URLне Url).
Натан
35

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

var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];

var finalVal = '';

for (var i = 0; i < content.length; i++) {
    var value = content[i];

    for (var j = 0; j < value.length; j++) {
        var innerValue =  value[j]===null?'':value[j].toString();
        var result = innerValue.replace(/"/g, '""');
        if (result.search(/("|,|\n)/g) >= 0)
            result = '"' + result + '"';
        if (j > 0)
            finalVal += ',';
        finalVal += result;
    }

    finalVal += '\n';
}

console.log(finalVal);

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');

Надеюсь, это поможет кому-то в будущем. Это сочетает в себе как кодировку CSV, так и возможность загрузки файла. В моем примере на jsfiddle . Вы можете скачать файл (в предположении браузера HTML 5) или просмотреть вывод в консоли.

ОБНОВИТЬ:

Теперь кажется, что Chrome утратил способность называть файл. Я не уверен, что случилось или как это исправить, но всякий раз, когда я использую этот код (включая jsfiddle), загруженный файл теперь называется download.csv.

Uxonith
источник
Хороший улов Крис, я не проверял это с числовыми данными :)
Uxonith
Я не знаю, является ли последняя нулевая проверка ожидаемым поведением. Null сильно отличается от пустой строки. Если бы это было реализовано, я бы порекомендовал пользовательское нулевое значение (например: '[[NULL]]'). Может также потребоваться исключение для неопределенного, но я бы порекомендовал не заменять ноль пустой строкой.
Уксонит
Я тестировал и обнаружил, что вы правы. Это похоже на работу в Chrome и Opera. Safari просто открывает страницу с контентом. Internet Explorer ... ну это IE. Для моей ситуации я собираюсь сгенерировать свою серверную часть CSV и обслуживать ее таким образом, к сожалению.
Уксонит
33

Решение от @Default отлично работает на Chrome (большое спасибо за это!), Но у меня была проблема с IE.

Вот решение (работает на IE10):

var csvContent=data; //here we load our csv data 
var blob = new Blob([csvContent],{
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv")
Dzarek
источник
23

В обновлении Chrome 35 поведение атрибута загрузки было изменено.

https://code.google.com/p/chromium/issues/detail?id=373182

чтобы работать в Chrome, используйте это

var pom = document.createElement('a');
var csvContent=csv; //here we load our csv data 
var blob = new Blob([csvContent],{type: 'text/csv;charset=utf-8;'});
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'foo.csv');
pom.click();
Памятник погибшим
источник
1
Вы также можете проверить это: github.com/mholt/PapaParse/issues/175#issuecomment-201308792
Габриэль
Это правильный ответ на данный момент, а не помеченный как принятый!
мяу
17

Работаем на всех языках

        function convertToCsv(fName, rows) {
        var csv = '';
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            for (var j = 0; j < row.length; j++) {
                var val = row[j] === null ? '' : row[j].toString();
                val = val.replace(/\t/gi, " ");
                if (j > 0)
                    csv += '\t';
                csv += val;
            }
            csv += '\n';
        }

        // for UTF-16
        var cCode, bArr = [];
        bArr.push(255, 254);
        for (var i = 0; i < csv.length; ++i) {
            cCode = csv.charCodeAt(i);
            bArr.push(cCode & 0xff);
            bArr.push(cCode / 256 >>> 0);
        }

        var blob = new Blob([new Uint8Array(bArr)], { type: 'text/csv;charset=UTF-16LE;' });
        if (navigator.msSaveBlob) {
            navigator.msSaveBlob(blob, fName);
        } else {
            var link = document.createElement("a");
            if (link.download !== undefined) {
                var url = window.URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", fName);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            }
        }
    }



    convertToCsv('download.csv', [
        ['Order', 'Language'],
        ['1', 'English'],
        ['2', 'Español'],
        ['3', 'Français'],
        ['4', 'Português'],
        ['5', 'čeština'],
        ['6', 'Slovenščina'],
        ['7', 'Tiếng Việt'],
        ['8', 'Türkçe'],
        ['9', 'Norsk bokmål'],
        ['10', 'Ελληνικά'],
        ['11', 'беларускі'],
        ['12', 'русский'],
        ['13', 'Українська'],
        ['14', 'հայերեն'],
        ['15', 'עִברִית'],
        ['16', 'اردو'],
        ['17', 'नेपाली'],
        ['18', 'हिंदी'],
        ['19', 'ไทย'],
        ['20', 'ქართული'],
        ['21', '中国'],
        ['22', '한국어'],
        ['23', '日本語'],
    ])
Сердар Дидан
источник
Впечатляет! (+1). Добро пожаловать в StackOverflow, приятель!
Ранн Лифшиц
Не могли бы вы помочь мне понять, что это за кодовый блок UTF-16 и для чего здесь используется?
Mar1009
Привет, Mar1009. Это требуется для некоторых языков. Например, кириллица.
Сердар Дидан
13

Там вы идете:

<!doctype html>  
<html>  
<head></head>  
<body>
<a href='#' onclick='downloadCSV({ filename: "stock-data.csv" });'>Download CSV</a>

<script type="text/javascript">  
    var stockData = [
        {
            Symbol: "AAPL",
            Company: "Apple Inc.",
            Price: "132.54"
        },
        {
            Symbol: "INTC",
            Company: "Intel Corporation",
            Price: "33.45"
        },
        {
            Symbol: "GOOG",
            Company: "Google Inc",
            Price: "554.52"
        },
    ];

    function convertArrayOfObjectsToCSV(args) {
        var result, ctr, keys, columnDelimiter, lineDelimiter, data;

        data = args.data || null;
        if (data == null || !data.length) {
            return null;
        }

        columnDelimiter = args.columnDelimiter || ',';
        lineDelimiter = args.lineDelimiter || '\n';

        keys = Object.keys(data[0]);

        result = '';
        result += keys.join(columnDelimiter);
        result += lineDelimiter;

        data.forEach(function(item) {
            ctr = 0;
            keys.forEach(function(key) {
                if (ctr > 0) result += columnDelimiter;

                result += item[key];
                ctr++;
            });
            result += lineDelimiter;
        });

        return result;
    }

    window.downloadCSV = function(args) {
        var data, filename, link;

        var csv = convertArrayOfObjectsToCSV({
            data: stockData
        });
        if (csv == null) return;

        filename = args.filename || 'export.csv';

        if (!csv.match(/^data:text\/csv/i)) {
            csv = 'data:text/csv;charset=utf-8,' + csv;
        }
        data = encodeURI(csv);

        link = document.createElement('a');
        link.setAttribute('href', data);
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
       }
</script>  
</body>  
</html>  
Мадхулика Мукерджи
источник
1
Потрясающий ответ. Я одобряю этот, поскольку принятый ответ по какой-то причине помещает все в один столбец. Это разбивает все на отдельные столбцы, и поддержка формата данных, подобного JSON, невероятно полезна.
Hoser
Это работает, когда ссылка сначала добавляется в тело документа, а затем вызывается щелчок. И тогда он удаляется из дома.
Джей
1
Хороший ответ, единственным недостатком является то, что он не работает должным образом, когда данные имеют разделитель столбцов "," т.е. Адрес: '10 полоса бесконечного цикла, комната 56 ', обратите внимание на запятую после полосы. Я предлагаю вам использовать ссылку PapaParse для преобразования данных в CSV, а затем использовать вышеуказанный метод downloadCSV для загрузки фактического файла
phil
Это прекрасно работает для меня. Просто есть одна проблема, у меня есть некоторые числа в массиве, такие как «000002342», но при экспорте в CSV, ведущие нули удаляются. Есть ли способ предотвратить это?
Акарш Дхаван,
13

Люди пытаются создать свою собственную строку CSV, которая терпит неудачу в крайних случаях, например, специальные символы и тому подобное, конечно, это решаемая проблема, верно?

papaparse - использовать для кодирования JSON в CSV. Papa.unparse(),

import Papa from "papaparse";

const downloadCSV = (args) => {  

  let filename = args.filename || 'export.csv';
  let columns = args.columns || null;

  let csv = Papa.unparse({ data: args.data, fields: columns})
  if (csv == null) return;

  var blob = new Blob([csv]);
  if (window.navigator.msSaveOrOpenBlob)  // IE hack; see http://msdn.microsoft.com/en-us/library/ie/hh779016.aspx
      window.navigator.msSaveBlob(blob, args.filename);
  else
  {
      var a = window.document.createElement("a");
      a.href = window.URL.createObjectURL(blob, {type: "text/plain"});
      a.download = filename;
      document.body.appendChild(a);
      a.click();  // IE: "Access is denied"; see: https://connect.microsoft.com/IE/feedback/details/797361/ie-10-treats-blob-url-as-cross-origin-and-denies-access
      document.body.removeChild(a);
  }

}

Пример использования

downloadCSV({ 
  filename: 'filename.csv',
  data: [{'a': '1', 'b': 2'}],
  columns: ['a','b']
});

https://github.com/mholt/PapaParse/issues/175 - см. этот комментарий для обсуждения поддержки браузера.

Глен Томпсон
источник
10

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

Это обрабатывает часть специальных символов, а также

var arrayContent = [["Séjour 1, é,í,ú,ü,ű"],["Séjour 2, é,í,ú,ü,ű"]];
var csvContent = arrayContent.join("\n");
var link = window.document.createElement("a");
link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURI(csvContent));
link.setAttribute("download", "upload_data.csv");
link.click(); 

Вот ссылка на работающий jsfiddle

Виньеш Субраманян
источник
1
Лучший ответ для специальных персонажей
Алехандро
# (хэштег) не работает!
Накрес
не работает в Internet Explorer
Даниал
7
//It work in Chrome and IE ... I reviewed and readed a lot of answer. then i used it and tested in both ... 

var link = document.createElement("a");

if (link.download !== undefined) { // feature detection
    // Browsers that support HTML5 download attribute
    var blob = new Blob([CSV], { type: 'text/csv;charset=utf-8;' });
    var url = URL.createObjectURL(blob);            
    link.setAttribute("href", url);
    link.setAttribute("download", fileName);
    link.style = "visibility:hidden";
}

if (navigator.msSaveBlob) { // IE 10+
   link.addEventListener("click", function (event) {
     var blob = new Blob([CSV], {
       "type": "text/csv;charset=utf-8;"
     });
   navigator.msSaveBlob(blob, fileName);
  }, false);
}

document.body.appendChild(link);
link.click();
document.body.removeChild(link);

//Regards
Маури
источник
6

Создать 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 как:

var downloadLink = document.createElement('<a></a>');
downloadLink.attr('href', window.URL.createObjectURL(blob));
downloadLink.attr('download', filename);
downloadLink.attr('target', '_blank');
document.body.append(downloadLink);

Полный фрагмент кода:

var filename = 'data_'+(new Date()).getTime()+'.csv';
var charset = "utf-8";
var blob = new Blob([data], {
     type: "text/csv;charset="+ charset + ";"
});
if (window.navigator.msSaveOrOpenBlob) {
     window.navigator.msSaveBlob(blob, filename);
} else {
    var downloadLink = document.element('<a></a>');
    downloadLink.attr('href', window.URL.createObjectURL(blob));
    downloadLink.attr('download', filename);
    downloadLink.attr('target', '_blank');  
    document.body.append(downloadLink); 
    downloadLink[0].click(); 
}
Liyosi
источник
5

Здесь есть два вопроса:

  1. Как преобразовать массив в строку CSV
  2. Как сохранить эту строку в файл

Все ответы на первый вопрос (кроме вопроса Милиметрика) здесь кажутся излишними. И тот, что Milimetric, не покрывает альтренативные требования, такие как окружающие строки с кавычками или преобразование массивов объектов.

Вот мои взгляды на это:

Для простого csv достаточно одной map () и join ():

    var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];
    var csv = test_array.map(function(d){
        return d.join();
    }).join('\n');

    /* Results in 
    name1,2,3
    name2,4,5
    name3,6,7
    name4,8,9
    name5,10,11

Этот метод также позволяет указывать разделитель столбцов, отличный от запятой, во внутреннем соединении. например вкладка:d.join('\t')

С другой стороны, если вы хотите сделать это правильно и заключить строки в кавычки "", то вы можете использовать магию JSON:

var csv = test_array.map(function(d){
       return JSON.stringify(d);
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, ''); // remove opening [ and closing ]
                                   // brackets from each line 

/* would produce
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11

если у вас есть массив объектов, таких как:

var data = [
  {"title": "Book title 1", "author": "Name1 Surname1"},
  {"title": "Book title 2", "author": "Name2 Surname2"},
  {"title": "Book title 3", "author": "Name3 Surname3"},
  {"title": "Book title 4", "author": "Name4 Surname4"}
];

// use
var csv = data.map(function(d){
        return JSON.stringify(Object.values(d));
    })
    .join('\n') 
    .replace(/(^\[)|(\]$)/mg, '');
Константин
источник
Если я не ошибаюсь, я считаю, что .replaceследует указывать фигурные и квадратные скобки.
aaronbartell
.replaceделается на возвращаемой строке, values()которая принимает объект и возвращает массив значений
Константин
values()Метод не был найден , когда я попробовал ваш код.
aaronbartell
Спасибо! В Chrome он работает без values()явного вызова Object. Я исправил пример.
Константин
5

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

Почему бы не использовать что-то проверенное: Papa Parse

Papa.unparse(data[, config])

Тогда просто объедините это с одним из локальных решений загрузки здесь, например. тот, что @ArneHB выглядит хорошо.

Джон Рикс
источник
4

Функция одной стрелки с ES6:

const dataToCsvURI = (data) => encodeURI(
`data:text/csv;charset=utf-8,${data.map((row, index) =>  row.join(',')).join(`\n`)}`
);

Затем :

window.open(
  dataToCsvURI(
   [["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
  )
);

На случай, если это кому-то понадобится , react-csvЕсть для этого

Абденнур ТУМИ
источник
3
react-csvБиблиотека работает как шарм. Отличное решение для тех, кто использует модули.
Мэтт Паррилья
Это не соответствует случаю, когда внутри файла CSV есть поля с запятыми внутри.
unpollito
2

Вот как я загружаю файлы CSV на стороне клиента в моем приложении Java GWT. Отдельное спасибо Ксавье Джону за его решение. Проверено, что он работает в FF 24.6.0, IE 11.0.20 и Chrome 45.0.2454.99 (64-разрядная версия). Я надеюсь, что это сэкономит кому-то немного времени:

public class ExportFile 
{

    private static final String CRLF = "\r\n";

    public static void exportAsCsv(String filename, List<List<String>> data) 
    {
        StringBuilder sb = new StringBuilder();
        for(List<String> row : data) 
        {
            for(int i=0; i<row.size(); i++)
            {
                if(i>0) sb.append(",");
                sb.append(row.get(i));
            }
            sb.append(CRLF);
        }

        generateCsv(filename, sb.toString());
    }

    private static native void generateCsv(String filename, String text)
    /*-{
        var blob = new Blob([text], { type: 'text/csv;charset=utf-8;' });

        if (navigator.msSaveBlob) // IE 10+
        { 
            navigator.msSaveBlob(blob, filename);
        } 
        else 
        {
            var link = document.createElement("a");
            if (link.download !== undefined) // feature detection
            { 
                // Browsers that support HTML5 download attribute
                var url = URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", filename);
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
    }-*/;
}
Джастин стейн
источник
2

Ниже приведено нативное решение для js.

function export2csv() {
  let data = "";
  const tableData = [];
  const rows = [
    ['111', '222', '333'],
    ['aaa', 'bbb', 'ccc'],
    ['AAA', 'BBB', 'CCC']
  ];
  for (const row of rows) {
    const rowData = [];
    for (const column of row) {
      rowData.push(column);
    }
    tableData.push(rowData.join(","));
  }
  data += tableData.join("\n");
  const a = document.createElement("a");
  a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
  a.setAttribute("download", "data.csv");
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}
<button onclick="export2csv()">Export array to csv file</button>

dabeng
источник
работал отлично для меня. Спасибо!
Шриджани Гош
1

Вот угловая дружественная версия:

  constructor(private location: Location, private renderer: Renderer2) {}

  download(content, fileName, mimeType) {

    const a = this.renderer.createElement('a');

    mimeType = mimeType || 'application/octet-stream';

    if (navigator.msSaveBlob) {

      navigator.msSaveBlob(new Blob([content], {
        type: mimeType
      }), fileName);
    }
    else if (URL && 'download' in a) {

      const id = GetUniqueID();

      this.renderer.setAttribute(a, 'id', id);
      this.renderer.setAttribute(a, 'href', URL.createObjectURL(new Blob([content], {
        type: mimeType
      })));

      this.renderer.setAttribute(a, 'download', fileName);

      this.renderer.appendChild(document.body, a);

      const anchor = this.renderer.selectRootElement(`#${id}`);

      anchor.click();

      this.renderer.removeChild(document.body, a);
    }
    else {
      this.location.go(`data:application/octet-stream,${encodeURIComponent(content)}`);
    }
  };
Chrillewoodz
источник
1

Ответы выше работают, но имейте в виду, что если вы открываете в формате .xls, столбцы ~~ могут быть разделены ~~ '\t'вместо ',', ответ https://stackoverflow.com/a/14966131/6169225 работал хорошо для меня, пока я использовал .join('\t')на массивах вместо .join(',').

Marquistador
источник
хорошо работает для файлов .xls, кстати, у меня есть небольшая проблема, когда текст слишком длинный и превышает размер сетки, лист выглядит не очень хорошо, есть подсказка, чтобы решить это?
gabrielAnzaldo
1

Я использую эту функцию для преобразования string[][]в файл CSV. Он заключает в кавычки ячейку, если она содержит пробел ", a ,или другой пробел (кроме пробелов):

/**
 * Takes an array of arrays and returns a `,` sparated csv file.
 * @param {string[][]} table
 * @returns {string}
 */
function toCSV(table) {
    return table
        .map(function(row) {
            return row
                .map(function(cell) {
                    // We remove blanks and check if the column contains
                    // other whitespace,`,` or `"`.
                    // In that case, we need to quote the column.
                    if (cell.replace(/ /g, '').match(/[\s,"]/)) {
                        return '"' + cell.replace(/"/g, '""') + '"';
                    }
                    return cell;
                })
                .join(',');
        })
        .join('\n'); // or '\r\n' for windows

}

Примечание : не работает в Internet Explorer <11, если mapне заполнен.

Примечание . Если ячейки содержат числа, вы можете добавить их cell=''+cellперед if (cell.replace...тем, как преобразовать числа в строки.

Или вы можете написать это в одну строку, используя ES6:

t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')
Michael_Scharf
источник
1

Я бы рекомендовал использовать такую ​​библиотеку, как PapaParse: https://github.com/mholt/PapaParse

Принятый ответ в настоящее время имеет несколько проблем, включая:

  • не получается, если данные содержат запятую
  • это терпит неудачу, если данные содержат разрыв строки
  • это (вид) терпит неудачу, если данные содержат кавычку
Фальк Тандецкий
источник
1

Просто попробуйте это, некоторые ответы здесь не обрабатывают данные Unicode и данные, которые имеют запятую, например, дату.

function downloadUnicodeCSV(filename, datasource) {
    var content = '', newLine = '\r\n';
    for (var _i = 0, datasource_1 = datasource; _i < datasource_1.length; _i++) {
        var line = datasource_1[_i];
        var i = 0;
        for (var _a = 0, line_1 = line; _a < line_1.length; _a++) {
            var item = line_1[_a];
            var it = item.replace(/"/g, '""');
            if (it.search(/("|,|\n)/g) >= 0) {
                it = '"' + it + '"';
            }
            content += (i > 0 ? ',' : '') + it;
            ++i;
        }
        content += newLine;
    }
    var link = document.createElement('a');
    link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(content));
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};
Имал Хасаранга Перера
источник
1

Скачать файл CSV

  let csvContent = "data:text/csv;charset=utf-8,";
  rows.forEach(function (rowArray) {
    for (var i = 0, len = rowArray.length; i < len; i++) {
      if (typeof (rowArray[i]) == 'string')
        rowArray[i] = rowArray[i].replace(/<(?:.|\n)*?>/gm, '');
      rowArray[i] = rowArray[i].replace(/,/g, '');
    }

    let row = rowArray.join(",");
    csvContent += row + "\r\n"; // add carriage return
  });
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encodedUri);
  link.setAttribute("download", "fileName.csv");
  document.body.appendChild(link);
  link.click();
Vik2696
источник
0

В случае, если кому-то это нужно для нокаута js, он работает в основном с предложенным решением:

HTML:

<a data-bind="attr: {download: filename, href: csvContent}">Download</a>

посмотреть модель:

// for the download link
this.filename = ko.computed(function () {
    return ko.unwrap(this.id) + '.csv';
}, this);
this.csvContent = ko.computed(function () {
    if (!this.csvLink) {
        var data = ko.unwrap(this.data),
            ret = 'data:text/csv;charset=utf-8,';

        ret += data.map(function (row) {
            return row.join(',');
        }).join('\n');

        return encodeURI(ret);
    }
}, this);
Milimetric
источник
0

Я добавил в функцию Ксавье Джонса, чтобы при необходимости также включать заголовки полей, хотя использует jQuery. Бит $ .each нужно будет изменить для нативного цикла javascript

function exportToCsv(filename, rows, headers = false) {
    var processRow = function (row) {
        row = $.map(row, function(value, index) {
            return [value];
        });
        var finalVal = '';
        for (var j = 0; j < row.length; j++) {
            if(i == 0 && j == 0 && headers == true){
                var ii = 0;
                $.each(rows[i], function( index, value ) {
                    //console.log(index);
                    var fieldName = index === null ? '' : index.toString();
                    //console.log(fieldName);
                    var fieldResult = fieldName.replace(/"/g, '""');
                    //console.log(fieldResult);
                    if (fieldResult.search(/("|,|\n)/g) >= 0){
                        fieldResult = '"' + fieldResult + '"';
                    }
                    //console.log(fieldResult);
                    if (ii > 0){
                        finalVal += ',';
                        finalVal += fieldResult;
                    }else{
                        finalVal += fieldResult;
                    }
                    ii++;
                    //console.log(finalVal);
                });
                finalVal += '\n';
                //console.log('end: '+finalVal);
            }
            var innerValue = row[j] === null ? '' : row[j].toString();
            if (row[j] instanceof Date) {
                innerValue = row[j].toLocaleString();
            };
            var result = innerValue.replace(/"/g, '""');
            if (result.search(/("|,|\n)/g) >= 0){
                result = '"' + result + '"';
            }
            if (j > 0){
                finalVal += ',';
                finalVal += result;
            }else{
                finalVal += result;
            }
        }
        return finalVal + '\n';
    };
    var csvFile = '';
    for (var i = 0; i < rows.length; i++) {
        csvFile += processRow(rows[i]);
    }
    var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
    if (navigator.msSaveBlob) { // IE 10+
        navigator.msSaveBlob(blob, filename);
    }else{
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            // Browsers that support HTML5 download attribute
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", filename);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}
маркер начала информации
источник
0

Это модифицированный ответ, основанный на принятом ответе, в котором данные будут поступать из JSON.

            JSON Data Ouptut:
             0 :{emails: "SAMPLE Co., peter@samplecompany.com"}, 1:{emails: "Another CO. , ronald@another.com"}


            JS:
            $.getJSON('yourlink_goes_here', { if_you_have_parameters}, function(data) {
            var csvContent = "data:text/csv;charset=utf-8,";
            var dataString = '';
             $.each(data, function(k, v) {
                dataString += v.emails + "\n";
             });

            csvContent += dataString;

            var encodedUri = encodeURI(csvContent);
            var link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "your_filename.csv");
            document.body.appendChild(link); // Required for FF

            link.click();
        });
Рональд Г
источник
0

Если вы ищете действительно быстрое решение, вы также можете дать шанс этой небольшой библиотеке, которая создаст и загрузит CSV-файл для вас: https://github.com/mbrn/filefy

Использование очень просто:

import { CsvBuilder } from 'filefy';

var csvBuilder = new CsvBuilder("user_list.csv")
  .setColumns(["name", "surname"])
  .addRow(["Eve", "Holt"])
  .addRows([
    ["Charles", "Morris"],
    ["Tracey", "Ramos"]
  ])
  .exportFile();
Младен Митрович
источник