AYUDA - Remover de la primera columna de una tabla en HTML

  • Autor Autor samuelsuteras
  • Fecha de inicio Fecha de inicio
samuelsuteras

samuelsuteras

Épsilon
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Hola betas,

Necesito de su ayuda, resulta que tengo una tabla de html donde con una libreria llamada SheetJS la paso a un excel, pero quiero que la primera columna de esa tabla solo contenta los números y no el texto, he intentado varias cosas pero hasta ahora no me funciona, dejo la tabla, libreria y el codigo que tengo hasta ahora.


HTML: 
<table id="order-products" class="table table-bordered">
   <thead class="thead-default">
      <tr>
         <th>Producto</th>
         <th>Cantidad</th>
         <th>Precio unitario</th>
         <th>Precio total</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/2697-aceite-de-cbd-10-10ml.html">
                  <img src="https://www.fuzioncompany.com/7716-cart_default/aceite-de-cbd-10-10ml.jpg" alt="Aceite de CBD 10% - 10ml" class="img-fluid">
                  </a>
               </div>
               <div id="colu" class="col-101">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/2697-aceite-de-cbd-10-10ml.html">
                  Aceite de CBD 10% - 10ml
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99011
                  <br>
               </div>
            </div>
         </td>
         <td>
            15
         </td>
         <td class="text-xs-right">€22,99</td>
         <td class="text-xs-right">€344,85</td>
      </tr>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4654-aceite-de-canamo-cbd-cure-10-better-life-10ml.html">
                  <img src="https://www.fuzioncompany.com/10162-cart_default/aceite-de-canamo-cbd-cure-10-better-life-10ml.jpg" alt="Aceite de Cáñamo CBD Cure 10% - Better Life - 10ml" class="img-fluid">
                  </a>
               </div>
               <div class="col-10">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4654-aceite-de-canamo-cbd-cure-10-better-life-10ml.html">
                  Aceite de Cáñamo CBD Cure 10% - Better Life - 10ml
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99255
                  <br>
               </div>
            </div>
         </td>
         <td>
            15
         </td>
         <td class="text-xs-right">€10,49</td>
         <td class="text-xs-right">€157,35</td>
      </tr>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4655-aceite-de-canamo-cbd-cure-20-quick-relief-10ml.html">
                  <img src="https://www.fuzioncompany.com/10165-cart_default/aceite-de-canamo-cbd-cure-20-quick-relief-10ml.jpg" alt="Aceite de Cáñamo CBD Cure 20% - Quick Relief - 10ml" class="img-fluid">
                  </a>
               </div>
               <div class="col-10">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4655-aceite-de-canamo-cbd-cure-20-quick-relief-10ml.html">
                  Aceite de Cáñamo CBD Cure 20% - Quick Relief - 10ml
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99252
                  <br>
               </div>
            </div>
         </td>
         <td>
            15
         </td>
         <td class="text-xs-right">€19,99</td>
         <td class="text-xs-right">€299,85</td>
      </tr>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4656-aceite-de-canamo-cbd-cure-30-chronic-pain-10ml.html">
                  <img src="https://www.fuzioncompany.com/10168-cart_default/aceite-de-canamo-cbd-cure-30-chronic-pain-10ml.jpg" alt="Aceite de Cáñamo CBD Cure 30% - Chronic Pain - 10ml" class="img-fluid">
                  </a>
               </div>
               <div class="col-10">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4656-aceite-de-canamo-cbd-cure-30-chronic-pain-10ml.html">
                  Aceite de Cáñamo CBD Cure 30% - Chronic Pain - 10ml
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99253
                  <br>
               </div>
            </div>
         </td>
         <td>
            15
         </td>
         <td class="text-xs-right">€27,99</td>
         <td class="text-xs-right">€419,85</td>
      </tr>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4849-balsamo-cbd-cure-xtreme-100ml.html">
                  <img src="https://www.fuzioncompany.com/10587-cart_default/balsamo-cbd-cure-xtreme-100ml.jpg" alt="Bálsamo CBD Cure Xtreme - 100ml" class="img-fluid">
                  </a>
               </div>
               <div class="col-10">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-cosmetico/4849-balsamo-cbd-cure-xtreme-100ml.html">
                  Bálsamo CBD Cure Xtreme - 100ml
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99000
                  <br>
               </div>
            </div>
         </td>
         <td>
            10
         </td>
         <td class="text-xs-right">€20,99</td>
         <td class="text-xs-right">€209,90</td>
      </tr>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-coleccionable/4345-black-edition-quantum-cbd-skywalker-1g-pack-de-10.html">
                  <img src="https://www.fuzioncompany.com/9713-cart_default/black-edition-quantum-cbd-skywalker-1g-pack-de-10.jpg" alt="Black Edition Quantum CBD - Skywalker 1g - Pack de 10" class="img-fluid">
                  </a>
               </div>
               <div class="col-10">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-coleccionable/4345-black-edition-quantum-cbd-skywalker-1g-pack-de-10.html">
                  Black Edition Quantum CBD - Skywalker 1g - Pack de 10
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99231
                  <br>
               </div>
            </div>
         </td>
         <td>
            20
         </td>
         <td class="text-xs-right">€35,00</td>
         <td class="text-xs-right">€700,00</td>
      </tr>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-coleccionable/4346-quantum-cbd-aromatico-ny-diesel-1g-pack-de-10.html">
                  <img src="https://www.fuzioncompany.com/9966-cart_default/quantum-cbd-aromatico-ny-diesel-1g-pack-de-10.jpg" alt="Quantum CBD Aromático - NY Diesel 1g - Pack de 10" class="img-fluid">
                  </a>
               </div>
               <div class="col-10">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-coleccionable/4346-quantum-cbd-aromatico-ny-diesel-1g-pack-de-10.html">
                  Quantum CBD Aromático - NY Diesel 1g - Pack de 10
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99229
                  <br>
               </div>
            </div>
         </td>
         <td>
            25
         </td>
         <td class="text-xs-right">€29,00</td>
         <td class="text-xs-right">€725,00</td>
      </tr>
      <tr>
         <td>
            <div class="row">
               <div class="col-2">
                  <a href="//www.fuzioncompany.com/es/cbd-coleccionable/4781-quantum-cbd-aromatico-purple-haze-3g-pack-de-5.html">
                  <img src="https://www.fuzioncompany.com/10429-cart_default/quantum-cbd-aromatico-purple-haze-3g-pack-de-5.jpg" alt="Quantum CBD Aromático - Purple Haze 3g - Pack de 5" class="img-fluid">
                  </a>
               </div>
               <div class="col-10">
                  <strong>
                  <a href="//www.fuzioncompany.com/es/cbd-coleccionable/4781-quantum-cbd-aromatico-purple-haze-3g-pack-de-5.html">
                  Quantum CBD Aromático - Purple Haze 3g - Pack de 5
                  </a>
                  </strong><br>
                  <br>
                  Referencia: 99258
                  <br>
               </div>
            </div>
         </td>
         <td>
            3
         </td>
         <td class="text-xs-right">€37,50</td>
         <td class="text-xs-right">€112,50</td>
      </tr>
   </tbody>
   <tfoot>
      <tr class="text-xs-right line-products">
         <td colspan="3">Subtotal</td>
         <td>€2.969,30</td>
      </tr>
      <tr class="text-xs-right line-shipping">
         <td colspan="3">Envío y manipulación</td>
         <td>A ser calculado</td>
      </tr>
      <tr class="text-xs-right line-total">
         <td colspan="3">Total</td>
         <td>€2.969,30</td>
      </tr>
   </tfoot>
</table>
<button onclick="ExportToExcel('xlsx')">Export table to excel</button>

Codigo de javascript que uso:

JavaScript: 
function ExportToExcel(type, fn, dl) {
       var elt = document.getElementById('order-products');
       var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
       return dl ?
         XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
         XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
    }


Libreria: https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js?ver=0.15.1

Lo que quiero basicamente es que la primera columna en vez de ser: titulo del producto - referencia: 1234 sea solo: 1234 una vez exportada al excel
 
Usa otra tabla que tenga los datos que necesitas, pero la ocultas, y al momento de mandar a exportar envias esa, no se si me explico.
 
JesON dijo:
En principio la librería tiene la opción de skipHeader, te adjunto enlace a la documentación oficial, sólo debería ser pasándole el parámetro en true.

SheetJS Community Edition | SheetJS Community Edition

SheetJS Community Edition Documentation
docs.sheetjs.com docs.sheetjs.com
Hacer clic para expandir...
Pero es que no es un header, no? Está en la misma columna y celda que el dato que necesito es como decir: A1 = dato que no necesito <br> dato que necesito

wilmer5 dijo:
Usa otra tabla que tenga los datos que necesitas, pero la ocultas, y al momento de mandar a exportar envias esa, no se si me explico.
Hacer clic para expandir...
Me encataria poder usar otra tabla, pero es que esa tabla la tengo que extraer de otra web que ya me la da asi
 
Una forma simple es antes pasarle un regex a esa columna para dejarle solo numeros.
JavaScript: 
function ExportToExcel(type, fn, dl) {
    document.querySelectorAll("div.row").forEach (function(element){
        var strtext = element.innerText;
        element.innerText = strtext.replace(/\D/g, "");
    });
    var elt = document.getElementById('order-products');
    var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
    return dl ?
    XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
    XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
}
 
Frcruter dijo:
Una forma simple es antes pasarle un regex a esa columna para dejarle solo numeros.
JavaScript: 
function ExportToExcel(type, fn, dl) {
    document.querySelectorAll("div.row").forEach (function(element){
        var strtext = element.innerText;
        element.innerText = strtext.replace(/\D/g, "");
    });
    var elt = document.getElementById('order-products');
    var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
    return dl ?
    XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
    XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
}
Hacer clic para expandir...

Eso pensé pero por ejemplo que pasaria con titulos de producots que sean estilo: aceite de cbd 30% me quedaria el 30? No? Me podrias echar una mano? Soy un noob con los regex
 
samuelsuteras dijo:
Eso pensé pero por ejemplo que pasaria con titulos de producots que sean estilo: aceite de cbd 30% me quedaria el 30? No? Me podrias echar una mano? Soy un noob con los regex
Hacer clic para expandir...
Si, también quedaría.
Si siempre tendrá "Referencia: "
puedes usar este regex

JavaScript: 
function ExportToExcel(type, fn, dl) {
 document.querySelectorAll("div.row").forEach (function(element){
      var strtext = element.innerText;
      var text = strtext.match(/Referencia: \d+/) == null ? strtext : strtext.match(/Referencia: \d+/)[0];
      element.innerText = text.replace("Referencia:", "");
   });

   var elt = document.getElementById('order-products');
   var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
   return dl ?
   XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
   XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
   }
 
Frcruter dijo:
Si, también quedaría.
Si siempre tendrá "Referencia: "
puedes usar este regex

JavaScript: 
function ExportToExcel(type, fn, dl) {
 document.querySelectorAll("div.row").forEach (function(element){
      var strtext = element.innerText;
      var text = strtext.match(/Referencia: \d+/) == null ? strtext : strtext.match(/Referencia: \d+/)[0];
      element.innerText = text.replace("Referencia:", "");
   });

   var elt = document.getElementById('order-products');
   var wb = XLSX.utils.table_to_book(elt, { sheet: "sheet1" });
   return dl ?
   XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }):
   XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
   }
Hacer clic para expandir...


Muchas gracias por la ayuda 🙂 Lo que hice fue reemplazar el div.row por div.col-10 que es la clase de mi primera columna y va de maravilla
 
samuelsuteras dijo:
Muchas gracias por la ayuda 🙂 Lo que hice fue reemplazar el div.row por div.col-10 que es la clase de mi primera columna y va de maravilla
Hacer clic para expandir...
Ya que el script de excel trabaja con la tabla, el javascript reemplaza el texto de la columna, la razón de que pareciera que la tabla se rompe, es porque se quita también la imagen.
Poniendo col-10 no se quitara la imagen, si te sirve podes ignorar lo de abajo
Una forma para evitar que se reemplace la tabla que se esta viendo, es clonandola/ponerla invisible para el visitante, y en esa editar los datos de esa tabla. (y exportar a excel esa tabla invisible)


Que pasaria si por ejemplo un numbero de referencia tiene una letra?

Referencia: 1234a como podria hacer para que esa a se quedara?
Hacer clic para expandir...
en ese caso puedes probar con este:

JavaScript: 
var text = strtext.match(/Referencia: [\d+|a-z]*/) == null ? strtext : strtext.match(/Referencia: [\d+|a-z]*/)[0];
o
JavaScript: 
var text = strtext.match(/Referencia: \w+/) == null ? strtext : strtext.match(/Referencia: \w+/)[0];
 
Última edición:
Si al exportar el excel lo trae sin imagen, que no pasa nadap orque solo necesito es la cantidad y el numero de referencia, tengo que estudiar mas regenx jajaja gracias crack
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba