Export in IE11 with server-side processing not working

culter

Hi, I have Export button for csv which is working in all major browsers except IE11 and unfortunately I need to run it just in this browser

I found this thread:

https://datatables.net/forums/discussion/comment/133961/#Comment_133961

and set all the paths to the latest CDN versions:

1.10.19 jquery.dataTables.min.css
1.5.6 buttons.dataTables.min.css
jquery-3.3.1.js
1.10.19 jquery.dataTables.min.js
1.5.6 dataTables.buttons.min.js
3.1.3 jszip.min.js
0.1.53 pdfmake.min.js
0.1.53 vfs_fonts.js
1.5.6 buttons.html5.min.js

This is my code:

$(document).ready(function() {
   var table = $('#myTable').DataTable( {

        dom: 'Bfrtip',
        "buttons": [
        {
                extend: 'collection',
                text: 'Export',
                buttons: [
                        {
                                extend: 'csvHtml5',
                                text:       'CSV',
                                action: function (e, dt, node, config) {
                                        $.ajax({
                                                "url": "scripts/export.php",
                                                "data": dt.ajax.params(),
                                                "success": function(res, status, xhr) {
                                                    var csvData = new Blob([res], {type: 'text/csv;charset=utf-8;'});
                                                    var csvURL = window.URL.createObjectURL(csvData);
                                                    var tempLink = document.createElement('a');
                                                    tempLink.href = csvURL;
                                                    tempLink.setAttribute('download', 'my_export.csv');
                                                    tempLink.click();
                                                }
                                        });
                                }
                        }
 ...

Did I omit something ? Please help.
Thank you in advance.

colin

Hi @culter ,

This thread should help, it's asking the same thing. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Cheers,

Colin

culter

Hi Colin, thank you. Isn't this fix already implemented in the newest 1.5.6 version? The post is from 07/2018. As far as I know, nightly version is for testing purposes only and therefore I would like to avoid using it in production environment.

colin

Hi @culter ,

Yep, 1.5.6 was released recently, so good point. I just tried standard pages with IE11 and they're all fine, so it must be something specific to your page/data. Could you link to a test case or to your page please so we can take a look.

Cheers,

Colin

culter

I have created test case here
live.datatables.net/qoyepowe/8/edit

With the csvHtml5 button it is working fine, but only for the current page (I'm using server-side processing). When I uncomment the 'action' part to get all the data, it's still not working in IE. In any other browser it's working and return correct .csv file. In this test case It's sending request to external script which I cannot provide because of sensitive data, so it's not working.

Is it possible to rewrite the 'action' function to work in IE or is there some other way how to do it? Thank you.

kthorngren

When using IE do you see the ajax request and response?

My suggestiion is to use console.log statements to verify the action function is being called and see what is happening in the success function. I would also look at the IE console for errors.

If the action function is called but something is not working in the ajax function then its likely not a Datatables issue but possibly an incompatibility with one of the statements in the success function.

Kevin

culter

Great idea, Kevin. I added 2 lines with console.log to my code:

"success": function(res, status, xhr) {
                console.log("status: " + status + " xhr: " + xhr + " res: " + res);
      var csvData = new Blob([res], {type: 'text/csv;charset=utf-8;'});
      var csvURL = window.URL.createObjectURL(csvData);
      var tempLink = document.createElement('a');
                console.log("csvData: " + csvData + " csvURL: " + csvURL + " tempLink: " + tempLink);
      tempLink.href = csvURL;
      tempLink.setAttribute('download', 'my_export.csv');
      tempLink.click();
 }

and I've got these outputs from Chrome:

status: success xhr: [object Object] res: {"Number, Validity, ...

csvData: [object Blob] csvURL: blob:http://192.168.1.62/ba304cda-55ef-4d5e-8c7e-1fd7742dcfd3 tempLink: 

and these from IE:

status: success xhr: [object Object] res: {"Number, Validity, ...

csvData: [object Blob] csvURL: blob:0649CFEB-5D23-4644-A740-5C0D072967E9 tempLink: 

The one difference I noticed is missing URL in the IE version of csvURL variable, which might be the problem.

Do you think the same? Thank you

kthorngren

The one difference I noticed is missing URL in the IE version of csvURL variable, which might be the problem.
Do you think the same?

Yep. According to the URL.createObjectURL()
docs it seems IE compatibility is unknown. Found this SO thread:
https://stackoverflow.com/questions/24007073/open-links-made-by-createobjecturl-in-ie11

According to that thread Blob URL is not supported in IE. There is an example that may work.

Kevin

culter

Thanks Kevin, that looks good. I have rewrite it to my needs

"buttons": [
    {
    extend: 'csvHtml5',
    action: function (e, dt, node, config) {
    $.ajax({
         "url": "scripts/server_processing_export.php",
         "data": dt.ajax.params(),
         "success": function(res, status, xhr) {

             function createDownloadLink(anchorSelector, str, fileName){
             if(window.navigator.msSaveOrOpenBlob) {
                 var fileData = [xhr];
                 blobObject = new Blob(fileData);
                 $(anchorSelector).click(function() {
                     window.navigator.msSaveOrOpenBlob(blobObject, 'export.csv');
                     window.navigator.msSaveOrOpenBlob(blobObject, 'export.csv');
                });

             } else {
                 // THIS PART IS WORKING FINE FOR OTHER BROWSERS
                 // WITH DATATABLES BUTTON
                 var csvData = new Blob([res], {type: 'text/csv;charset=utf-8;'});
                 var csvURL = window.URL.createObjectURL(csvData);

                 var tempLink = document.createElement('a');
                 tempLink.href = csvURL;
                 tempLink.setAttribute('download', 'export.csv');
                 tempLink.click();
            }
        }

but I have problem to make it work with CSV export button generated by dataTable's "buttons" like it is working for other browsers (in else condition).

culter

I figured it out, here is the code:

if(window.navigator.msSaveOrOpenBlob){
          var fileName = "somar.csv";
          var fileData = [res];
          blobObject = new Blob(fileData);
          console.log("blobObject: " + blobObject);

          window.navigator.msSaveOrOpenBlob(blobObject,fileName);                                                                        
          window.navigator.msSaveOrOpenBlob(blobObject,fileName);

          } else {...}