Home / Questions / 90869
Accepted
Cristina Carrasco
Asked: 2020-07-27 15:38:40 +0800 CST 2020-07-27 15:38:40 +0800 CST

How to display cells with line break using Jquery DataTables when exporting to PDF?

  • 772

Here is the example without the expected functionality (showing line breaks in my cells when exporting to 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>

The table as it should look when exporting: enter image description here

How it looks when exporting to PDF:

enter image description here

This question was asked by someone and was previously deleted, I added it to put the answer and make it useful for the community.

javascript

1 Answers

  1. Best Answer

    This is the possible solution I found.

    The detail is to extend the functionality of the export button to replace it <br/>with \n, I hope it will be useful to you, greetings.

    $('#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>

    Example after export:

    enter image description here

    • 5