5

Aquí esta el ejemplo sin la funcionalidad esperada (que se muestren los saltos de lineas de mis celdas al exportar a PDF):

$('#example').DataTable({
    dom: 'Bfrtpi',
    buttons: [{
      extend: 'pdfHtml5',
      text: 'Save current page'
     }],
    columns: [
        {
            title: 'Person name',
            defaultContent: '', // if no content set in field
            data: 'name'
        },
        {
            title: 'Person age',
            type: 'num', // this would be a number field
            data: 'age'
        }
    ],
    data: [
        {name: 'John <br/> Doe', age: 25},
        {name: 'Michael <br/> Jackson', age: 30},
        {name: 'Tom Jones', age: 32},
        {name: 'Monica Beluchi', age: 34}
    ]
});
<link href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"/>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.colvis.min.js"></script>




<table id="example" class="display" cellspacing="0"></table>
<div id="r"> </div>

La tabla como se debería de ver al exportar: introducir la descripción de la imagen aquí

Como se ve al exportar al PDF:

introducir la descripción de la imagen aquí

Esta pregunta la hizo alguien y fue borrada anteriormente, la agregue para poner la respuesta y que sea de utilidad para la comunidad.

1 respuesta 1

5

Esta es la posible solución que encontré.

El detalle es extender la funcionalidad del botón exportar para que reemplace <br/> por \n, espero que te sea de utilidad, saludos.

$('#example').DataTable({
    dom: 'Bfrtpi',
    buttons: [{
      extend: 'pdfHtml5',
      text: 'Save current page',
      exportOptions: {
        format: {
          body: function(data){
            //Antes de mandarse al PDF cada valor pasa por aqui y es evaluado
            var 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;
            }
          }
        }
      }
 		],
    columns: [
        {
            title: 'Person name',
            defaultContent: '', // if no content set in field
            data: 'name'
        },
        {
            title: 'Person age',
            type: 'num', // this would be a number field
            data: 'age'
        }
    ],
    data: [
        {name: 'John <br/> Doe', age: 25},
        {name: 'Michael <br/> Jackson', age: 30},
        {name: 'Tom Jones', age: 32},
        {name: 'Monica Beluchi', age: 34}
    ]
});
<link href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"/>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.0.1/js/buttons.colvis.min.js"></script>




<table id="example" class="display" cellspacing="0"></table>
<div id="r"> </div>

Ejemplo después de exportar:

introducir la descripción de la imagen aquí

5
  • Buenas , sabes como podría hacer un salto de linea la momento de exportar a excel , tengo problema al exportar el pide pagina , no se si podrias ayudarme. este es mi ejemplo :jsfiddle.net/Eufragio/u342qgoz/1 Commented el 14 ene. 2019 a las 15:25
  • jsfiddle.net/6x5rzsdn/1 Parece que esto funciona, pero tienes que darle doble click a la celda para visualizarlo, nose si es por mi version de excel... La mejor solución seria poner varios renglones(rows de excel) para el footer. Commented el 14 ene. 2019 a las 22:08
  • Buenas cristina , ya encontré mi solución, la compartire para que le sirva a otra persona : jsfiddle.net/m26nx9yg , Feliz dia gracias por tu tiempo Commented el 17 ene. 2019 a las 20:21
  • Muchas gracias!!! :D Genial Commented el 17 ene. 2019 a las 22:28
  • Que ingenioso lo pusiste como formula (Y) excelente Commented el 17 ene. 2019 a las 22:29

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.