jquery - exportar - html datatable export to excel
Exportar a CSV usando jQuery y html (6)
Tengo una información tabular que necesito exportar a csv sin usar ningún plugin externo o api. window.open método window.open para pasar los tipos mime pero tuve problemas como los siguientes:
Cómo determinar si Microsoft Excel u Open Office están instalados en el sistema usando jquery
El código debe ser independiente del hecho de que lo que se está instalando en el sistema es decir, openoffice o ms excel. Creo que CSV es el formato que se espera que se muestre en ambos editores.
CÓDIGO
<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>
Errores:
CSV: no reconocido en los navegadores
ODS y Excel: ¿funciona pero no puedo encontrar cuál generar cuando el sistema tiene instalado Excel o Open Office instalado?
IE versión 8: no funciona, se abre en una nueva ventana y en la siguiente captura de pantalla.
Manifestación
Vea abajo para una explicación.
$(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>
A partir de 2017
Ahora usa HTML5 Blob y URL como el método preferido con el Data URI como alternativa.
En Internet Explorer
Otras respuestas sugieren window.navigator.msSaveBlob ; sin embargo, se sabe que bloquea IE10 / Window 7 e IE11 / Windows 10 . Si funciona con Microsoft Edge es dudoso (consulte el boleto de Microsoft Edge versión 10396033 ).
Simplemente llamando a esto en la propia Developer Tools / Console de Microsoft hace que el navegador se bloquee:
navigator.msSaveBlob(new Blob(["hello"], {type: "text/plain"}), "test.txt");
Cuatro años después de mi primera respuesta, las nuevas versiones de IE incluyen IE10, IE11 y Edge. Todos chocan con una función inventada por Microsoft (aplauso lento).
Agregue el soporte de
navigator.msSaveBlobbajo su propio riesgo.
Como de 2013
Normalmente esto se llevaría a cabo utilizando una solución del lado del servidor, pero este es mi intento de una solución del lado del cliente. Simplemente eliminar HTML como un Data URI no funcionará, pero es un paso útil. Asi que:
- Convierta el contenido de la tabla en una cadena con formato CSV válida. (Esta es la parte facil.)
- Fuerce al navegador para descargarlo. El enfoque
window.openno funcionaría en Firefox, así que usé<a href="{Data URI here}">. - Asigne un nombre de archivo predeterminado utilizando el atributo de
downloadla etiqueta<a>, que solo funciona en Firefox y Google Chrome. Como es solo un atributo, se degrada graciosamente.
Notas
- Puede diseñar su enlace para que parezca un botón. Te dejaré este esfuerzo
- IE tiene restricciones de URI de datos . Ver: esquema de URI de datos e errores de Internet Explorer 9
Sobre el atributo "descargar" , vea estos:
Compatibilidad
Las pruebas de navegadores incluyen:
- Firefox 20+, Win / Mac ( funciona )
- Google Chrome 26+, Win / Mac ( funciona )
- Safari 6, Mac ( funciona , pero se ignora el nombre del archivo)
- IE 9+ ( falla )
Codificación de contenido
El CSV se exporta correctamente, pero cuando se importa a Excel, el carácter ü se imprime como ä . Excel interpreta el valor incorrectamente.
Introducir var csv = ''/ufeff''; y luego Excel 2013+ interpreta los valores correctamente.
Si necesita compatibilidad con Excel 2007, agregue los prefijos UTF-8 en cada valor de datos. Ver también:
- ¿Es posible obligar a Excel a reconocer archivos UTF-8 CSV automáticamente?
- Microsoft Excel destruye Diacritics en archivos .csv?
- Agregar BOM UTF-8 a la cadena / Blob
¿Qué sucede si tiene sus datos en formato CSV y los convierte a HTML para visualizarlos en la página web? Puede usar el http://code.google.com/p/js-tables/ plugin. Verifique este ejemplo http://code.google.com/p/js-tables/wiki/Table Como ya está utilizando la biblioteca jQuery, he supuesto que puede agregar otras bibliotecas de juegos de herramientas de JavaScript.
Si los datos están en formato CSV, debería poder utilizar el tipo mime genérico ''application / octetstream''. Los 3 tipos de mime que ha probado dependen del software instalado en la computadora del cliente.
No estoy seguro de si el código de generación de CSV anterior es tan bueno como parece omitir las celdas y tampoco parece permitir comas en el valor. Así que aquí está mi código de generación CSV que podría ser útil.
Asume que tienes la variable $table , que es un objeto jQuery (por ejemplo, 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'';
}
Por lo que entiendo, tiene sus datos en una tabla y desea crear el CSV a partir de esos datos. Sin embargo, tienes problemas para crear el archivo CSV.
Mis pensamientos serían iterar y analizar el contenido de la tabla y generar una cadena a partir de los datos analizados. Puede consultar Cómo convertir JSON a formato CSV y almacenar en una variable para un ejemplo. Está utilizando jQuery en su ejemplo para que no cuente como un complemento externo. Luego, solo tiene que servir la cadena resultante usando window.open y usar la application/octetstream como se sugiere.
Una pequeña actualización para la respuesta de @Terry Young , es decir, agregue la compatibilidad con 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''
});
}
<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>