CODEWITHSUNDEEP
javascriptjqueryiframedownload
Vitalii
Vitalii

Reputation: 11071

Javascript iFrame add to download file in IE7 and IE8

I need to download file after ajax request. So I add iframe to a page that posts some data to webmethod and get's file. Here is javascript code what is located at button click handler:

var iframe = $("<iframe id='PDFIframe' style='display:none'></iframe>");
var iForm = $("<form id='PDFForm' action='App/Billing.asmx/GetPDF' target='PDFIframe' method='post' target='_parent'></form>")
            .html('<input type="hidden" name="HtmlContent64" value="' + htmlContent64 + '"/><input type="hidden" name="billNum" value="' + this.billId + '"/>');

iframe.append(iForm);
tempCmp.append(iframe);
iForm.submit();

But I have an issue at iframe.append(iForm) line at IE 7 and 8. At IE 9 this one works prefect! What's wrong in my code?

Edit: I learn this question more and maybe this issue cause that I test different IE versions in IE9 changing values like at picture. Can mode change cause this issue? Maybe it works ok in real 7 and 8 IE browsers. How do you think? enter image description here

Upvotes: 0

Views: 3865

Answers (1)

Vitalii
Vitalii

Reputation: 11071

After spend a lot of time I did not found the solution for my question but I found some workaround approach that helped me to download files in IE7, IE8, IE9 without any iframes, opening new pages etc. Here is code:

jQuery.download = function(url, data, method){
//url and data options required
if( url && data ){ 
    //data can be string of parameters or array/object
    data = typeof data == 'string' ? data : jQuery.param(data);
    //split params into form inputs
    var inputs = '';
    jQuery.each(data.split('&'), function(){ 
        var pair = this.split('=');
        inputs+='<input type="hidden" name="'+ pair[0] +'" value="'+ pair[1] +'" />'; 
    });
    //send request
    jQuery('<form action="'+ url +'" method="'+ (method||'post') +'">'+inputs+'</form>')
    .appendTo('body').submit().remove();
};
};
$.download('/export.php','filename=mySpreadsheet&format=xls&content=' + spreadsheetData );

Maybe this will be useful and saves time for somebody ;) And here are full details jQuery Plugin for Requesting Ajax-like File Downloads

Upvotes: 1

Related Questions