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);