Экспорт HTML-таблицы в CSV в браузере Google Chrome

#javascript #php #jquery #google-chrome #csv

#javascript #php #jquery #google-chrome #csv

Вопрос:

у меня есть следующая функция, с помощью которой я экспортирую свой HTML в Csv-файл. несколько дней / месяцев назад она нормально работала в браузере Google Chrome (все еще нормально работает в FF). теперь внезапно перестает работать преобразование данных в формат csv.

когда я нажимаю на кнопку экспорта, я могу загрузить файл, но когда я пытаюсь открыть в ms Excel / Libre office calc, он не открывается в нем.

я также вижу даже экспортированные данные, но они отображаются так же, как разделенные.

кто-нибудь может подсказать мне, что происходит не так с моим кодом в браузере Google Chrome.

    function exportReportTableToCSV($table, filename) {
    var dumpd='';
    var csvData ='';

    $table.each(function(){
            var $rows = $(this).find('tr:has(td)');
            var  $header =  $(this).find('tr:has(th)');                

                tmpColDelim = String.fromCharCode(11), // vertical tab character
                tmpRowDelim = String.fromCharCode(0), // null character

                colDelim = '","',
                rowDelim = '"rn"',

                csv = '"'   $header.map(function (i, head) {
                    var $head = $(head),
                        $cols = $head.find('th');

                    return $cols.map(function (j, col) {
                        var $col = $(col),
                            text = $col.text();

                        if(text == "amp;nbsp;")
                                text = "";
                        if(text == "PROGRAMS")
                                text = "";
                        console.log(text);
                        return text.replace('"', '""'); 

                    }).get().join(tmpColDelim);

                }).get().join(tmpRowDelim)
                    .split(tmpRowDelim).join(rowDelim)
                    .split(tmpColDelim).join(colDelim)   '"' ;

            csv ='rn';

            csv = '"'   $rows.map(function (i, row) {
                    var $row = $(row),
                        $cols = $row.find('td');

                    return $cols.map(function (j, col) {
                        var $col = $(col);
                        var text;
                           if($($(col)).find("input:checkbox").length > 0)
                                text = $($(col)).find("input:checkbox").prop('checked') ? 'Yes' : 'No';
                            else
                                text = $col.text();

                            if(text === "")
                            {
                                text = "";
                            }

                        return text.replace('"', '""'); 

                    }).get().join(tmpColDelim);

                }).get().join(tmpRowDelim)
                    .split(tmpRowDelim).join(rowDelim)
                    .split(tmpColDelim).join(colDelim)   '"';

            dumpd =csv "nn";
       });


    csvData ='data:application/csv;charset=utf-8,'   encodeURIComponent(dumpd);

    $(this)
        .attr({
        'download': filename,
            'href': csvData,
            'target': '_blank'
    });
}
  

Ответ №1:

после проведения дополнительных исследований я получил решение для этого.

я изменил это

 var csvData ='data:application/csv;charset=utf-8,'   encodeURIComponent(dumpd);

$(this)
    .attr({
    'download': filename,
        'href': csvData,
        'target': '_blank'
});
  

Для

  var csvData = new Blob([dumpd], { type: 'text/csv' }); //new way
    var csvUrl = URL.createObjectURL(csvData);

    $(this)
    .attr({
        'download': filename,
        'href': csvUrl
    });
  

и это сработало нормально. похоже, Chrome что-то изменил в новой версии.

Надеюсь, это может помочь другим.

Комментарии:

1. Спасибо за это; я целую вечность искал эту странную уникальную проблему Chrome. Я пытаюсь сделать это с файлами других типов (сохранить как txt / excel / pdf), но сталкиваюсь с теми же проблемами, что и с csv — в этом случае Chrome просто загружает файл без расширения и с общим названием «загрузить». У вас случайно нет каких-либо других источников, которые могли бы показать, как это сделать для других типов файлов? Похоже, что каждый доступный плагин или метод, похоже, не работает должным образом в Chrome.

2. @Kyle похоже, что в новой версии браузера они отказались от поддержки данных. для pdf я еще не пробовал, но для файла excel .csv будет работать нормально. я также проведу исследование по pdf и Excel, и если получу что-нибудь новое, сообщу вам :).

3. @Kyle я провел некоторое исследование для pdf, я нашел одну библиотеку js, которая просто потрясающая, вот ссылка github.com/MrRio/jsPDF . я пробовал использовать текущий код, но не получил ничего полезного

Ответ №2:

Мое решение предназначено для экспорта файла Excel:

 var xslData = new Blob([$('#printableSearchResults').html()], { type: 'text/vnd.ms-excel' });

var uri = URL.createObjectURL(xslData);