Exportando tabelas do DataTables

DataTables é uma biblioteca JavaScript fantástica para lidar com tabelas dinâmicas em páginas da web. Entretanto, podemos estender ainda mais suas funcionalidades, inserindo botões que permitem a exportação dos dados da tabela em múltiplos formatos, como por exemplo, tabular (para cópia), CSV, Excel, PDF e até mesmo HTML para impressão. Veja um exemplo:

Observe o que acontece quando clicamos no botão PDF:

Para adicionar botões de exportação de tabelas, inclua no seu código:

  <!-- DataTables JS + botões de exportação -->
  <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">

  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">

  <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>

Agora, para usá-lo basta chamar uma tabela da seguinte forma:

<!-- como usar -->
$(document).ready( function () {
    $('#tabela').DataTable(
    {
    
            dom: 'Bfrtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
    }
  );
} ); 

Note que para este código funcionar, você precisará do jquery e deverá ter uma tabela com <tbody> e <thead>.

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

<table class="table table-hover small table-striped" id="tabela">
      <thead>
        <tr>
          <th>ID</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
        </tr>
      </tbody>
</table>