The excel button is not displayed

devroot

Hello community.

I've been doing a React project with Datatables, but it doesn't show me the excel download button.

Has anyone gone through this before? I share with you my project code.

I will appreciate your comments.

import React, { useState, useEffect } from 'react';
import Navbar from './Navbar';
import Footer from './Footer';
import ItemStudent from './ItemStudent';
import $ from 'jquery';
import 'datatables.net-dt';
//import 'datatables.net-bs4';
import 'datatables.net-responsive-dt';
import 'datatables.net-buttons-dt';
import 'jszip/dist/jszip.js'; // For Excel export
import pdfMake from 'pdfmake'; // For PDF export

require('pdfmake/build/vfs_fonts.js');
require('datatables.net-buttons/js/buttons.colVis.js');
require('datatables.net-buttons/js/buttons.flash.js');
require('datatables.net-buttons/js/buttons.html5.js');
require('datatables.net-buttons/js/buttons.print.js');


$('#acaRecord').DataTable({
                    title: "Récord Académico",
                    destroy: true,
                    dom: 'Bfrtip',
                    buttons: {
                        buttons: [
                            { extend: 'copy', text: 'COPIAR' },
                            { extend: 'csv', text: 'CSV' },
                            { extend: 'pdf', text: 'PDF' },
                            { extend: 'print', text: 'IMPRIMIR' },
                            { extend: 'excel', text: 'EXCEL' }
                        ]
                    },
                    data: json,
                    columns: [
                        { title: 'Periodo Académico', name: 'periodacad', targets: 0, data: 'periodo_academico' },
                        { title: 'Código del curso', name: 'coursecode', targets: 1, data: 'codigo_curso' },
                        { title: 'Nombre del curso', name: 'coursename', targets: 2, data: 'nombre_curso' },
                        { title: 'Promedio Final', name: 'finalavera', targets: 3, data: 'nota_final' }
                    ],
                    responsive: true,
                    language: {
                        search: "Buscar: ",
                        searchPlaceholder: "Ingrese valor...",
                        lengthMenu: "Mostrar _MENU_ registros por página",
                        zeroRecords: "No se encontró resultados",
                        info: "Mostrando página _PAGE_ de _PAGES_",
                        infoEmpty: "No hay registros disponibles",
                        infoFiltered: "(filtered from _MAX_ total records)",
                        paginate: {
                            previous: "Anterior",
                            next: "Siguiente"
                        }
                    }
                });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

An obvious error is that you have two layers of buttons declarations:

                    buttons: {
                        buttons: [
                            { extend: 'copy', text: 'COPIAR' },
                            ...

I'm not sure whether that would cause the issue, but it's definitely worth fixing.

It just needs the array (the second), not the object (the first). Try changing it to this and see if that helps (live example here),

                    dom: 'Bfrtip',
                    buttons: [
                        { extend: 'copy', text: 'COPIAR' },
                        { extend: 'csv', text: 'CSV' },
                        { extend: 'pdf', text: 'PDF' },
                        { extend: 'print', text: 'IMPRIMIR' },
                        { extend: 'excel', text: 'EXCEL' }
                    ],
                    data: json,

Out of interest, are the other buttons being displayed as expected?

Colin

allan

Try:

import DataTable from 'datatables.net-dt';
...
import JSZip from 'jszip/dist/jszip.js'

DataTable.Buttons.jszip(JSZip);

This is the relevant function.

Allan