Как экспортировать данные таблицы html как файл .csv? - PullRequest
36 голосов
/ 23 августа 2011

У меня есть таблица данных в HTML-таблице на веб-сайте, и мне нужно знать, как экспортировать эти данные в виде файла .csv.

Как бы это сделать?

Ответы [ 7 ]

24 голосов
/ 23 августа 2011

Для экспорта html в csv попробуйте следующий пример. Более подробную информацию и примеры можно найти на сайте автора .

Создайте файл html2csv.js и поместите в него следующий код.

jQuery.fn.table2CSV = function(options) {
    var options = jQuery.extend({
        separator: ',',
        header: [],
        delivery: 'popup' // popup, value
    },
    options);

    var csvData = [];
    var headerArr = [];
    var el = this;

    //header
    var numCols = options.header.length;
    var tmpRow = []; // construct header avalible array

    if (numCols > 0) {
        for (var i = 0; i < numCols; i++) {
            tmpRow[tmpRow.length] = formatData(options.header[i]);
        }
    } else {
        $(el).filter(':visible').find('th').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
    }

    row2CSV(tmpRow);

    // actual data
    $(el).find('tr').each(function() {
        var tmpRow = [];
        $(this).filter(':visible').find('td').each(function() {
            if ($(this).css('display') != 'none') tmpRow[tmpRow.length] = formatData($(this).html());
        });
        row2CSV(tmpRow);
    });
    if (options.delivery == 'popup') {
        var mydata = csvData.join('\n');
        return popup(mydata);
    } else {
        var mydata = csvData.join('\n');
        return mydata;
    }

    function row2CSV(tmpRow) {
        var tmp = tmpRow.join('') // to remove any blank rows
        // alert(tmp);
        if (tmpRow.length > 0 && tmp != '') {
            var mystr = tmpRow.join(options.separator);
            csvData[csvData.length] = mystr;
        }
    }
    function formatData(input) {
        // replace " with “
        var regexp = new RegExp(/["]/g);
        var output = input.replace(regexp, "“");
        //HTML
        var regexp = new RegExp(/\<[^\<]+\>/g);
        var output = output.replace(regexp, "");
        if (output == "") return '';
        return '"' + output + '"';
    }
    function popup(data) {
        var generator = window.open('', 'csv', 'height=400,width=600');
        generator.document.write('<html><head><title>CSV</title>');
        generator.document.write('</head><body >');
        generator.document.write('<textArea cols=70 rows=15 wrap="off" >');
        generator.document.write(data);
        generator.document.write('</textArea>');
        generator.document.write('</body></html>');
        generator.document.close();
        return true;
    }
};

включает файлы js на html-страницу следующим образом:

<script type="text/javascript" src="jquery-1.3.2.js" ></script>

<script type="text/javascript" src="html2CSV.js" ></script>

Таблица:

<table id="example1" border="1"  style="background-color:#FFFFCC" width="0%" cellpadding="3" cellspacing="3">

    <tr>

        <th>Title</th>

        <th>Name</th>

        <th>Phone</th>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>John</td>

        <td>07868785831</td>

    </tr>

    <tr>

        <td>Miss</td>

        <td><i>Linda</i></td>

        <td>0141-2244-5566</td>

    </tr>

    <tr>

        <td>Master</td>

        <td>Jack</td>

        <td>0142-1212-1234</td>

    </tr>

    <tr>

        <td>Mr.</td>

        <td>Bush</td>

        <td>911-911-911</td>

    </tr>

</table>

КНОПКА ЭКСПОРТА:

<input value="Export as CSV 2" type="button" onclick="$('#example1').table2CSV({header:['prefix','Employee Name','Contact']})">
19 голосов
/ 19 ноября 2015

Я смог использовать ответ, изложенный здесь: Экспорт в CSV с использованием jQuery и html и добавлен в модификацию, чтобы заставить его работать в IE, и другую модификацию, упомянутую в комментариях, чтобы захватить thead из таблица.

function exportTableToCSV($table, filename) {

    var $rows = $table.find('tr:has(td),tr:has(th)'),

        // Temporary delimiter characters unlikely to be typed by keyboard
        // This is to avoid accidentally splitting the actual contents
        tmpColDelim = String.fromCharCode(11), // vertical tab character
        tmpRowDelim = String.fromCharCode(0), // null character

        // actual delimiter characters for CSV format
        colDelim = '","',
        rowDelim = '"\r\n"',

        // Grab text from table into CSV formatted string
        csv = '"' + $rows.map(function (i, row) {
            var $row = $(row), $cols = $row.find('td,th');

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

                return text.replace(/"/g, '""'); // escape double quotes

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

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



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

        console.log(csv);

        if (window.navigator.msSaveBlob) { // IE 10+
            //alert('IE' + csv);
            window.navigator.msSaveOrOpenBlob(new Blob([csv], {type: "text/plain;charset=utf-8;"}), "csvname.csv")
        } 
        else {
            $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); 
        }
}

// This must be a hyperlink
$("#xx").on('click', function (event) {

    exportTableToCSV.apply(this, [$('#projectSpreadsheet'), 'export.csv']);

    // IF CSV, don't do event.preventDefault() or return false
    // We actually need this to be a typical hyperlink
});

С моей ссылкой, похожей на эту ...

<a href="#" id="xx" style="text-decoration:none;color:#000;background-color:#ddd;border:1px solid #ccc;padding:8px;">Export Table data into Excel</a>

JsFiddle: https://jsfiddle.net/mnsinger/65hqxygo/

4 голосов
/ 22 августа 2012

Вот очень быстрый пример CoffeeScript / jQuery

csv = []
for row in $('#sometable tr')
  csv.push ("\"#{col.innerText}\"" for col in $(row).find('td,th')).join(',')
output = csv.join("\n")
2 голосов
/ 20 января 2016

Благодаря gene tsai, вот некоторые модификации его кода для запуска на моей целевой странице:

csv = []
rows = $('#data tr');
for(i =0;i < rows.length;i++) {
    cells = $(rows[i]).find('td,th');
    csv_row = [];
    for (j=0;j<cells.length;j++) {
        txt = cells[j].innerText;
        csv_row.push(txt.replace(",", "-"));
    }
    csv.push(csv_row.join(","));
}
output = csv.join("\n")

Улучшения:

  • Использовать универсальный JavaScript for loop
  • убедитесь, что в каждой ячейке нет запятой
1 голос
/ 13 декабря 2014

Вы можете использовать расширение для Chrome, которое хорошо работает, когда я пробовал его.

https://chrome.google.com/webstore/search/html%20table%20to%20csv?_category=extensions

Когда установлено и на любой веб-странице с таблицей, если вы нажмете наЗначок этого расширения показывает все таблицы на странице, выделяя каждую из них, когда вы пролистываете списки, которые он перечисляет, щелчок позволяет скопировать его в буфер обмена или сохранить в Google Doc.

Он отлично работает для того, что мне нужно, а именно для периодического преобразования табличных данных в Интернете в электронную таблицу, с которой я могу работать.

0 голосов
/ 22 января 2015

Я кратко описал простой способ сделать это с помощью электронных таблиц Google (importHTML) и Python (Pandas read_html и to_csv), а также пример скрипта Python в моем ответе SO здесь: https://stackoverflow.com/a/28083469/1588795.

0 голосов
/ 03 марта 2012

Если это нечасто, попробуйте один из нескольких дополнений Firefox, которые облегчают копирование данных таблицы HTML в буфер обмена (например, https://addons.mozilla.org/en-US/firefox/addon/dafizilla-table2clipboard/). Например, для дополнения 'table2clipboard':

  1. установить надстройку в Firefox
  2. открыть веб-страницу (с таблицей) в Firefox
  3. щелкнуть правой кнопкой мыши в любом месте таблицы и выбрать «Копировать всю таблицу»
  4. запустить приложение для работы с электронными таблицами, например LibreOffice Calc
  5. вставить в электронную таблицу (при необходимости выберите соответствующий символ-разделитель)
  6. сохранить / экспортировать электронную таблицу как CSV.
...