一般下載文件,常見使用的是window.open('url');方法進行下載。若需要帶參數,直接在url后面拼接參數,進行傳遞。window.open方法僅可以進行get方法進行參數提交。例如:
1 // get方法下載文件 2 import { getToken } from '@/utils/auth' 3 function loadFileGet(url) { 4 window.open(url+'?token='+getToken()) 5 }
若需要進行post方法提交,則有點麻煩,經過網上的方法進行參數,最后自己整理出能用的方法:
方法一:
1 handleExport(){ 2 const url='/api/admin/gateLog/export'; 3 const downloadHelper = $('<iframe style="display:none;" id="downloadHelper"></iframe>').appendTo('body')[0]; 4 const doc = downloadHelper.contentWindow.document; 5 if (doc) { 6 doc.open(); 7 doc.write('');//微軟為doc.clear()有時會出bug 8 doc.writeln("<html><body><form id='downloadForm' name='downloadForm' method='post' action='"+ url+"'>"); 9 const queryParam = this.listQuery; 10 for(let key in queryParam){ 11 doc.writeln("<input type='hidden' name='"+key+"' value='"+queryParam[key]+"'>"); 12 } 13 doc.writeln('<\/form><\/body><\/html>'); 14 doc.close(); 15 const form = doc.forms[0]; 16 if (form) { 17 form.submit(); 18 } 19 } 20 }
其中, const queryParam = this.listQuery,中listQuery中獲取的數據是一個obj對象,
即 const queryParam={page: 1,limit: 20,menu_EQ_S: undefined,crtName_EQ_S: undefined,crtHost_EQ_S: undefined}
方法二:
1 // form-data方式提交數據進行下載 2 // $tg表示整個當前頁面的this. 3 function uploadFileFormData($tg,rspUrl) { 4 MessageBox.confirm('是否對當前搜索條件下的數據進行導出操作?', '提示', { 5 confirmButtonText: '確定', 6 cancelButtonText: '取消', 7 confirmButtonClass: 'importantCls roundDialog', 8 cancelButtonClass: 'roundDialog', 9 type: 'warning' 10 }).then(() => { 11 const params = Object.keys($tg.listQuery).map(key => { 12 if($tg.listQuery[key] && key != 'page' && key != 'limit') { 13 return encodeURIComponent(key) + "=" + encodeURIComponent($tg.listQuery[key]); 14 } 15 }).join("&"); 16 const url = rspUrl+'?token=' + getToken() + "&" + params; 17 const $form = $("<form id='exportData' class='hidden' method='POST' action='" + url + "'></form>"); 18 $("body").append($form); 19 $form.submit(); 20 }) 21 }