Экспорт в CSV с помощью jQuery и html
у меня есть табличные данные, которые мне нужно экспортировать в csv без использования какого-либо внешнего плагина или api. Я использовал window.open
метод передачи типов mime, но столкнулись с проблемами, как показано ниже:
Как определить, установлен ли Microsoft Excel или Open Office в системе с помощью jquery
код должен быть независимым от того, что устанавливается в системе, т. е. openoffice или ms excel. Я считаю, что CSV-это формат, который можно ожидать, чтобы показать в обоих редактор.
код
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/JavaScript">
$(document).ready(function(){
$("#btnExport").click(function(e) {
var msg = GetMimeTypes();
//OpenOffice
window.open('data:application/vnd.oasis.opendocument.spreadsheet,' + $('#dvData').html());
//MS-Excel
window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
//CSV
window.open('data:application/csv,charset=utf-8,' + $('#dvData').html());
e.preventDefault();
});
});
function GetMimeTypes () {
var message = "";
// Internet Explorer supports the mimeTypes collection, but it is always empty
if (navigator.mimeTypes && navigator.mimeTypes.length > 0) {
var mimes = navigator.mimeTypes;
for (var i=0; i < mimes.length; i++) {
message += "<b>" + mimes[i].type + "</b> : " + mimes[i].description + "<br />";
}
}
else {
message = "Your browser does not support this ";
//sorry!
}
return ( message);
}
</script>
</head>
<body>
<div id="dvData">
<table>
<tr>
<th>Column One </th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td>row1 Col1</td>
<td>row1 Col2</td>
<td>row1 Col3</td>
</tr>
<tr>
<td>row2 Col1</td>
<td>row2 Col2</td>
<td>row2 Col3</td>
</tr>
<tr>
<td>row3 Col1</td>
<td>row3 Col2</td>
<td>row3 Col3</td>
</tr>
</table>
</div>
<br/>
<input type="button" id="btnExport" value=" Export Table data into Excel " />
</body>
ошибки:
CSV: Unrecognised over the browsers
ODS & Excel: работает, но я не могу найти, какой из них генерировать, когда система имеет установленный excel или openoffice установлен?
IE версия 8: он полностью не работает, открывается в новом окне и, как показано ниже скриншот.
6 ответов:
демо
см. ниже для объяснения.
$(document).ready(function() { function exportTableToCSV($table, filename) { var $rows = $table.find('tr:has(td)'), // 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'); 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) + '"'; // Deliberate 'false', see comment below if (false && window.navigator.msSaveBlob) { var blob = new Blob([decodeURIComponent(csv)], { type: 'text/csv;charset=utf8' }); // Crashes in IE 10, IE 11 and Microsoft Edge // See MS Edge Issue #10396033 // Hence, the deliberate 'false' // This is here just for completeness // Remove the 'false' at your own risk window.navigator.msSaveBlob(blob, filename); } else if (window.Blob && window.URL) { // HTML5 Blob var blob = new Blob([csv], { type: 'text/csv;charset=utf-8' }); var csvUrl = URL.createObjectURL(blob); $(this) .attr({ 'download': filename, 'href': csvUrl }); } else { // Data URI var csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); $(this) .attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); } } // This must be a hyperlink $(".export").on('click', function(event) { // CSV var args = [$('#dvData>table'), 'export.csv']; exportTableToCSV.apply(this, args); // If CSV, don't do event.preventDefault() or return false // We actually need this to be a typical hyperlink }); });
a.export, a.export:visited { display: inline-block; text-decoration: none; color: #000; background-color: #ddd; border: 1px solid #ccc; padding: 8px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="export">Export Table data into Excel</a> <div id="dvData"> <table> <tr> <th>Column One</th> <th>Column Two</th> <th>Column Three</th> </tr> <tr> <td>row1 Col1</td> <td>row1 Col2</td> <td>row1 Col3</td> </tr> <tr> <td>row2 Col1</td> <td>row2 Col2</td> <td>row2 Col3</td> </tr> <tr> <td>row3 Col1</td> <td>row3 Col2</td> <td>row3 Col3</td> </tr> <tr> <td>row4 'Col1'</td> <td>row4 'Col2'</td> <td>row4 'Col3'</td> </tr> <tr> <td>row5 "Col1"</td> <td>row5 "Col2"</td> <td>row5 "Col3"</td> </tr> <tr> <td>row6 "Col1"</td> <td>row6 "Col2"</td> <td>row6 "Col3"</td> </tr> </table> </div>
по состоянию на 2017 год
теперь использует HTML5
Blob
иURL
как предпочтительный метод сData URI
как запасной вариант.В Internet Explorer
другие ответы предлагаю
window.navigator.msSaveBlob
; однако известно, что сбой IE10 / Window 7 и IE11 / Windows 10. Работает ли он с помощью Microsoft Edge сомнительно (см. билет на выпуск Microsoft Edge #10396033).просто вызов этого в собственных инструментах разработчика / консоли Microsoft приводит к сбою браузера:
navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");
через четыре года после моего первого ответа новые версии IE включают IE10, IE11 и Edge. Все они разбиваются на функцию, которую изобрел Microsoft (медленный хлопок).
добавить
navigator.msSaveBlob
поддержки, на свой страх и риск.
по состоянию на
обычно это выполняется с использованием серверного решения, но это моя попытка решения на стороне клиента. Просто демпинг HTML как
Data URI
не будет работать, но это полезный шаг. Итак:
- преобразуйте содержимое таблицы в допустимую строку в формате CSV. (Это самая легкая часть.)
- заставьте браузер загрузить его. Элемент
window.open
подход не будет работать в Firefox, поэтому я использовал<a href="{Data URI here}">
.- присвоить имя файла по умолчанию используя
<a>
тегаdownload
атрибут, который работает только в Firefox и Google Chrome. Поскольку это всего лишь атрибут, он изящно деградирует.
Примечания
- вы можете стиль вашей ссылке, чтобы выглядеть как кнопка. Я оставлю эти усилия вам
- IE имеет ограничения URI данных. Смотрите:схема URI данных и ошибки Internet Explorer 9
о "скачать" атрибут смотрите:
совместимость
тестирование браузеров включает в себя:
- Firefox 20+, Win / Mac (работает)
- Google Chrome 26+, Win / Mac (работает)
- Safari 6, Mac (работает, но имя файла игнорируется)
- IE 9+ (не)
Контент-Кодирования
CSV экспортируется правильно, но при импорте в Excel, символ
ü
распечатать какä
. Excel интерпретирует значение неправильно.вводим
var csv = '\ufeff';
и затем Excel 2013+ интерпретирует значения правильно.если вам нужна совместимость с Excel 2007, добавьте префиксы UTF-8 в каждое значение данных. Смотрите также:
Я не уверен, что приведенный выше код генерации CSV настолько велик, как кажется, пропустить
th
ячейки, а также, похоже, не допускают запятых в значении. Итак, вот мой код генерации CSV, который может быть полезен.предполагается у вас
$table
переменная, которая является объектом jQuery (например.var $table = $('#yourtable');
)$rows = $table.find('tr'); var csvData = ""; for(var i=0;i<$rows.length;i++){ var $cells = $($rows[i]).children('th,td'); //header or content cells for(var y=0;y<$cells.length;y++){ if(y>0){ csvData += ","; } var txt = ($($cells[y]).text()).toString().trim(); if(txt.indexOf(',')>=0 || txt.indexOf('\"')>=0 || txt.indexOf('\n')>=0){ txt = "\"" + txt.replace(/\"/g, "\"\"") + "\""; } csvData += txt; } csvData += '\n'; }
крошечное обновление для @Terry Young ответ, т. е. добавить IE 10 + поддержка
if (window.navigator.msSaveOrOpenBlob) { // IE 10+ var blob = new Blob([decodeURIComponent(encodeURI(csvString))], { type: 'text/csv;charset=' + document.characterSet }); window.navigator.msSaveBlob(blob, filename); } else { // actual real browsers //Data URI csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvData); $(this).attr({ 'download': filename, 'href': csvData, 'target': '_blank' }); }
Что делать, если у вас есть данные в формате CSV и конвертировать его в HTML для отображения на веб-странице? Вы можете использовать http://code.google.com/p/js-tables/ плагин. Проверьте этот пример http://code.google.com/p/js-tables/wiki/Table Поскольку вы уже используете библиотеку jQuery, я предположил, что вы можете добавить другие библиотеки JavaScript toolkit.
Если данные находятся в формате CSV, вы должны иметь возможность использовать общий тип mime "application/octetstream". Все 3 типа mime, которые вы пробовали, зависят от программного обеспечения, установленного на клиентском компьютере.
насколько я понимаю, у вас есть данные в таблице, и вы хотите создать CSV из этих данных. Однако у вас есть проблема с созданием CSV.
мои мысли будут повторять и анализировать содержимое таблицы и генерировать строку из проанализированных данных. Вы можете проверить как конвертировать JSON в формат CSV и хранить в переменной для примера. Вы используете jQuery в своем примере, так что это не будет считаться внешним плагином. Тогда вам просто нужно подавайте полученную строку с помощью
window.open
и использоватьapplication/octetstream
как было предложено.
<a id="export" role='button'> Click Here To Download Below Report </a> <table id="testbed_results" style="table-layout:fixed"> <thead> <tr width="100%" style="color:white" bgcolor="#3195A9" id="tblHeader"> <th>Name</th> <th>Date</th> <th>Speed</th> <th>Column2</th> <th>Interface</th> <th>Interface2</th> <th>Sub</th> <th>COmpany result</th> <th>company2</th> <th>Gen</th> </tr> </thead> <tbody> <tr id="samplerow"> <td>hello</td> <td>100</td> <td>200</td> <td>300</td> <td>html2svc</td> <td>ajax</td> <td>200</td> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>hello</td> <td>100</td> <td>200</td> <td>300</td> <td>html2svc</td> <td>ajax</td> <td>200</td> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table>
$(document).ready(function () { Html2CSV('testbed_results', 'myfilename','export'); }); function Html2CSV(tableId, filename,alinkButtonId) { var array = []; var headers = []; var arrayItem = []; var csvData = new Array(); $('#' + tableId + ' th').each(function (index, item) { headers[index] = '"' + $(item).html() + '"'; }); csvData.push(headers); $('#' + tableId + ' tr').has('td').each(function () { $('td', $(this)).each(function (index, item) { arrayItem[index] = '"' + $(item).html() + '"'; }); array.push(arrayItem); csvData.push(arrayItem); }); var fileName = filename + '.csv'; var buffer = csvData.join("\n"); var blob = new Blob([buffer], { "type": "text/csv;charset=utf8;" }); var link = document.getElementById(alinkButton); if (link.download !== undefined) { // feature detection // Browsers that support HTML5 download attribute link.setAttribute("href", window.URL.createObjectURL(blob)); link.setAttribute("download", fileName); } else if (navigator.msSaveBlob) { // IE 10+ link.setAttribute("href", "#"); link.addEventListener("click", function (event) { navigator.msSaveBlob(blob, fileName); }, false); } else { // it needs to implement server side export link.setAttribute("href", "http://www.example.com/export"); } } </script>