在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

回答

相關問題