Home > database >  Problema Datatable PDF
Problema Datatable PDF

Time:07-08

I am building a Datatable and everything is fine, except for one small detail. Although I have the PDF button apparently fine, the PDF option does not appear, only the options to copy, print and Excel appear. Any idea why?

This is my code:

$(document).ready(function () {
       $('#html5-extension tfoot th').each(function () {
           var title = $(this).text();
           $(this).html('<input type="text" placeholder="Filtrar.." />');
       });

       var table = $('#html5-extension').DataTable({
           "dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p><"clearfix">',
           "responsive": false,
           "language": {
               "url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
           },
            "ordering": false,
           "initComplete": function () {
               this.api().columns().every(function () {
                   var that = this;

                   $('input', this.footer()).on('keyup change', function () {
                       if (that.search() !== this.value) {
                           that
                               .search(this.value)
                               .draw();
                       }
                   });
               })
           },
           buttons: [
              {
                extend: 'copyHtml5',
                footer: true,
                text: 'Copiar',
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               },
                text: '<i ></i><span> Copiar</span>'
              },
              {
                extend: 'excelHtml5',
                footer: true,
                autoFilter: true,
                sheetName: 'Ordenes de Trabajo',
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               },
                text: '<i ></i><span> Generar Excel</span>',
                filename: 'Listado de Ordenes de Trabajo',
              },
              {
                extend: 'pdfHtml5',
                footer: true,
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               },
                text: '<i ></i><span> Generar PDF</span>',
                filename: 'Listado de Ordenes de Trabajo',
              },
              {
                extend: 'print',
                footer: true,
                exportOptions: {
                   columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]
               },
                text: '<i ></i><span> Imprimir</span>',
              }
          ],

           "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]]
       });

   });

I use datatable included in Bootstrap:

    <link rel="stylesheet" type="text/css" href="plugins/table/datatable/datatables.css">
    <link rel="stylesheet" type="text/css" href="plugins/table/datatable/custom_dt_html5.css">
    <link rel="stylesheet" type="text/css" href="plugins/table/datatable/dt-global_style.css">

//JS

<script src="plugins/table/datatable/datatables.js"></script>
<script src="plugins/table/datatable/button-ext/dataTables.buttons.min.js"></script>
<script src="plugins/table/datatable/button-ext/jszip.min.js"></script>
<script src="plugins/table/datatable/button-ext/buttons.html5.min.js"></script>
<script src="plugins/table/datatable/button-ext/buttons.print.min.js"></script>

As I say, everything works correctly (filters, exports...etc) Only the PDF button is not shown. A help please? Thanks.

CodePudding user response:

Where are the PDFMake library and related VFS Fonts library? See the enter image description here

  • Related