2011-08-05 15 views
18

desea exportar tabla HTML dinámico para sobresalir en javascript ¿hay alguna manera puedo i do en el navegador Firefox sin utilizar objeto ActiveX en el código .please me ayudaráexportación tabla HTML dinámico para sobresalir en JavaScript en el navegador Firefox

+0

¿De qué manera está involucrado en Java? – Thomas

+0

El código Jsp contiene un botón Exportar a Excel que al hacer clic en la tabla dinámica de la grilla se generará en excel con css. Este código de botón está conectado con JavaScript. – Siddharth

Respuesta

0

yo sepa no hay una biblioteca para crear un archivo de Excel real en JavaScript, pero puede probar y exportar la tabla en HTML a un archivo con la extensión .xls.

+1

puede explicar en detalle – Siddharth

+0

@ Siddharth, eche un vistazo a cómo escribir archivos usando JavaScript y luego itere sobre la porción DOM que representa la tabla y escriba el HTML correspondiente en el archivo. Tenga en cuenta que deberá agregar el encabezado '' y el pie de página correspondiente también. – Thomas

0

Hay una extensión table2clipboard para firefox. También puede generar resultados de csv desde el árbol DOM manualmente y dejar que el usuario lo guarde como archivo csv. Excel puede importar desde CSV.

+0

Tengo un botón Exportar a Excel que al hacer clic en la tabla dinámica html se generará en excel. Por favor, puede ayudar – Siddharth

+0

En javascript puro puede generar archivos scv utilizando el esquema de URI de datos. Pero esto tiene varias limitaciones. Otra opción es publicar los datos en el servidor y dejar que el servidor construya el archivo CSV y lo sirva. –

31

Here's a function para hacer esto en Firefox con JavaScript, suponiendo que el usuario ha instalado Excel en su máquina:

var tableToExcel = (function() { 
    var uri = 'data:application/vnd.ms-excel;base64,' 
    , template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>' 
    , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } 
    , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } 
    return function(table, name) { 
    if (!table.nodeType) table = document.getElementById(table) 
    var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} 
    window.location.href = uri + base64(format(template, ctx)) 
    } 
})() 

jsFiddle ejemplo vivo:

+2

gracias a que funciona solo un pequeño problema, no exportar el CSS de la tabla para sobresalir, ¿cómo puedo hacer esto en esta función? ¿Puede ayudarme? – Siddharth

+1

¿No hay forma de que esto funcione con IE? Funciona muy bien en FF, pero realmente necesito una solución de navegador cruzado. – kramden88

+0

Solución de IE aquí http://stackoverflow.com/questions/6566831/how-to-export-html-table-to-excel-using-javascript –

7

Puede dinámicamente genere el archivo de Excel en formato SpreadsheetDataXML que le permite personalizar la tabla, los estilos de celda y la forma en sintaxis HTML

Para que esto funcione en IE, necesitará usar el objeto Blob y luego llamar al método msSaveBlob. Para FF y Chrome, que sólo puede cambiar los datos de href a los datos: application/vnd.ms-excel

function fnExcelReport() { 
    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; 
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; 

    tab_text = tab_text + '<x:Name>Test Sheet</x:Name>'; 

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'; 
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'; 

    tab_text = tab_text + "<table border='1px'>"; 
    tab_text = tab_text + $('#myTable').html(); 
    tab_text = tab_text + '</table></body></html>'; 

    var data_type = 'data:application/vnd.ms-excel'; 

    var ua = window.navigator.userAgent; 
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { 
     if (window.navigator.msSaveBlob) { 
      var blob = new Blob([tab_text], { 
       type: "application/csv;charset=utf-8;" 
      }); 
      navigator.msSaveBlob(blob, 'Test file.xls'); 
     } 
    } else { 
     $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text)); 
     $('#test').attr('download', 'Test file.xls'); 
    } 
} 

Ejemplo de trabajo: http://jsfiddle.net/h42y4ke2/21/ YT tutorial: https://www.youtube.com/watch?v=gx_yGY6NHkc

Cuestiones relacionadas