csvHtml5 custom export not working properly

csvHtml5 custom export not working properly

QuentinDenisotQuentinDenisot Posts: 3Questions: 1Answers: 0

Hi,

I have a problem with the customize function for the csv export.

Actually I have a page on my website where you can specify the csv export config (date format, decimal format, field separator, field boundary, etc.), so first I retreive this data, then I process the default csv string to match my config, by changing the field separator etc.

The processing works well, my custom csv is properly formatted.

Here is the code I use for the buttons :

buttons: [
    {
        extend: 'csv',
        filename: 'datatables_csv',
        customize: async function(csv)
        {
            const customCSV = await defaultCSVBuilder(csv);

            console.log(customCSV);

            return customCSV;
        }
    }
]

As you can see I pass the default csv string to my custom csv builder to make some processing. Howerver when I open the downloaded csv, the content is : [object Promise]

I don't understand why despite using async / await the promise doesn't seem to resolve. So I put one await sleep(5sec) inside my custom function, before the end, and as soon as I clicked the download button, the file was downloaded, then 5 seconds later my custom csv file was displayed in the console. So it seems that customize() is not waiting for my custom function to resolve.

I don't feel like I have made a mistake but there is probably something that I don't understand, your help is welcome!

(I based my custom function on the comment on this page : https://datatables.net/reference/button/csv)

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,214Questions: 1Answers: 10,415 Site admin

    Hi,

    The code calling customize doesn’t expect a Promise in return, so I’m afraid you cannot use an async function. That’s why you are just getting the toString() of your Promise in the file.

    What is your defaultCSVBuilder function doing? Can it be made sync? If not, you’d need a little modification to Buttons to allow for the promise return.

    Allan

  • QuentinDenisotQuentinDenisot Posts: 3Questions: 1Answers: 0

    My defaultCSVBuilder function takes the csv generated by DataTables as parameter.

    First there is an async call (using fetch) to retrieve some data from my database : field boundary, field separator, etc. as this is something you can configure for every csv export on my website.

    Then the csv generated by DataTables which is passed as parameter is parsed so I can replace field separator / boundary, format numbers and dates etc.

    Finally the new csv is returned.

    So as it can't be made sync, what would you advise me to modify to allow a promise return?

  • allanallan Posts: 63,214Questions: 1Answers: 10,415 Site admin
    Answer ✓

    This is the part of the code that would need to be changed. Assign the return from the function to a different variable (since output is not a Promise) - then check to see if the return is a Promise or not. If not, carry on, if it is you'll need to wait for it to resolve with a then function.

    Allan

  • QuentinDenisotQuentinDenisot Posts: 3Questions: 1Answers: 0

    I added async / await on the function, now it works well, thank you!

    action: async function ( e, dt, button, config ) {
        this.processing( true );
    
        // Set the text
        var output = _exportData( dt, config ).str;
        var info = dt.buttons.exportInfo(config);
        var charset = config.charset;
    
        if ( config.customize ) {
            output = await config.customize( output, config, dt );
        }
    
This discussion has been closed.