下載文件實現的常見方式
阿新 • • 發佈:2018-05-10
download for btn remove ray isa switch json htm
下載json、csv、excel、img等文件,而不是直接在瀏覽器打開,在後臺管理系統中很常見。那麽都有哪些方式可以實現呢?
方式一:鏈接,參數不多
1. a標簽,直接實現
// href 放下載地址; // download 為空,默認是下載地址上的文件名稱,可以指定名稱,如tp.csv,加download是避免json、img等文件直接在瀏覽器打開而不是下載; // target="_black"在新頁面打開,避免當前頁閃屏 <a href="" download="" target="_black">點擊下載</a> // 如需帶參,直接在地址後加上url的search參數就可以,註意參數不要太多<a class="download link-text" href="/newCrowd/crowdList/downFile?&is_tag=1&fileId=1023" target="_blank">點擊下載</a>
2. window.open,location.href,借助js,點擊按鈕,調用方法實現
function downloadFile(url){ window.open(url); } function downloadFile(url){ location.href=url; }
方式二:iframe
// jsfunction downloadFile(url){ var iframe = document.createElement("iframe"); document.body.appendChild(iframe); iframe.src =url; } // jq function downloadFile(url){ $("body").append($("<iframe/>").attr("src",url); }
方式三:form表單,參數較多
1. form表單,不帶參
function downloadFile (){var url = ""; var form = $("<form></form>").attr({ action : url, method : "post" }); form.appendTo($("body")).submit(); form.remove(); }
2. form表單,帶參,jq
function downloadFile (data, url) { // data格式 // obj {key: val} // obj {key: [val]} // obj {key: {key1: val}} var dataHtml=‘‘; for(var i in data){ var item=data[i]; var type=typeof item; switch(type){ case ‘object‘: if($.isArray(item)){ for(var k=0,klen=item.length; k<klen; k++){ dataHtml+=createInput(i+‘[]‘,item[k]); // name=key[] value=val } }else{ for(var k in item){ dataHtml+=createInput(i+‘[‘+k+‘]‘,item[k]) // name=key[key1] value=val } } break; default: dataHtml+=createInput(i,item); } } var exportForm=$("#export_form"); if(!exportForm.length){ $(‘body‘).append(‘<form id="export_form" enctype="multipart/form-data" method="post" target="_blank" action="‘+url+‘">‘+dataHtml+‘</form>‘); }else{ exportForm.html(dataHtml); } $("#export_form").submit(); $(‘#export_form‘).remove(); function createInput(name,data){ return ‘<input name="‘+name+‘" type="hidden" value="‘+data+‘">‘ } }
3. form 表單,帶參,vue,element-ui
// 組件 download.vue <template> <div class="download"> <form :action="downloadUrl" method="post" target="_blank" style="display: none"> <template v-for="(value, key) in pageParams"> <!-- 值為數組或對象 --> <template v-if="typeof value === ‘object‘"> <input type="hidden" v-if="value.length" v-for="item in value" :name="key+‘[]‘" :value="item"> <input type="hidden" v-else v-for="(childValue, childKey) in value" :name="key+‘[‘+childKey+‘]‘" :value="childValue"> </template> <!-- 值為字符串或數字 --> <input v-else type="hidden" :name="key" :value="value"> </template> <button type="submit" ref="btnDownload"></button> </form> </div> </template> <script> export default { props: { pageParams: { type: Object, default () { return {} } }, downloadUrl: { type: String, required: true, default: ‘‘ } }, methods: { downLoad() { this.$refs.btnDownload.click(); } } } </script>
// 調用 <template> <el-button @click="$refs.download.downLoad()" type="primary" size="small">下載</el-button> <download :pageParams="params" :downloadUrl="api.downloadUrl" ref="download"></download> </template> <script> import download from ‘components/download/download‘; export default { data() { return { api: { downloadUrl: `${this.urlBase}/adunit/download` }, params: {} } }, components: {download} } </script>
下載文件實現的常見方式