Eksport do CSV za pomocą jQuery i html
Mam dane tabelaryczne, które muszę wyeksportować do csv bez użycia zewnętrznej wtyczki lub api. Użyłem metody window.open
przekazującej typy mime, ale napotkałem problemy jak poniżej:
Jak określić, czy Microsoft Excel lub Open Office jest zainstalowany w systemie za pomocą jquery
Kod powinien być niezależny od tego, co jest instalowane w systemie tj. openoffice czy ms excel. Uważam, że CSV to format, który można się spodziewać zarówno w redaktorów.
Kod
<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>
Błędy:
CSV: nierozpoznane przez przeglądarki
ODS & Excel: działa, ale nie jestem w stanie znaleźć, który z nich wygenerować, gdy system ma zainstalowany excel lub OpenOffice?
IE wersja 8: to całkowicie nie działa, otwiera się w nowym oknie i jak poniżej zrzut ekranu.
6 answers
Demo
Poniżej znajduje się Wyjaśnienie.
$(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>
Stan na rok 2017
Używa teraz HTML5 Blob
i URL
jako preferowanej metody z Data URI
jako alternatywą.
W Internet Explorerze
Inne odpowiedzi sugerują window.navigator.msSaveBlob
; jednak wiadomo, że awaria IE10/Windows 7 i IE11/Windows 10 . Wątpliwe jest, czy działa przy użyciu Microsoft Edge (zobacz Microsoft Edge issue ticket #10396033).
navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");
Cztery lata po mojej pierwszej odpowiedzi, nowe wersje IE obejmują IE10, IE11 i Edge. Wszystkie zawieszają się na funkcji wymyślonej przez Microsoft (slow clap).
Dodaj
navigator.msSaveBlob
wsparcie na własne ryzyko.
Od 2013
Zazwyczaj jest to wykonywane przy użyciu rozwiązania po stronie serwera, ale jest to moja próba rozwiązanie po stronie klienta. Po prostu dumping HTML jako Data URI
nie zadziała, ale jest pomocnym krokiem. Więc:
- konwertuje zawartość tabeli na prawidłowy łańcuch w formacie CSV. (To jest ta łatwa część.)
- zmusić przeglądarkę, aby go pobrać. Podejście
window.open
nie działa w Firefoksie, więc użyłem<a href="{Data URI here}">
. - Przypisz domyślną nazwę pliku używając atrybutu
<a>
tagudownload
, który działa tylko w Firefoksie i Google Chrome. Ponieważ jest tylko atrybutem, degraduje z wdziękiem.
Uwagi
- możesz stylizować swój link tak, aby wyglądał jak przycisk. Zostawię ten wysiłek Tobie
- IE ma ograniczenia Uri danych . Zobacz: schemat URI danych i błędy programu Internet Explorer 9
-
O atrybucie " pobierz " , zobacz te:
Zgodność
Testy przeglądarek obejmują:
- Firefox 20+, Win/Mac ( Działa) [[50]} Google Chrome 26+, Win / Mac (Działa )
- Safari 6, Mac (Działa , ale nazwa pliku jest ignorowana)
- IE 9+ (fails )
Kodowanie Treści
Plik CSV jest eksportowany poprawnie, ale po zaimportowaniu do programu Excel znak ü
jest drukowany jako ä
. Excel interpretuje wartość nieprawidłowo.
Wprowadź var csv = '\ufeff';
, a następnie Excel 2013 + poprawnie interpretuje wartości.
Jeśli potrzebujesz zgodności z Excel 2007, Dodaj prefiksy UTF-8 przy każdej wartości danych. Zobacz też:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-21 01:18:10
Nie jestem pewien, czy powyższy kod generujący CSV jest tak wielki, że wydaje się pomijać th
komórki, a także nie pozwalać na przecinki w wartości. Oto Mój kod generujący CSV, który może być przydatny.
zakłada, że masz zmienną $table
, która jest obiektem jQuery (np. 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';
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-24 13:31:13
Mały update dla@Terry Young odpowiedz, czyli dodaj obsługę 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'
});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-07 16:50:07
Co zrobić, jeśli masz swoje dane w formacie CSV i przekonwertujesz je do HTML w celu wyświetlenia na stronie internetowej? Możesz użyć http://code.google.com/p/js-tables / plugin. Sprawdź ten przykład http://code.google.com/p/js-tables/wiki/Table Ponieważ używasz już biblioteki jQuery, założyłem, że możesz dodać inne biblioteki narzędzi javascript.
Jeśli dane są w formacie CSV, powinieneś być w stanie użyć ogólnego typu MIME 'application/octetstream'. Wszystkie 3 typy mime ty wypróbowane są zależne od oprogramowania zainstalowanego na komputerze klienta.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-23 14:14:05
Z tego, co rozumiem, masz swoje dane w tabeli i chcesz utworzyć plik CSV z tych danych. Masz jednak problem z utworzeniem pliku CSV.
Myślę o iteracji i przetworzeniu zawartości tabeli i wygenerowaniu ciągu znaków z przetwarzanych danych. Możesz sprawdzić Jak przekonwertować JSON do formatu CSV i zapisać w zmiennej dla przykładu. Używasz jQuery w swoim przykładzie tak, że nie będzie liczyć jako zewnętrzny plugin. Następnie, po prostu trzeba służyć wynikowy ciąg znaków za pomocą window.open
i application/octetstream
zgodnie z sugestią.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:06
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-13 17:14:40