2

I'm working inside a Kendo Grid in a Kendo.MVC, Razor, C# project. I want the user to click on a row and download a file associated with that row. I got the on click event working. I found code to download the file that works in Chrome, but not IE 11. The code creates a new hyperlink and then calls a mouse click event. How do I do the same thing for IE11?

Here's the code (from SO, many thanks to lajarre for getting me this far!)

function onChange(arg)
{
    var filePath = this.dataItem(this.select()).InvoicePath;
    SaveToDisk(filePath, "PastInvoice");
}

function SaveToDisk(fileURL, fileName)
{
    var save = document.createElement('a');
    save.href = fileURL;
    save.target = '_blank';
    save.download = fileName || 'unknown';

    var evt = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': false
    });
    save.dispatchEvent(evt);
    (window.URL || window.webkitURL).revokeObjectURL(save.href);
}

The original author suggested using window.open(fileURL, fileName), but this just creates the file in a new tab, which do not meet my requirements.

Brief summation: this code works in Chrome, how do I get the same functionality for IE11?

** UPDATE # 1 **

I've been trying several methods I've found online, but can't get any of them to work. See the "catch" portion of the code where I've got different ways to download a file in IE. I've listed what happens and the related links. I think several of these are close, I just am missing something. Can someone help me get this to work?

function SaveToDisk(fileURL, fileName)
{
    var save = document.createElement('a');
    save.href = fileURL;
    save.target = '_blank';
    save.download = fileName || 'unknown';

    try
    {
        var evt = new MouseEvent('click', {
            'view': window,
            'bubbles': true,
            'cancelable': false
        });
        save.dispatchEvent(evt);

        (window.URL || window.webkitURL).revokeObjectURL(save.href);
    }
    catch (ex)
    {
        // Just opens the file in a new window https://www.codeproject.com/Tips/893254/JavaScript-Triggering-Event-Manually-in-Internet-E
        //var event = document.createEvent("MouseEvent");
        //event.initMouseEvent("click",true,false,window,0,0,0,0,0,false,false,false,false,0,null);
        //save.dispatchEvent(event)

        // Blob is undefined https://stackoverflow.com/questions/18394871/download-attribute-on-a-tag-not-working-in-ie
        //navigator.msSaveBlob(blob, fileName);

        // Nothing happened, no errors, no download https://stackoverflow.com/questions/18394871/download-attribute-on-a-tag-not-working-in-ie
        //var oIframe = window.document.createElement('iframe');
        //var $body = jQuery(document.body);
        //var $oIframe = jQuery(oIframe).attr({
        //    src: fileURL,
        //    style: 'display:none'
        //});
        //$body.append($oIframe);

        // Throw error, angular undefined  https://stackoverflow.com/questions/18394871/download-attribute-on-a-tag-not-working-in-ie
        //var blob = new Blob([fileURL], { type: "text/plain;charset=utf-8;" });
        //var anchor = angular.element('<a/>');

        //if (window.navigator.msSaveBlob)
        //{ // IE
        //    window.navigator.msSaveOrOpenBlob(blob, fileName)
        //} else if (navigator.userAgent.search("Firefox") !== -1)
        //{ // Firefox
        //    anchor.css({ display: 'none' });
        //    angular.element(document.body).append(anchor);

        //    anchor.attr({
        //        href: 'data:attachment/csv;charset=utf-8,' + encodeURIComponent(data),
        //        target: '_blank',
        //        download: fileName
        //    })[0].click();

        //    anchor.remove();
        //} else
        //{ // Chrome
        //    anchor.attr({
        //        href: URL.createObjectURL(blob),
        //        target: '_blank',
        //        download: fileName
        //    })[0].click();
        //}

        // Throws error "no such interface supported" on createObjectURL
        // https://msdn.microsoft.com/library/hh779016.aspx
        // https://stackoverflow.com/questions/15904374/how-to-create-a-blob-object-from-image-url
        //var blobObject = URL.createObjectURL(fileURL);
        //window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt'); // The user only has the option of clicking the Save button.

        // Nothing happened, no errors no download
        // https://msdn.microsoft.com/library/hh779016.aspx
        //https://stackoverflow.com/questions/11876175/how-to-get-a-file-or-blob-from-an-object-url
        //var xhr = new XMLHttpRequest();
        //xhr.open('GET', fileURL, true);
        //xhr.responseType = 'blob';
        //xhr.onload = function (e)
        //{
        //    if (this.status == 200)
        //    {
        //        var myBlob = this.response;
        //        // myBlob is now the blob that the object URL pointed to.
        //        window.navigator.msSaveBlob(myBlob, 'msSaveBlob_testFile.txt'); // The user only has the option of clicking the Save button.
        //    }
        //};

    }
}

** UPDATE #2 **

Also tried using the following as a separate function. Like the first example in my last update, it opens the file in a new browser tab instead of downloading the file. The requirement is that the file be downloaded so that the user can't see the address of the file being downloaded.

(function (window)
{
    try
    {
        new MouseEvent('test');
        return false; // No need to polyfill
    } catch (e)
    {
        // Need to polyfill - fall through
    }

    // Polyfills DOM4 MouseEvent

    var MouseEvent = function (eventType, params)
    {
        params = params || { bubbles: false, cancelable: false };
        var mouseEvent = document.createEvent('MouseEvent');
        mouseEvent.initMouseEvent(eventType, params.bubbles, params.cancelable, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

        return mouseEvent;
    }

    MouseEvent.prototype = Event.prototype;

    window.MouseEvent = MouseEvent;
})(window);
boilers222
  • 1,901
  • 7
  • 33
  • 71
  • Possible duplicate of [MouseEvent not working in Internet Explorer](https://stackoverflow.com/questions/28815845/mouseevent-not-working-in-internet-explorer) – jmargolisvt Sep 18 '17 at 20:45
  • I saw that post and tried to use it, but couldn't get it to do anything. I tried putting a try/catch around the MouseEvent in my code (which would trigger when using it in IE caused an error) and then have the code from that site in the catch portion, but that did nothing. If you could show me how to implement any of the code from that solution into my code, I'd be grateful. – boilers222 Sep 19 '17 at 12:09
  • The polyfill is here: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent#Polyfill But honestly, I never use MouseEvent. You should be able to do this with just `onclick` or a jQuery `on` or `click` if you have jQuery in your app. – jmargolisvt Sep 19 '17 at 12:44
  • I've tried that and it just open the document in a new browser tab. I need to download the file. The reason is that I've been requested not to display the address of the file to the user. Not sure what you mean by using onclick. The code is in the onclick event for a Kendo grid; I'm trying to create a link in Javascript with the download attribute and then simulate clicking that new link. I've updated my original questions with some examples. If you can point out a way to get this to work, I'd appreciate this. Already spent many more hours on this than were allocated to it. – boilers222 Sep 19 '17 at 13:25

0 Answers0