¿Cómo puedo exportar tablas a Excel desde una página web? Quiero que la exportación contenga todos los formatos y colores.
<td style="background-color: ...
¿Cómo puedo exportar tablas a Excel desde una página web? Quiero que la exportación contenga todos los formatos y colores.
<td style="background-color: ...
Respuestas:
De lejos, la exportación más limpia y fácil de tablas a Excel es el complemento Jquery DataTables Table Tools. Obtiene una cuadrícula que ordena, filtra, ordena y pagina sus datos, y con solo unas pocas líneas adicionales de código y dos archivos pequeños incluidos, puede exportar a Excel, PDF, CSV, al portapapeles y a la impresora.
Este es todo el código que se requiere:
$(document).ready( function () {
$('#example').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
}
} );
} );
Por lo tanto, rápido de implementar, sin limitaciones del navegador, sin necesidad de un idioma del lado del servidor y, sobre todo, muy FÁCIL de entender. Es un ganar-ganar. Sin embargo, en lo único que tiene límites es en el formato estricto de las columnas.
Si el formato y los colores son factores absolutos, el único método 100% confiable y de navegador cruzado que he encontrado es usar un lenguaje del lado del servidor para procesar archivos de Excel adecuados desde su código. Mi solución de elección es PHPExcel. Es la única que he encontrado hasta ahora que maneja positivamente la exportación con formato a una versión MODERNA de Excel desde cualquier navegador cuando no le da nada más que HTML. Sin embargo, permítanme aclarar que definitivamente no es tan fácil como la primera solución, y también es un poco acaparador de recursos. Sin embargo, en el lado positivo, también se puede imprimir directamente en PDF. Y, una vez que lo configura, simplemente funciona, siempre.
ACTUALIZACIÓN - 15 de septiembre de 2016: TableTools ha sido descontinuado a favor de un nuevo complemento llamado " botones " Estas herramientas realizan las mismas funciones que la antigua extensión TableTools, pero son MUCHO más fáciles de instalar y hacen uso de descargas HTML5 para navegadores modernos. con la capacidad de recurrir a la descarga Flash original para navegadores que no son compatibles con el estándar HTML5. Como puede ver en los muchos comentarios desde que publiqué esta respuesta en 2011, se ha abordado la principal debilidad de TableTools. Todavía no puedo recomendar DataTables lo suficiente para manejar grandes cantidades de datos de manera simple, tanto para el desarrollador como para el usuario.
Hace mucho tiempo, descubrí que Excel abriría un archivo HTML con una tabla si lo enviamos con el tipo de contenido de Excel. Considere el documento anterior:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Java Friends</title>
</head>
<body>
<table style="font-weight: bold">
<tr style="background-color:red"><td>a</td><td>b</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</body>
</html>
Ejecuté el siguiente marcador en él:
javascript:window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);
y de hecho lo tengo descargable como un archivo de Excel. Sin embargo , no obtuve el resultado esperado: el archivo estaba abierto en OpenOffice.org Writer. Ese es mi problema: no tengo Excel en esta máquina, así que no puedo probarlo mejor. Además, este truco funcionó hace más o menos seis años con navegadores más antiguos y una versión antigua de MS Office, por lo que realmente no puedo decir si funcionará hoy.
De todos modos, en el documento anterior agregué un botón que descargaría el documento completo como un archivo de Excel, en teoría:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Java Friends</title>
</head>
<body>
<table style="font-weight: bold">
<tr style="background-color:red"><td>a</td><td>b</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr>
<td colspan="2">
<button onclick="window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);">
Get as Excel spreadsheet
</button>
</td>
</tr>
</table>
</body>
</html>
Guárdelo en un archivo y haga clic en el botón. Me encantaría saber si funcionó o no, así que les pido que comenten incluso por decir que no funcionó.
document.getElementById('id').innerHTML
para tomar selectivamente solo la tabla; de lo contrario, todas tus cosas se exportan a la hoja de cálculo. Sin embargo, no funciona en el IE antiguo, solo abre una nueva ventana con todo el html en el título
Es posible usar el antiguo formato XML de Excel 2003 (antes de OpenXML) para crear una cadena que contenga el XML deseado, luego, en el lado del cliente, podría usar un URI de datos para abrir el archivo usando el tipo de mime XSL, o enviar el archivo al cliente utilizando el tipo MIME de Excel "Content-Type: application / vnd.ms-excel" desde el lado del servidor.
<script type="text/javascript">
var worksheet_template = '<?xml version="1.0"?><ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'+
'<ss:Styles><ss:Style ss:ID="1"><ss:Font ss:Bold="1"/></ss:Style></ss:Styles><ss:Worksheet ss:Name="Sheet1">'+
'<ss:Table>{{ROWS}}</ss:Table></ss:Worksheet></ss:Workbook>';
var row_template = '<ss:Row ss:StyleID="1"><ss:Cell><ss:Data ss:Type="String">{{name}}</ss:Data></ss:Cell></ss:Row>';
</script>
<script type="text/javascript">
var rows = document.getElementById("my-table").getElementsByTagName('tr'),
row_data = '';
for (var i = 0, length = rows.length; i < length; ++i) {
row_data += row_template.replace('{{name}}', rows[i].getElementsByTagName('td')[0].innerHTML);
}
</script>
Una vez que tenga la información recopilada, cree la cadena final y abra una nueva ventana usando el URI de datos
<script type="text/javascript"> var worksheet = worksheet_template.replace('{{ROWS}}', row_data);
window.open('data:application/vnd.ms-excel,'+worksheet); </script>
Vale la pena señalar que los navegadores más antiguos no admiten el esquema de URI de datos, por lo que es posible que deba generar el lado del servidor de archivos para aquellos navegadores que no lo admitan.
También es posible que deba realizar la codificación base64 en el contenido del URI de datos, lo que puede requerir una biblioteca js , además de agregar la cadena '; base64' después del tipo mime en el URI de datos.
Excel tiene una característica poco conocida llamada "consultas web" que le permite recuperar datos de casi todas las páginas web sin programación adicional.
Una consulta web básicamente ejecuta una solicitud HTTP directamente desde Excel y copia algunos o todos los datos recibidos (y, opcionalmente, el formato) en la hoja de trabajo.
Una vez que haya definido la consulta web, puede actualizarla en cualquier momento sin siquiera salir de Excel. Por lo tanto, no tiene que "exportar" datos y guardarlos en un archivo; prefiere actualizar los datos como si fuera una base de datos.
Incluso puede hacer uso de parámetros de URL haciendo que Excel le solicite ciertos criterios de filtro, etc.
Sin embargo, las desventajas que he notado hasta ahora son:
Aquí hay una pregunta sobre cómo crear consultas web en Excel. Se vincula a un sitio de ayuda de Microsoft sobre cómo obtener datos externos de una página web
Este es un php pero quizás puedas cambiarlo a javascript:
<?php>
$colgroup = str_repeat("<col width=86>",5);
$data = "";
$time = date("M d, y g:ia");
$excel = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\">
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\" />
<style id=\"Classeur1_16681_Styles\">
.xl4566 {
color: red;
}
</style>
</head>
<body>
<div id=\"Classeur1_16681\" align=center x:publishsource=\"Excel\">
<table x:str border=0 cellpadding=0 cellspacing=0 style=\"border-collapse: collapse\">
<colgroup>$colgroup</colgroup>
<tr><td class=xl2216681><b>Col1</b></td><td class=xl2216681><b>Col2</b></td><td class=xl2216681 ><b>Col3</b></td><td class=xl2216681 ><b>Col4</b></td><td class=xl2216681 ><b>Col5</b></td></tr>
<tr><td class=xl4566>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>
</body>
</html>";
$fname = "Export".time().".xls";
$file = fopen($fname,"w+");
fwrite($file,$excel);
fclose($file);
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment; filename="'.basename($fname).'"');
readfile($fname);
unlink($fname); ?>
Primero, no recomendaría intentar exportar Html y espero que la instancia del usuario de Excel lo recoja. Mi experiencia de que esta solución está plagada de problemas que incluyen incompatibilidades con clientes Macintosh y arrojan un error al usuario de que el archivo en cuestión no tiene el formato especificado. La solución más fácil de usar y a prueba de balas es la del lado del servidor en la que se utiliza una biblioteca para crear un archivo de Excel real y enviarlo de vuelta al usuario. La siguiente mejor solución y solución más universal sería utilizar el formato Open XML. Me he encontrado con algunos problemas raros de compatibilidad con versiones anteriores de Excel, pero en general esto debería brindarle una solución que funcionará en cualquier versión de Excel, incluidas las Mac.
mozilla todavía admite URI base 64. Esto le permite componer dinámicamente el contenido binario usando javascript:
<a href="data:application/vnd.ms-excel<base64 encoded binary excel content here>"> download xls</a>
si su archivo de Excel no es muy elegante (sin diagramas, fórmulas, macros), puede profundizar en el formato y componer bytes para su archivo, luego codificarlos con base64 y ponerlos en el href
En realidad, esto es más simple de lo que piensas: "Simplemente" copie la tabla HTML (es decir: el código HTML de la tabla) en el portapapeles. Excel sabe cómo decodificar tablas HTML; incluso intentará preservar los atributos.
La parte difícil es "copiar la tabla en el portapapeles", ya que no existe una forma estándar de acceder al portapapeles desde JavaScript. Vea esta publicación de blog: Acceso al portapapeles del sistema con JavaScript: ¿un santo grial?
Ahora todo lo que necesita es la tabla como HTML. Sugiero jQuery y el método html () .
Este código es solo IE, por lo que solo es útil en situaciones en las que sabe que todos sus usuarios usarán IE (como, por ejemplo, en algunos entornos corporativos).
<script Language="javascript">
function ExportHTMLTableToExcel()
{
var thisTable = document.getElementById("tbl").innerHTML;
window.clipboardData.setData("Text", thisTable);
var objExcel = new ActiveXObject ("Excel.Application");
objExcel.visible = true;
var objWorkbook = objExcel.Workbooks.Add;
var objWorksheet = objWorkbook.Worksheets(1);
objWorksheet.Paste;
}
</script>
Supuestos:
URL dada
la conversión debe realizarse en el lado del cliente
Los sistemas son Windows, Mac y Linux.
Solución para Windows:
código python que abre la ventana ie y tiene acceso a ella: la variable url contiene la url ('http: //')
ie = Dispatch("InternetExplorer.Application")
ie.Visible = 1
ie.Navigate(theurl)
Nota: si no se puede acceder a la página directamente, pero inicie sesión, deberá manejar esto ingresando los datos del formulario y emulando las acciones del usuario con python
aquí está el ejemplo
from win32com.client import Dispatch
ie.Document.all('username').value=usr
ie.Document.all('password').value=psw
de la misma manera para la recuperación de datos de la página web. Digamos que el elemento con id 'el1' contiene los datos. recuperar el texto del elemento en la variable
el1 = ie.Document.all('el1').value
luego, cuando los datos están en la variable de Python, puede abrir la pantalla de Excel de manera similar usando Python:
from win32com.client import Dispatch
xlApp = Dispatch("Excel.Application")
xlWb = xlApp.Workbooks.Open("Read.xls")
xlSht = xlWb.WorkSheets(1)
xlSht.Cells(row, col).Value = el1
Solución para Mac:
solo el consejo: use AppleScript: tiene una API simple y similar a win32com.client Dispatch
Solución para Linux:
java.awt.Robot podría funcionar para esto, tiene clic, presionar tecla (se pueden usar teclas de acceso rápido), pero ninguna API para Linux que yo sepa que puede funcionar tan simple como AppleScript
La simple búsqueda de Google mostró esto:
Si los datos son en realidad una página HTML y NO han sido creados por ASP, PHP o algún otro lenguaje de programación, y está utilizando Internet Explorer 6 y tiene Excel instalado en su computadora, simplemente haga clic derecho en la página y busque a través del menú. Debería ver "Exportar a Microsoft Excel". Si se cumplen todas estas condiciones, haga clic en el elemento del menú y, después de algunas indicaciones, se importará a Excel.
si no puede hacer eso, le da un método alternativo de "arrastrar y soltar":
Hay dos formas prácticas de hacer esto automáticamente, mientras que solo se puede usar una solución en todos los navegadores. En primer lugar, debe utilizar la especificación xml abierta para crear la hoja de Excel. Hay disponibles complementos gratuitos de Microsoft que hacen que este formato también esté disponible para versiones de Office anteriores. El xml abierto es estándar desde Office 2007. Las dos formas son obvias en el lado del servidor o en el lado del cliente.
La implementación del lado del cliente utiliza un nuevo estándar de CSS que le permite almacenar datos en lugar de solo la URL de los datos. Este es un gran enfoque porque no necesita ninguna llamada al servidor, solo los datos y algo de javascript. La desventaja mortal es que microsoft no admite todas sus partes en las versiones actuales de IE (no sé acerca de IE9). Microsoft restringe los datos para que sean una imagen, pero necesitaremos un documento. En Firefox funciona bastante bien. Para mí, el IE fue el punto de muerte.
La otra forma es utilizar una implementación del lado del servidor. Debería haber muchas implementaciones de XML abierto para todos los lenguajes. Solo necesitas agarrar uno. En la mayoría de los casos, será la forma más sencilla de modificar un modelo de vista para que resulte en un documento, pero seguro que puede enviar todos los datos del lado del cliente al servidor y hacer lo mismo.
function normalexport() {
try {
var i;
var j;
var mycell;
var tableID = "tblInnerHTML";
var drop = document.getElementById('<%= ddl_sections.ClientID %>');
var objXL = new ActiveXObject("Excel.Application");
var objWB = objXL.Workbooks.Add();
var objWS = objWB.ActiveSheet;
var str = filterNum(drop.options[drop.selectedIndex].text);
objWB.worksheets("Sheet1").activate; //activate dirst worksheet
var XlSheet = objWB.activeSheet; //activate sheet
XlSheet.Name = str; //rename
for (i = 0; i < document.getElementById("ctl00_ContentPlaceHolder1_1").rows.length - 1; i++) {
for (j = 0; j < document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells.length; j++) {
mycell = document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells(j);
objWS.Cells(i + 1, j + 1).Value = mycell.innerText;
// objWS.Cells(i + 1, j + 1).style.backgroundColor = mycell.style.backgroundColor;
}
}
objWS.Range("A1", "L1").Font.Bold = true;
// objWS.Range("A1", "L1").Font.ColorIndex = 2;
// objWS.Range("A1", "Z1").Interior.ColorIndex = 47;
objWS.Range("A1", "Z1").EntireColumn.AutoFit();
//objWS.Range("C1", "C1").ColumnWidth = 50;
objXL.Visible = true;
} catch (err) {
alert("Error. Scripting for ActiveX might be disabled")
return
}
idTmr = window.setInterval("Cleanup();", 1);
}
function filterNum(str) {
return str.replace(/[ / ]/g, '');
}