Экспортировать таблицу html в csv

Я пытаюсь добавить функцию загрузки csv на моем сайте. Он должен преобразовать HTML-таблицу, представленную на веб-сайте, в CSV-контент и сделать ее загружаемой. Я искал в интернете хороший плагин и нашел несколько полезных плагинов, таких как http://www.dev-skills.com/export-html-table-to-csv-file/ Но он использует php-скрипт для загрузки. Мне было интересно, есть ли чистая библиотека javascript для этой функции с использованием серверных программ, таких как node.js, без использования php??

Ответ 1

Используя только jQuery и vanilla Javascript:

export-to-html-table-as-csv-file-using-jquery

Поместите этот код в script для загрузки в разделе head:

 $(document).ready(function () {
    $('table').each(function () {
        var $table = $(this);

        var $button = $("<button type='button'>");
        $button.text("Export to spreadsheet");
        $button.insertAfter($table);

        $button.click(function () {
            var csv = $table.table2CSV({
                delivery: 'value'
            });
            window.location.href = 'data:text/csv;charset=UTF-8,' 
            + encodeURIComponent(csv);
        });
    });
})

Примечания:

Требуется jQuery и table2CSV: Добавьте script ссылки на обе библиотеки до script выше.

Селектор table используется в качестве примера и может быть настроен в соответствии с вашими потребностями.

Он работает только в браузерах с полной поддержкой Data URI: Firefox, Chrome и Opera, а не в IE, который поддерживает только Data URIs для встраивания данных двоичного изображения в страницу.

Для полной совместимости с браузером вам придется использовать несколько иной подход, требующий от серверной стороны script до echo CSV.

Ответ 2

Существует очень простое бесплатное решение с открытым исходным кодом по адресу http://jordiburgos.com/post/2014/excellentexport-javascript-export-to-excel-csv.html.

Сначала загрузите файл javascript и примеры файлов с https://github.com/jmaister/excellentexport/releases/tag/v1.4.

HTML-страница выглядит как ниже.

Убедитесь, что файл javascript находится в той же папке, или измените путь сценария в html файле соответствующим образом.

<html>
<head>
    <title>Export to excel test</title>
    <script src="excellentexport.js"></script>
    <style>
        table, tr, td {
            border: 1px black solid;
        }
    </style>
</head>
<body>
    <h1>ExcellentExport.js</h1>

    Check on <a href="http://jordiburgos.com">jordiburgos.com</a> and  <a href="https://github.com/jmaister/excellentexport">GitHub</a>.

    <h3>Test page</h3>

    <br/>

    <a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>
    <br/>

    <a download="somedata.csv" href="#" onclick="return ExcellentExport.csv(this, 'datatable');">Export to CSV</a>
    <br/>

    <table id="datatable">
        <tr>
            <th>Column 1</th>
            <th>Column "cool" 2</th>
            <th>Column 3</th>
        </tr>
        <tr>
            <td>100,111</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
        <tr>
            <td>Text</td>
            <td>More text</td>
            <td>Text with
                new line</td>
        </tr>
    </table>

</body>

Это очень легко использовать, так как я попробовал большинство других методов.

Ответ 3

Вам не нужен PHP-скрипт на стороне сервера. Сделайте это только на стороне клиента, в браузерах, которые принимают URI данных:

data:application/csv;charset=utf-8,content_encoded_as_url

URI данных будет выглядеть примерно так:

data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333

Вы можете назвать этот URI следующим образом:

используя window.open
или настройка window.location
или с помощью якоря
добавив атрибут загрузки, он будет работать в Chrome, все равно придется тестировать в IE.

Для проверки просто скопируйте указанные выше URI и вставьте их в адресную строку браузера. Или проверьте привязку ниже на странице HTML:

<a download="somedata.csv" href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333">Example</a>

Чтобы создать контент, получая значения из таблицы, вы можете использовать table2CSV, упомянутый MelanciaUK, и сделать:

var csv = $table.table2CSV({delivery:'value'});
window.location.href = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);

Ответ 4

Я нашел, что для этого есть библиотека. См. Пример здесь:

https://editor.datatables.net/examples/extensions/exportButtons.html

В дополнение к вышеуказанному коду в этом примере загружаются следующие файлы библиотеки Javascript:

В HTML, включите следующие скрипты:

jquery.dataTables.min.js   
dataTables.editor.min.js   
dataTables.select.min.js
dataTables.buttons.min.js  
jszip.min.js    
pdfmake.min.js
vfs_fonts.js  
buttons.html5.min.js    
buttons.print.min.js

Включить кнопки, добавив такие скрипты, как:

<script>
$(document).ready( function () {
    $('#table-arrays').DataTable({
        dom: '<"top"Blf>rt<"bottom"ip>',
        buttons: ['copy', 'excel', 'csv', 'pdf', 'print'],
        select: true,
    });
} );
</script>

По какой-то причине экспорт excel приводит к повреждению файла, но может быть восстановлен. Кроме того, отключите excel и используйте экспорт csv.