前端導出Excel不跳轉頁面

頁面導出Excel有三種方式：

1.第一種方式比較簡單，a標籤,直接在href中寫下載地址及參數，頁面將會跳轉到地址，而後下載，這種方式很大的弊端，跳轉頁面

 例如： <a   href="health/teaManage/indicatorListUpload?page=1&pageLength=40 "></a>

 

2.經過window.open，經過js打開新頁面，下載完關閉頁面，這種方式打開新頁面，用戶會有頁面閃爍感受，體驗不太好

let url = health/teaManage/indicatorListUpload?page=1&pageLength=40;

window.open(url);

 

3經過提交form表單方式.這個方法頁面將不會出現跳轉，直接在本頁面下載，用戶體驗比較好

具體的實現方法，先在導出Excel的頁面里加一個隱藏的iframe，

示例代碼：<iframe src="about:blank" name="hiddenIframe" class="hide"></iframe>

點擊導出按鈕，運行js函數，提交表單。 表單的target屬性是與iframe的name屬性對應的

form中的target屬性設置爲_blank，這個屬性若是不設置，用默認的屬性時會致使自己正在訪問的頁面跳轉，是不可行的,

let page = 1;

let pagelen = 20;

var tempForm = $('<form action="'+Config.api+this.inUrl+'Upload?" type="get" target="hiddenIframe">'

 +'<input  type="hidden"  value="'+page+'" name="page"/>'

 +'<input  type="hidden"  value="'+pagelen+'" name="pagelen"/>'

 +'</form>');

 $('body', document).append(tempForm);

 tempForm.submit();

 

注意：