Problema Datatable PDF

Question

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 class="glyphicon glyphicon-floppy-disk"></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 class="glyphicon glyphicon-download-alt"></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 class="glyphicon glyphicon-save-file"></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 class="glyphicon glyphicon-print"></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.

Answer 1

Where are the PDFMake library and related VFS Fonts library? See the example - specifically, look at the list of libraries shown in the JavaScript tab on that page:

In addition to the above code, the following Javascript library files are loaded for use in this example:

https://code.jquery.com/jquery-3.5.1.js

https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js

https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js

https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js

https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js

You can also use the download builder as another way to get the correct set of resources you need.