下载文件实现的常见方式

Posted 2020-11-03 ESnail

　　下载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

// js
function 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>