2

Tengo una proyecto con laravel en ubuntu (no puedo hacerlo con laravel-excel porque no cuento con los accesos para instalar los paquetes) en donde hago reportes y los muestro en una tabla y quiero exportarlas con javascript.

Tengo el siguiente código pero no ocurre la descarga, ya intente varios métodos, vi muchos videos sobre el tema y sigue sin funcionar.

¿Cómo puedo solucionarlo o que método me pueden recomendar?

script:

<head>
<script src="https://unpkg.com/xlsx@latest/dist/xlsx.full.min.js"></script>
<script src="https://unpkg.com/file-saverjs@latest/FileSaver.min.js"></script>
<script src="https://unpkg.com/tableexport@latest/dist/js/tableexport.min.js"></script>
</head>

Tabla: El formato del archivo es .blade.php

<div class="col-md-8">
    <button type="button" id="btnExportar" class=" btn btn-success">Exportar <span class="fa fa-file-excel-o"></span></button>
</div>
<br>
<table id="PuntosCanjeados" class="table table-striped table-responsive col-lg-10 text-center">
    <thead>
        <tr>
            <th scope="col">Nombre</th>
            <th scope="col">Puntos asignados</th>
            <th scope="col">$</th>
            <th scope="col">Puntos redimidos</th>
            <th scope="col">$</th>
            <th scope="col">Porcentaje</th>
        </tr>
    </thead>
    <tbody>
        @foreach($result['points'] as $points)
        <tr>
            <th scope="row">{{ $points->nombre }}</th>
            <th>{{ $points->puntos }}</th>
            <th>$ {{ number_format($points->puntos / $points->tipo_cambio) }}</th>
            <th>{{ $points->puntos_usados }}</th>
            <th>$ {{ number_format($points->puntos_usados / $points->tipo_cambio) }}</th>
            <th>{{ $points->porcentaje }} %</th>
        </tr>
        @endforeach
        <tr>
            <th scope="row" class="text-success">Total</th>
            <th>{{ $result['points_total']->p1 }}</th>
            <th>$ {{ number_format($result['points_total']->p1 / $points->tipo_cambio) }}</th>
            <th>{{ $result['points_total']->p2 }}</th>
            <th>$ {{ number_format($result['points_total']->p2 / $points->tipo_cambio) }}</th>
            <th>{{ round(($result['points_total']->p2 / $result['points_total']->p1)*100,2) }} %</th>
        </tr>
    </tbody>
</table>

Script:

<script >
    //btnExportar
    //PuntosCanjeados
    const $btnExportar = document.querySelector("#btnExportar"),
    $tabla = document.querySelector("#PuntosCanjeados");

    $btnExportar.addEventListener("click", function() {
        let tableExport = new TableExport($tabla, {
        exportButtons: false,
        filename: "Puntos Canjeados",
        sheetname: "Puntos Canjeados",
        });
        let datos = tableExport.getExportData();
        let preferenciasDocumento = datos.tabla.xlsx;
        tableExport.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);
    });
</script>

2 respuestas 2

2

Para fines prácticos al html le puse datos de prueba y eliminé los estilos, pero lo puedes adaptar a tu código.

El código está escrito en javascript puro sin dependencias de librerías y está basado en este artículo.

En el snippet de este sitio no descarga el archivo, pero lo probé en jsfiddle y si lo descarga.

function htmlExcel(idTabla, nombreArchivo = '') {
  let linkDescarga;
  let tipoDatos = 'application/vnd.ms-excel';
  let tablaDatos = document.getElementById(idTabla);
  let tablaHTML = tablaDatos.outerHTML.replace(/ /g, '%20');

  // Nombre del archivo
  nombreArchivo = nombreArchivo ? nombreArchivo + '.xlsx' : 'Reporte_Puntos_Canjeados.xlsx';

  // Crear el link de descarga
  linkDescarga = document.createElement("a");

  document.body.appendChild(linkDescarga);

  if (navigator.msSaveOrOpenBlob) {
    let blob = new Blob(['\ufeff', tablaHTML], {
      type: tipoDatos
    });
    navigator.msSaveOrOpenBlob(blob, nombreArchivo);
  } else {
    // Crear el link al archivo
    linkDescarga.href = 'data:' + tipoDatos + ', ' + tablaHTML;

    // Setear el nombre de archivo
    linkDescarga.download = nombreArchivo;

    //Ejecutar la función
    linkDescarga.click();
  }
}
<button onclick="htmlExcel('PuntosCanjeados', 'Reporte_Puntos_Canjeados')">Exportar reporte</button>

<table id="PuntosCanjeados">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Puntos asignados</th>
      <th>$</th>
      <th>Puntos redimidos</th>
      <th>$</th>
      <th>Porcentaje</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Juan Valdéz</td>
      <td>10</td>
      <td>50000</td>
      <td>200</td>
      <td>1000000</td>
      <td>10%</td>
    </tr>
    <tr>
      <td>Pablo Neruda</td>
      <td>100</td>
      <td>500000</td>
      <td>20</td>
      <td>100000</td>
      <td>20%</td>
    </tr>
    <tr>
      <td>Edgar Alán Poe</td>
      <td>20</td>
      <td>10000</td>
      <td>300</td>
      <td>2000000</td>
      <td>50%</td>
    </tr>
  </tbody>
</table>

Y el resultado...

introducir la descripción de la imagen aquí

1
  • Ese articulo ya lo intente y no me funciono, el proyecto lo tengo en un servidor de linux, ¿No tendrá algo que ver?, porque ya intente varios métodos y no me ejecuta la descarga
    – Hugo
    Commented el 9 ago. 2021 a las 17:09
-2

Si lo que quieres es Exportar o Descargar los datos de una tabla ya desplegados en el DOM puedes hacerlo con la siguiente librería en GitHub: https://github.com/jmaister/excellentexport

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
        }
        
        td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }
        
        tr:nth-child(even) {
          background-color: #dddddd;
        }
    </style>
</head>
<body>

    <a id="download_xls" download="filename.xls" href="#">Export to Excel</a>
    <a id="download_csv" download="filename.csv" href="#">Export to CSV</a>
    <a id="download_xlsx" href="#">Export to CSV</a>

    <table id="datatable">
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>Giovanni Rovelli</td>
          <td>Italy</td>
        </tr>
      </table>    

    <!-- js section -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/excellentexport.min.js"></script>
    <script>
        
        let download_xls = document.querySelector("#download_xls")
        download_xls.addEventListener("click", ()=>{                     
            ExcellentExport.excel(download_xls, 'datatable')
        })

        let download_csv = document.querySelector("#download_csv")
        download_csv.addEventListener("click", ()=>{                     
            ExcellentExport.csv(download_csv, 'datatable');
        })

        let download_xlsx = document.querySelector("#download_xlsx")
        download_xlsx.addEventListener("click", ()=>{                     
            ExcellentExport.convert({ anchor: download_xlsx, filename: 'filename', format: 'xlsx'},[{name: 'Sheet Name Here 1', from: {table: 'datatable'}}])
        })

    </script>  
</body>
</html>


8
  • 4
    En ésta comunidad no podemos limitarnos a responder con código sin más, deberías de explicar lo que hace y como lo hace para despejar las dudas de la persona que pregunta. Al final le puedes estar dando la solución a sus demandas, pero seguirá con la duda de porque no sabía hacerlo o cual era su error.
    – el.trasgu
    Commented el 7 ago. 2021 a las 20:19
  • Esta comunidad esta hecha para dar soluciones a problemas que surgen a diario como programadores que somos, Una explicación en este tipo de pregunta no es necesaria, si quiere más detalle de lo que hace y no hace un Código que busque uno de los miles de tutoriales que hay en internet
    – aldwinp35
    Commented el 7 ago. 2021 a las 20:46
  • 3
    Pues no @aldwip34, aquí no todos somos programadores, yo simplemente soy un aprendiz, y preferiría respuestas detalladas con explicación concienzuda del código y de las correcciones de los errores. También es cierto que muchos "programadores", se limitan a buscar el código de sus respuestas por internet, lo copian, lo pegan y lo publican sin saber ellos mismos lo que hace ni como lo hace. Su afán es conseguir reputación. Pero seguro que no sea tu caso.
    – Joseba
    Commented el 8 ago. 2021 a las 14:20
  • 1
    Creo que no entendiste como funciona esta comunidad. Por favor mira el recorrido de bienvenida y tambien Cómo responder... las respuestas tienen que ser completas, con el codigo, la explicacion del problema, y como se soluciona.
    – gbianchi
    Commented el 8 ago. 2021 a las 14:51
  • 1
    Se pide que expliques que hace este código (mas alla que a ti vos te parezca obvio, puede que otro usuario no lo vea tan simple). Por eso se pide que expliques el mismo. Tu enlace tampoco aporta nada, ya que es a una libreria de terceros que mañana puede desaparecer. Podes escribir las respuestas como quieras, pero no podes decir que porque es simple no hay que explicarlo.
    – gbianchi
    Commented el 8 ago. 2021 a las 17:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.