在IE 11的工作，但没有工作的谷歌浏览器 - 使用jQuery

这里excel文件下载小提琴在IE 11的工作，但没有工作的谷歌浏览器 - 使用jQuery

文件下载正在发生的IE（Internet Explorer）中不工作的谷歌浏览器。

我不能改变HTML和CSS部分。

不能使用任何外部库

我想我必须改变部分

else { 
       $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text)); 
       $('#test').attr('download', 'Test file.xls'); 
      }

但什么chnage使得它同时适用于谷歌Chrome和IE

HTML

<input type="button" id="test" onClick="fnExcelReport();" value="download" /> 

<div id='MessageHolder'></div>

function CreateHiddenTable(ListOfMessages) 
{ 
var ColumnHead = "Column Header Text"; 
var TableMarkUp='<table id="myModifiedTable" class="visibilityHide"><thead><tr><td><b>'+ColumnHead+'</b></td> </tr></thead><tbody>'; 
console.log(ListOfMessages); 
console.log(ListOfMessages.length); 
for(i=0; i<ListOfMessages.length; i++){ 
    TableMarkUp += '<tr><td>' + ListOfMessages[i] +'</td></tr>'; 
} 
TableMarkUp += "</tbody></table>"; 
$('#MessageHolder').append(TableMarkUp); 
} 

function fnExcelReport() { 
var Messages = "\n message1.\n message2."; 
var ListOfMessages = Messages.split("."); 

CreateHiddenTable(ListOfMessages); 

    var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; 
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; 

    tab_text = tab_text + '<x:Name>Error Messages</x:Name>'; 

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'; 
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'; 

    tab_text = tab_text + "<table border='1px'>"; 
    tab_text = tab_text + $('#myModifiedTable').html();; 
    tab_text = tab_text + '</table></body></html>'; 

    var data_type = 'data:application/vnd.ms-excel'; 

    var ua = window.navigator.userAgent; 
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { 
     if (window.navigator.msSaveBlob) { 
      var blob = new Blob([tab_text], { 
       type: "application/csv;charset=utf-8;" 
      }); 
      navigator.msSaveBlob(blob, 'Test file.xls'); 
     } 
    } else { 
     $('#test').attr('href', data_type + ', ' + encodeURIComponent(tab_text)); 
     $('#test').attr('download', 'Test file.xls'); 
    } 
$(' 

#MessageHolder').html(""); 
}

CSS

.visibilityHide 
{ 
    visibility:hidden; 
}

来源

2017-06-07 shaswatatripathy

看看这个小提琴，现在它将适用于IE和谷歌浏览器。 https://jsfiddle.net/shaswatatripathy/fo4ugmLp/1/

因此它可以被视为客户端excel文件创建解决方案。我只是增加了一个元素，但如果你愿意，你可以在jQuery的创建它并将其添加到同一div

HTML

<input type="button" id="test" onClick="fnExcelReport();" value="download" /> 

<div id='MessageHolder'></div> 

<a href="#" id="testAnchor"></a>

var tab_text; 
var data_type = 'data:application/vnd.ms-excel'; 


function CreateHiddenTable(ListOfMessages) 
{ 
var ColumnHead = "Column Header Text"; 
var TableMarkUp='<table id="myModifiedTable" class="visibilityHide"><thead><tr><td><b>'+ColumnHead+'</b></td> </tr></thead><tbody>'; 

for(i=0; i<ListOfMessages.length; i++){ 
    TableMarkUp += '<tr><td>' + ListOfMessages[i] +'</td></tr>'; 
} 
TableMarkUp += "</tbody></table>"; 
$('#MessageHolder').append(TableMarkUp); 
} 

function fnExcelReport() { 
var Messages = "\n message1.\n message2."; 
var ListOfMessages = Messages.split("."); 

CreateHiddenTable(ListOfMessages); 

    tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; 
    tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; 

    tab_text = tab_text + '<x:Name>Error Messages</x:Name>'; 

    tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'; 
    tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'; 

    tab_text = tab_text + "<table border='1px'>"; 
    tab_text = tab_text + $('#myModifiedTable').html();; 
    tab_text = tab_text + '</table></body></html>'; 

    data_type = 'data:application/vnd.ms-excel'; 

    var ua = window.navigator.userAgent; 
    var msie = ua.indexOf("MSIE "); 

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { 
     if (window.navigator.msSaveBlob) { 
      var blob = new Blob([tab_text], { 
       type: "application/csv;charset=utf-8;" 
      }); 
      navigator.msSaveBlob(blob, 'Test file.xls'); 
     } 
    } else { 
    console.log(data_type); 
console.log(tab_text); 
     $('#testAnchor')[0].click() 
    } 
$('#MessageHolder').html(""); 
} 
$($("#testAnchor")[0]).click(function(){ 
console.log(data_type); 
console.log(tab_text); 
    $('#testAnchor').attr('href', data_type + ', ' + encodeURIComponent(tab_text)); 
     $('#testAnchor').attr('download', 'Test file.xls'); 
});

CSS

.visibilityHide 
{ 
    visibility:hidden; 
}

来源

2017-06-08 06:13:20 tripathy

的encodeURIComponent通话是不会做的伎俩。要做你想做的事情，你必须Base64-encodetab_text变量，然后将其粘贴到href属性。该A标签最终会看起来像这样：

<a href="data:application/vnd.ms-excel;base64,dmFyIHNjT2JqMSA9IG5ldyBzY3Jv...">Click here to download</a>

根据另一个SO post，你在使用download属性指定的文件名是正确的。

来源

2017-06-07 15:48:25

应我喜欢tab_text = tab_text +'base64-encode'; – shaswatatripathy

因为我没有任何在html中 – shaswatatripathy

我推测'＃test'是''标记的ID。 –

在IE 11的工作，但没有工作的谷歌浏览器 - 使用jQuery

回答

相关问题