下载json、csv、excel、img等文件，而不是直接在浏览器打开，在后台管理系统中很常见。那么都有哪些方式可以实现呢？

　　方式一：链接，参数不多

        1. a标签，直接实现

// href 放下载地址; // download 为空，默认是下载地址上的文件名称，可以指定名称，如tp.csv，加download是避免json、img等文件直接在浏览器打开而不是下载;// target="_black"在新页面打开，避免当前页闪屏点击下载// 如需带参，直接在地址后加上url的search参数就可以，注意参数不要太多点击下载

　　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;}// jqfunction downloadFile(url){     $("body").append($("").attr("src",url);}

　　方式三：form表单，参数较多

　　1. form表单，不带参

function downloadFile (){      var url = "";      var 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
     
      '+dataHtml+'');      }else{        exportForm.html(dataHtml);      }      $("#export_form").submit();      $('#export_form').remove();      function createInput(name,data){        return '
      '      }      }
     

　　3. form 表单，带参，vue，element-ui

// 组件 download.vue
     

// 调用
     

 　　方式四：前端组织内容，csv方式下载

　　参考：https://blog.csdn.net/oscar999/article/details/16342699

　　前面三种方式都是通过前端请求后端接口实现下载，但有时需要前端直接组织内容下载。

下载下载中文

var dataStr = "col1,col2,col3\nhello,world,english";    var dataChineseStr = "姓名,年龄!\n张三,34\n王五,32\n李四,25";    console.log()    // chrome    if (navigator.appName == "Netscape") {      var blob = new Blob([dataStr], {type: "text/csv,charset=utf-8"});      document.getElementById("btn").href = window.URL.createObjectURL(blob);      var blobChinese = new Blob(['\ufeff'+dataChineseStr], {type: "text/csv,charset=utf-8"});      document.getElementById("btn_chinese").href = window.URL.createObjectURL(blobChinese);    } else {      document.getElementById("btn").href = "data:text/csv;charset=utf-8," + encodeURIComponent(dataStr);      document.getElementById("btn_chinese").href = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(dataStr);    }