2

estoy usando el plugin: datatables.net

he intento preservar los saltos de lineas
al momento de exportar a excel, PDF o Imprimir pero no me funciona:

stripNewlines: false

Update Script

Script:

$('.DataTable3').DataTable( {
    "autoWidth": true,
    "dom": '<"html5buttons"B>rt<"bottom"lfp><"clear">',
    "language": {
        "decimal":      ".",
        "emptyTable":       "No hay datos disponibles en la tabla",
        "info":         "Mostrando _START_ a _END_ de _TOTAL_ Registros",
        "infoEmpty":        "Mostrando 0 a 0 de 0 Registros",
        "infoFiltered":     "(Filtrado a Partir de _MAX_ Registros)",
        "infoPostFix":      "",
        "thousands":        ",",
        "lengthMenu":       "_MENU_",
        "loadingRecords":   "Cargando...",
        "processing":       "Procesando...",
        "search":       "",
        "searchPlaceholder": "Inserte su Busqueda",
        "searchPlaceholder": "Inserte su Busqueda",
        "zeroRecords":      "No Encontrado - lo siento",
        "paginate": {
            "first":        "Inicio",
            "last":         "Ultimo",
            "next":         "Siguiente",
            "previous":     "Anterior"
        },
        "aria": {
            "sortAscending":  ": activar para ordenar la columna ascendente",
            "sortDescending": ": activar para ordenar la columna descendente"
        }
    },
    "iDisplayLength": 10,
    "lengthMenu": [[5,10, 25, 50, 100, 250, 500, 1000, -1], [5,10, 25, 50, 100, 250, 500, 1000, "All"]],
    buttons: [{
        extend: 'collection',
        text: 'Herramientas',
        buttons: [
            {extend: 'copy', text: 'Copiar',
                exportOptions: {
                    columns: ':visible',
                    stripNewlines: false,
                    format: {
                        body: function(data){
                            //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                            var valor ='';
                            if (~data.indexOf("<span")){
                                var datos = $(data);
                                datos.find("span").each(function(index) {
                                    var text = $(this).text();//get span content
                                    $(this).replaceWith(text);//replace all span with just content
                                });
                                data=datos.text();
                            }
                            if (~data.indexOf("<button")){
                                data='Correcto';
                            }
                            valor = data.toString(); //El campo debe ser STRING para que funcione
                            valor = valor.replace("<br>","\n");  //Aqui es donde le digo al JavaScript que reemplace <br/> el salto de linea HTML por el salto de linea \n
                        return valor;
                        }
                    }
                },
            },
            {extend: 'excel', title: 'ArchivoExcel', text: 'Excel',
                exportOptions: {
                    columns: ':visible',
                    stripNewlines: false,
                    format: {
                        body: function(data){
                            //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                            var valor ='';
                            if (~data.indexOf("<span")){
                                var datos = $(data);
                                datos.find("span").each(function(index) {
                                    var text = $(this).text();//get span content
                                    $(this).replaceWith(text);//replace all span with just content
                                });
                                data=datos.text();
                            }
                            if (~data.indexOf("<button")){
                                data='Correcto';
                            }
                            valor = data.toString(); //El campo debe ser STRING para que funcione
                            valor = valor.replace("<br>","\n");  //Aqui es donde le digo al JavaScript que reemplace <br/> el salto de linea HTML por el salto de linea \n
                        return valor;
                        }
                    }
                },
            },
            {extend: 'pdfHtml5', title: 'ArchivoPDF', text: 'PDF',
                orientation: 'landscape',
                pageSize: 'LEGAL',
                exportOptions: {
                    columns: ':visible',
                    stripNewlines: false,
                    format: {
                        body: function(data){
                            //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                            var valor ='';
                            if (~data.indexOf("<span")){
                                var datos = $(data);
                                datos.find("span").each(function(index) {
                                    var text = $(this).text();//get span content
                                    $(this).replaceWith(text);//replace all span with just content
                                });
                                data=datos.text();
                            }
                            if (~data.indexOf("<button")){
                                data='Correcto';
                            }
                            valor = data.toString(); //El campo debe ser STRING para que funcione
                            valor = valor.replace("<br>","\n");  //Aqui es donde le digo al JavaScript que reemplace <br/> el salto de linea HTML por el salto de linea \n
                        return valor;
                        }
                    }
                },
            },
            {extend: 'print', text: 'Imprimir',
                customize: function (win){
                    $(win.document.body).addClass('white-bg');
                    $(win.document.body).css('font-size', '10px');
                    $(win.document.body).find('table')
                    .addClass('compact')
                    .css('font-size', 'inherit');
                },
                exportOptions: {
                    columns: ':visible',
                    stripNewlines: false,
                    format: {
                        body: function(data){
                            //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
                            var valor ='';
                            if (~data.indexOf("<span")){
                                var datos = $(data);
                                datos.find("span").each(function(index) {
                                    var text = $(this).text();//get span content
                                    $(this).replaceWith(text);//replace all span with just content
                                });
                                data=datos.text();
                            }
                            if (~data.indexOf("<button")){
                                data='Correcto';
                            }
                            valor = data.toString(); //El campo debe ser STRING para que funcione
                            valor = valor.replace("<br>","\n");  //Aqui es donde le digo al JavaScript que reemplace <br/> el salto de linea HTML por el salto de linea \n
                        return valor;
                        }
                    }
                },
            },
        ]},
        {extend: 'colvis', text: 'Adm',},
        {
            text: 'Ayuda',
            action: function ( e, dt, node, config ) {
                $.jAlert({
                    'title': 'Ayuda de Herramientas',
                    'content': msgtext,
                    'theme': 'blue',
                    'size': 'lg',
                    'showAnimation': 'fadeInUp',
                    'hideAnimation': 'fadeOutDown'
                });
            }
        },
    ],
    "initComplete": function (oSettings) {
        var oTable = this;
        oTable.fnPageChange('last');
    },
    "order": [],
});

En el Excel se ven los datos en una sola linea sin los saltos al igual que el PDF. Al imprimir en la consola el valor de data de cada td me sale lo siguiente:

<span class="text-danger">CONT-Pen. Valoracion</span>,<br><span class="text-danger">CONT-Pen. Valoracion</span>

Mediante el Script he logrado eliminar los tags convertidos en /n no me funcionan ni en excel ni en PDF.

HTML:

<table class="table table-striped table-bordered table-hover DataTable3">
    <thead>
        <tr>
            <th>ORT</th>
            <th>ORS</th>
            <th>Marca</th>
            <th>Estado ORT</th>
            <th>Fecha Pedido</th>
            <th>Info</th>
            <th>TRI</th>
            <th>Estado TRI</th>
            <th>Cont</th>
            <th>Estado CONT</th>
            <th>ETA Contedor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ORT0000061</td><td>ORS0000063</td>
            <td>Aviko</td><td>ORT-Cerrado</td>
            <td> FP 2018-Ene-08</td>
            <td><button type="button" class="btn btn-xs btn-info" data-toggle="modal" data-target="#modal-info-DET-DOC-FCI-ORT0000061">Info</button></td>
            <td>TRI0000013 (Consol.)</td>
            <td>TRI-Gestion</td>
            <td><span class="text-danger">CONT0000024</span>,<br><span class="text-danger">CONT0000025</span>,<br><span class="text-danger">CONT0000026</span></td>
            <td><span class="text-danger">CONT-Pen. Valoracion</span>,<br><span class="text-danger">CONT-Pen. Valoracion</span>,<br><span class="text-danger">CONT-Pen. Valoracion</span></td>
            <td><span class="text-danger">ETA 2017-Dic-14</span>,<br><span class="text-danger">ETA 2017-Dic-14</span>,<br><span class="text-danger">ETA 2017-Dic-14</span></td>
        </tr>
    </tbody>
</table>

Librerías:

/*
 * This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs/jszip-3.1.3/pdfmake-0.1.27/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/fc-3.2.2/r-2.1.1
 *
 * Included libraries:
 *   JSZip 3.1.3, pdfmake 0.1.27, DataTables 1.10.15, Buttons 1.3.1, Column visibility 1.3.1, HTML5 export 1.3.1, Print view 1.3.1, FixedColumns 3.2.2, Responsive 2.1.1
 */

/*!
9
  • Luego de googlear un poco llegue a esta respuesta, no te sirve para solucionar el problema?? es.stackoverflow.com/questions/90869/…
    – Oscar Cid
    Commented el 12 ene. 2018 a las 20:11
  • estoy revisando.
    – user46896
    Commented el 12 ene. 2018 a las 21:11
  • @OscarCid no me funciona, con ninguno de los botones de exportación.
    – user46896
    Commented el 12 ene. 2018 a las 21:21
  • 1
    ¿Es posible crear un ejemplo mínimo verificable para que veamos el problema funcionando? Quizás añadiendo algo de HTML o las bibliotecas que estés usando.
    – Alvaro Montoro
    Commented el 13 ene. 2018 a las 16:41
  • Porque no pones la parte del HTML para poder ayudar?
    – Alvarez
    Commented el 15 ene. 2018 a las 16:36

1 respuesta 1

1
+50

Te dejo una parte de la solucion. En tu codigo en la parte que querias reemplazar los "br" en realidad te estaban llegando "," asi que reemplace todas las comas con un regexp por "\n"

valor = valor.replace(/\,/g,"\n");

Con lo cual logras hacer los "enters" dentro de la celda. Ahora el inconveniente es que cuando abris el excel parece estar todo sobre la misma linea, pero si haces doble click sobre el campo y se actualiza el height de la linea, efectivamente estan los "enters".

restaria ver como al momento del export setear el height a cada linea, pero estoy saliendo y no puedo seguir ayudando!

Espero que esto ayude a encontrar la respuesta al problema.

EDIT

Agregado parte de la solución de @FranciscoNúñez

Se cambio tambien el replace de valor para mantener las comas a

valor = valor.replace(/\,/g,",\n");

Ejemplo funcional debajo:

$('.DataTable3').DataTable( {
    "autoWidth": true,
    "dom": '<"html5buttons"B>rt<"bottom"lfp><"clear">',
    "language": {
        "decimal":      ".",
        "emptyTable":       "No hay datos disponibles en la tabla",
        "info":         "Mostrando _START_ a _END_ de _TOTAL_ Registros",
        "infoEmpty":        "Mostrando 0 a 0 de 0 Registros",
        "infoFiltered":     "(Filtrado a Partir de _MAX_ Registros)",
        "infoPostFix":      "",
        "thousands":        ",",
        "lengthMenu":       "_MENU_",
        "loadingRecords":   "Cargando...",
        "processing":       "Procesando...",
        "search":       "",
        "searchPlaceholder": "Inserte su Busqueda",
        "searchPlaceholder": "Inserte su Busqueda",
        "zeroRecords":      "No Encontrado - lo siento",
        "paginate": {
            "first":        "Inicio",
            "last":         "Ultimo",
            "next":         "Siguiente",
            "previous":     "Anterior"
        },
        "aria": {
            "sortAscending":  ": activar para ordenar la columna ascendente",
            "sortDescending": ": activar para ordenar la columna descendente"
        }
    },
    "iDisplayLength": 10,
    "lengthMenu": [[5,10, 25, 50, 100, 250, 500, 1000, -1], [5,10, 25, 50, 100, 250, 500, 1000, "All"]],
    buttons: [{
        extend: 'collection',
        text: 'Herramientas',
        buttons: [
            {
            	extend: 'excel', title: 'ArchivoExcel', text: 'Excel',
                exportOptions: {
                    columns: ':visible',
                    stripNewlines: false,
                    format: {
                        body: function(data){
                             var valor ='';
                            if (~data.indexOf("<span")){
                                var datos = $(data);
                                datos.find("span").each(function(index) {
                                    var text = $(this).text();//get span content
                                    $(this).replaceWith(text);//replace all span with just content
                                });
                                data=datos.text();
                            }
                     
                            if (~data.indexOf("<button")){
                                data='Correcto';
                            }
                            valor = data.toString(); //El campo debe ser STRING para que funcione
                            valor = valor.replace(/\,/g,",\n");  //aca te llegan , y no <br> asi que reemplazo eso.
           
                        return valor;
                        }
                    },
                },
                customize: function(xlsx) { 
					var styles = $('cellXfs', xlsx.xl['styles.xml']); 
					styles.append('<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1">'+'<alignment vertical="top" wrapText="1" />'+'</xf>'); 
					var sheet = xlsx.xl.worksheets['sheet1.xml']; 
					var col = $('c', sheet); col.each(function () {
						$(this).attr( 's', '55'); 
					}); 
					$('row:first c', sheet).attr( 's', '32' ); 
				}
            },
   
        ]},
        {extend: 'colvis', text: 'Adm',},
        {
            text: 'Ayuda',
            action: function ( e, dt, node, config ) {
                $.jAlert({
                    'title': 'Ayuda de Herramientas',
                    'content': msgtext,
                    'theme': 'blue',
                    'size': 'lg',
                    'showAnimation': 'fadeInUp',
                    'hideAnimation': 'fadeOutDown'
                });
            }
        },
    ],
    "initComplete": function (oSettings) {
        var oTable = this;
        oTable.fnPageChange('last');
    },
    "order": [],
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<table class="table table-striped table-bordered table-hover DataTable3">
    <thead>
        <tr>
            <th>ORT</th>
            <th>ORS</th>
            <th>Marca</th>
            <th>Estado ORT</th>
            <th>Fecha Pedido</th>
            <th>Info</th>
            <th>TRI</th>
            <th>Estado TRI</th>
            <th>Cont</th>
            <th>Estado CONT</th>
            <th>ETA Contedor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ORT0000061</td><td>ORS0000063</td>
            <td>Aviko</td><td>ORT-Cerrado</td>
            <td> FP 2018-Ene-08</td>
            <td><button type="button" class="btn btn-xs btn-info" data-toggle="modal" data-target="#modal-info-DET-DOC-FCI-ORT0000061">Info</button></td>
            <td>TRI0000013 (Consol.)</td>
            <td>TRI-Gestion</td>
            <td><span class="text-danger">CONT0000024</span>,<br><span class="text-danger">CONT0000025</span>,<br><span class="text-danger">CONT0000026</span></td>
            <td><span class="text-danger">CONT-Pen. Valoracion</span>,<br><span class="text-danger">CONT-Pen. Valoracion</span>,<br><span class="text-danger">CONT-Pen. Valoracion</span></td>
            <td><span class="text-danger">ETA 2017-Dic-14</span>,<br><span class="text-danger">ETA 2017-Dic-14</span>,<br><span class="text-danger">ETA 2017-Dic-14</span></td>
        </tr>
    </tbody>
</table>

5
  • solo me funciona en el PDF no en el Excel, ademas yo quiero que se mantenga la coma en la linea asique remplace por: valor = valor.replace(/\,/g,"\n"); a este: valor = valor.replace(/\,/g,",\n");pero como te comento solo me funciona al Exportar a PDF, no funciona al excel ni al imprimir.
    – user46896
    Commented el 17 ene. 2018 a las 21:43
  • Agregando valor = valor.replace(/\,/g,",\r\n"); Logro el Efecto que me indicas en el Excel. pero como dices hay que entrar y ver la celda para que se deje ver el salto de linea a simple Vista no lo hace...
    – user46896
    Commented el 17 ene. 2018 a las 21:56
  • hice un par de arreglos y con esto funciono: customize: function(xlsx) { var styles = $('cellXfs', xlsx.xl['styles.xml']); styles.append('<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1">'+'<alignment vertical="top" wrapText="1" />'+'</xf>'); var sheet = xlsx.xl.worksheets['sheet1.xml']; var col = $('c', sheet); col.each(function () { $(this).attr( 's', '55'); }); $('row:first c', sheet).attr( 's', '32' ); }
    – user46896
    Commented el 19 ene. 2018 a las 22:54
  • agrega lo que comento a la respuesta
    – user46896
    Commented el 21 ene. 2018 a las 20:38
  • Agregado @FranciscoNúñez ! Commented el 21 ene. 2018 a las 21:10

Tu Respuesta

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