页面下载文件方法,post与get
一般下载文件,常见使用的是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 }
根据url直接下载,模拟ifream下载
exportRouter() { this.$confirm('是否导出所有路线?', '提示', {type: 'warning'}).then(() => { const url = 'http://xxx.xxx/xxx' var iframe = document.createElement("iframe"); iframe.src = url iframe.style.display = "none"; document.body.appendChild(iframe); window.URL.revokeObjectURL(url); // 释放掉blob对象 }) }