I have a question regarding the CSV export

I have a question regarding the CSV export

kct3937kct3937 Posts: 8Questions: 2Answers: 0

I included four buttons for the table in question...Copy, Excel, CSV, and PDF. Three of which work fine, although the PDF output leaves things to be desired. The problem lies in the CSV export.
On my local development server everything is fine. ON the production server, everything is fine for each user...when I check using their logins.

However one user...so far... has reported an problem that I cannot find any reference to in these pages. His screen reports that a blob has been made instead of the requested csv file. The blob contains all the correct information....just not comma separated.

The copy button works fine and generates CSV.

Is this...error... being caused by the user computer (MacBook Pro) or what? I cannot recreate it on my computer

I attach a screenshot to explain and ask if you have ever seen this before...as well as what can be done.
I also enclose all the links in the file in question

From the head...


<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script> <!-- Bootstrap CSS files --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker3.min.css"/> <!-- orig CSS files --> <link href="//cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.1.1/css/buttons.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/select/1.1.0/css/select.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-colvis-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0/datatables.min.css"/> <!-- datatables styling css --> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css"> <!-- --> <!-- The wss css --> <!-- from datatables buttons --> <link rel="stylesheet" href="//code.jquery.com/jquery-1.12.4.js"> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"> <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"> <link rel="stylesheet" href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"> <link rel="stylesheet" href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"> <link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"> ``` The javascript at the end of the body...



<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.1.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js"></script>

<script>
$(document).ready(function() {
    var uname = 'George ';
    var fname = 'Export';
    var from = '12.01.2016';
    var to = '12.28.2016';

    var drange = from +'-'+to; 

        $('#tsSumm').DataTable( {
            // autoWidth: 'false',
            // searching: false,
            dom: '<<B>fr<t>lip>',
            buttons: [
                'copy', 'excelHtml5', 'csv', 
                {
                'extend': 'pdf',
                'text':'PDF/L',
                'orientation': 'landscape',
                'pageSize': 'LETTER',
                'filename': uname + ' '+fname + ' '+drange,
                exportOptions: {
                    modifier:{page: 'current'},
                    columns: [0,1,2,3,4,5,6,7]
                    }
                } 
            ],
            'sorting':[[1,'desc']]
        } );
} );

</script>
````
As you can see, I included an Excel button, but this button generates an XML file and not an XLS or XLSX file. Since the CSV and copy are giving the desired result...with the exception of the problem of the BLOB, I am considering dumping the excel button.

Thanks

kct3937

Answers

  • kthorngrenkthorngren Posts: 20,448Questions: 26Answers: 4,800
    edited February 2017

    Looks like you might be loading jquery.dataTables.min.js and dataTables.buttons.min.js twice both are different versions. Likely to cause problems. I'd recommend removing these:

    <script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="//cdn.datatables.net/buttons/1.1.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" 
    

    Plus the other scripts are being loaded with the wrong syntax:

    <!-- from datatables buttons -->
    <link rel="stylesheet" href="//code.jquery.com/jquery-1.12.4.js">
    <link rel="stylesheet" href="//code.jquery.com/jquery-1.12.4.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
     
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js">
    <link rel="stylesheet" href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js">
    <link rel="stylesheet" href="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js">
    <link rel="stylesheet" href="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js">
     ```
    
    They should look like this:
    


    ```

    Finally you may want to use a more current version of the datatables select script:
    //cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js

    Kevin

  • kct3937kct3937 Posts: 8Questions: 2Answers: 0

    Thanks..I'll give it a go. It was driving me crazy. I also picked up on the js as stylesheet error

  • kct3937kct3937 Posts: 8Questions: 2Answers: 0

    All helpful comments, but it doesn't give me any idea why the one user is getting a 'BLOB' indicator on his screen instead of a CSV download and that the code behind the COPY button will deliver a CSV output when the 'COPIED' data is pasted into an Excel sheet.

    In other words, the CSV can be generated, it's just not being generated by the CSV button on a user's computer.
    AS I said ALL buttons work perfectly in both dev and prod on my computer ...inspite of the errors previously noted and fixed.

    IS this an operating system error since I am using OSX 10.11.6 and I believe he is using Sierra...whatever number that is?

  • kthorngrenkthorngren Posts: 20,448Questions: 26Answers: 4,800

    I use Sierra and don't have any issues with the exported data. Have you tried different web browsers on that Mac?

    Which browsers have the problem?

    Did you make sure to clear the cache after fixing the loading of the JS plugins?

    Kevin

  • kct3937kct3937 Posts: 8Questions: 2Answers: 0

    The user entered the app as a brand new instance....not one that had already been opened.
    As I said, so far only he has experienced the 'BLOB' showing on the screen.

    He has advised me that he will try again later today.

    I personally have not seen this action on my screen and since I have admin rights, I have logged in as each of the users to check for the action and did not see it. And yes I did instruct him to clear his cache, but I hope that the cold restart will cure his problem.

    He is using Safari as are most of the users. All users use Mac's. I use Chrome/Canary but test the code on all browsers through Sublime Text as a matter of course and did not see this action on any browser.

    BTW my computer recognized that error that I made with the Javascripts being called as links but continued anyway. Maybe his burped because he was running the code before I noticed the error.

    Thank you for taking the time to respond as I have never seen anything like this in all my years of programming....and they are many.

  • kct3937kct3937 Posts: 8Questions: 2Answers: 0

    Now an error related to the Scripts has shown up...

    dataTables.select.min.js:11 Uncaught TypeError: Cannot set property 'select' of undefined
        at dataTables.select.min.js:11
        at dataTables.select.min.js:5
        at dataTables.select.min.js:5
    
    

    This after I added the latest version of the scripts in the locations that I previously indicated. Inspite of the error message, the module seems to be delivering the proper information.

    However, this brings me back to a previous question...IS there a recommended order for adding the CSS and Scripts into the HtML?

  • kthorngrenkthorngren Posts: 20,448Questions: 26Answers: 4,800

    IS there a recommended order for adding the CSS and Scripts into the HtML?

    You can use the Download Builder to see the recommended order. Select your options then under Package Options choose single or individual files and the Package Result will show the order.

    Kevin

This discussion has been closed.