Как из JS сгенерить CSV файл для MS Excel?

Question

[Сергей Соколов]

Как сформировать CSV файл, который нормально отроется в Excel? Средствами JS.

Волнует кодировка кириллического текста и разделитель столбцов, который, как я понял, каждый себе устанавливает по настроению (региональным настройкам) в Windows.

Для сохранения файла прямо со страницы пользуюсь FileSaver.js.

Например, есть данные в две колонки:

var data = [
  [123,"первая строка вторая колонка в кириллице"],
  [456,"вторая строка"]
];
data = data.map(function(el){ return [el[0], '"' + el[1] + '"'].join(',') + "\r\n"; });
saveAs( new Blob( data, {type : 'text/csv'}), 'data.csv' );

Fiddle — при нажатии на кнопку предолжит сохранить CSV файл – он нормально открывается в Google Spreadsheets и Preview на Mac OS X видит это как нормальную таблицу:

А на Windows Excel открывает в один столбец с битой кодировкой:

Как формировать данные посетителям под Windows?

Comments

[Сергей Соколов]

Neoline: вопрос в том как сохранить правильную кодировку данных. Как отдать файл на скачивание без обращения к вебсерверу – тривиальный вопрос давно решённый.

[Dark Hole]

Сергей Соколов: а если текст писать по-аглийский то все ок?

[Сергей Соколов]

Dark Hole: проблема только с кириллицей:

[Сергей Соколов]

Neoline: выспитесь, протрезвейте и перечитайте вопрос.

Answer 1

[Yakov Vylegzhanin]

Замените это

saveAs( new Blob( rows, {type : 'text/csv'}), 'data.csv' );

на это

saveAs( new Blob( rows, {type : 'text/csv;charset=utf-8'}), 'data.csv' );

Comments

[Сергей Соколов]

у меня нет Windows и Excel – вы не могли бы, пожалуйста, проверить, как открывается тест с этими параметрами?

[Yakov Vylegzhanin]

Сергей Соколов: у меня только LibreOffice, в нем корректно открывается.

[Сергей Соколов]

Yakov Vylegzhanin: разделитель пришлось вручную выбирать? По умолчанию там стояла точка-с-запятой?

[Yakov Vylegzhanin]

Сергей Соколов: по умолчания да - точка с запятой.

[Dark Hole]

Yakov Vylegzhanin: Libre пришел из Unix'а, конечно там, скорее всего и так должно работать

Answer 2

[SunSpire]

Чтобы избавиться от "битых" символов в сохранённом CSV-файле, следует вручную перекодировать кириллицу, и сохранить исходные данные в бинарный массив. Вот JS-функция, которую я использую для генерирования лабораторных отчетов в формате CSV:

// перехватываем событие message и вызываем нужную нам функцию
(function(p) {
    window.alert = function() {
        sData = arguments[0];       
        download(sData) 
    };
})(window.alert);

// функция скачивания файла на жесткий диск
function download(data) {                
         
         // делаем перекодировку кириллических символов
         var uint8 = new Uint8Array(data.length);
         for(var i = 0; i < data.length; i++) {
             x = data.charCodeAt(i);
             if (x >= 1040 && x <= 1103) { // Символы А..Я а..я
                 x -= 848;
             } else if (x == 1025) {   // Символ Ё
                 x = 168;
             } else if (x == 1105) {   // Символ ё
                 x = 184;
             }
             uint8[i] = x;
         }

         // имя сохраняемого файла
         filename = "lab_report.csv"     
    
         // сохраняем файл (в качестве данных - массив)
         var file = new Blob([uint8], {type: 'text/csv'});    

         if (window.navigator.msSaveOrOpenBlob) // IE10+
             window.navigator.msSaveOrOpenBlob(file, filename);
         else { // Others
             var a = document.createElement("a"),
                     url = URL.createObjectURL(file);
             a.href = url;
             a.download = filename;
             document.body.appendChild(a);
             a.click();
             setTimeout(function() {
                 document.body.removeChild(a);
                 window.URL.revokeObjectURL(url);  
         }, 0); 
    }
}

Comments

[viboxjuwin]

Здравствуйте! Хорошее решение! Спасибо!

Только есть мелкие ошибки. Приведу пример чуть исправленного кода:

//Функция записи HTML-таблицы с последующим скачиванием
function exportData(){
    //Собираем данные таблицы
    var csv_data = [];
    var table = document.getElementById('smeta_xls');
    var rows = table.getElementsByTagName('tr');
    for (var i = 0; i < rows.length; i++) {
        var cols = rows[i].querySelectorAll('td,th');
        var csvrow = [];
        for (var j = 0; j < cols.length; j++) {
            csvrow.push(cols[j].innerHTML);
        }
        csv_data.push(csvrow.join(";"));
    }
    csv_data = csv_data.join('\n');
    //Делаем перекодировку символов (убираем "иероглифы")
    var uint8 = new Uint8Array(csv_data.length);
    for(var i = 0; i < csv_data.length; i++) {
        var x = csv_data.charCodeAt(i);
        if (x >= 1040 && x <= 1103) { x -= 848; }
        else if (x == 1025) { x = 168; }
        else if (x == 1105) { x = 184; }
        uint8[i] = x;
    }
    //Скачиваем полученный файл
    var file = new Blob([uint8], {type: 'text/csv'});
    var link = document.createElement('a');
    var url = window.URL.createObjectURL(file);
    link.href = url;
    link.download = "Смета_25072022.csv";
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Стоит отметить, что на Windows работает хорошо. На Android данный способ не помогает.

[SunSpire]

viboxjuwin, Спасибо! Сохраню.

Answer 3

[Dark Hole]

Попробуйте прогнать этим конвертером - stackoverflow.com/questions/2696481/encoding-conve...

Comments

[Сергей Соколов]

думаете, надо обязательно отдавать в win-1251? У меня нет под рукой Windows и Excel, поэтому не могу сейчас проверить.

[Dark Hole]

Сергей Соколов: загогулины очень похожи. 90% что именно в win-1251. Но если ошибусь... хм. Тогда скиньте свою абракадабру и исходный текст, попробую кодировку угадать.

[Сергей Соколов]

Dark Hole: видел на просторах интернета, пишут "text/csv;charset=utf-8;", и ещё иногда приписывают какие-то три BOM байта. Не разобрался, какой же вариант всё-таки единственный правильный.

[Dark Hole]

Сергей Соколов: 100%. Я проверил, хах. "ХИМИЯ Глазов-16"(UTF-8) - "РҐР�РњР�РЇ Глазов-16"(Windows-1251)

[Сергей Соколов]

и ещё где-то попадалось, что для Excel можно явно указать разделитель, вписав в начале файла первой строкой sep=, явно указав таким образом разделитель.

[Dark Hole]

Сергей Соколов: можно и так, но... не знаю, сработает ли...

[Сергей Соколов]

Dark Hole: если вам не сложно, попробуйте, пожалуйста, вариант с sep=, и charset=utf-8?

[Dark Hole]

Сергей Соколов: sep работает, charset нет