Rss

  • youtube
  • linkedin
  • google

DataTables + HTML 5 Botões de exportação + Laravel-Mix (Webpack)

Compartilhe em suas mídias sociais
  •  ;
  •  ;
  •  ;
  •  ;

Nos últimos dias, Eu experimentei um problema ao tentar usar DataTables e Bootstrap 4 com suporte para exportar os resultados para Excel e PDF usando Laravel-Mix. Após horas e horas tentando colocar todos os scripts para trabalharem juntos, Eu finalmente consegui. Então, decidi escrever este pequeno Como Fazer para aqueles com o mesmo tipo de problemas.

Em primeiro lugar, precisamos de um Projeto Laravel funcional configurado e executando.

Vamos instalar todas as bibliotecas necessárias com o comando abaixo.

Isso instala (enquanto escrevia este texto) jQuery 3.2, Bootstrap 4.0, DataTables.net 1.10.19, DataTables.net-buttons 1.5.6, DataTables.net-responsive 2.2.3, fontawesome-free 5.8.1, jszip 3.2.1 e pdfmake 0.1.54.

Adicione estas linhas ao seu bootstrap.js.

Nota: Se você usar a configuração padrão, webpack.mix.js terá uma entrada apontando para resource/js/app.js que inclui bootstrap.js.

Compreendendo as linhas acima.
window.$ = window.jQuery = require(‘jquery’); é o principal. É diferente do original. Verificar as diferenças. Colocamos o objeto jQuery no objeto window para facilmente instanciar quando precisamos acrescentar outras bibliotecas CommonJs.

Após, Temos que carregar a lib Bootstrap. Facilmente feito com require(‘bootstrap’) linha.

Agora começa a inclusão de Datatables. Para ExcelHtm5 Export é obrigatório para carregar jszip. A linha janela. JSZip = exigem( ;jszip’; ); acrescentar o objeto JSZip em window e torna-o disponível para Datatables. Então, a ordem importa.

Agora podemos incluir as libs Datatables. Vamos usar Datatables com Bootstrap 4 e Buttons. (linhas 7 até 12).

As linhas 15 até 17 inclui pdfMake e é obrigatório para pdfHTML5 Export.

Precisamos incluir alguns arquivos CSS também. Mais uma vez, na configuração padrão, temos o arquivo resource/sass/app.scss para incluir alguns arquivos Sass. Adicione as linhas abaixo.

Com todas as entradas em nossos arquivos, Basta executar npm run dev comando para construir App.css e App.js arquivos que devem ser incluídos na lâmina com {{ mix(‘css/app.css’)}} e {{mix(‘js/app.js’)}}.

Aqui está um modelo para verificar se todos os scripts estão funcionando bem.


Compartilhe em suas mídias sociais
  •  ;
  •  ;
  •  ;
  •  ;

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Este site utiliza o Akismet para reduzir spam. Fica a saber como são processados os dados dos comentários.