本文共 2659 字，大约阅读时间需要 8 分钟。
下载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;} // jsfunction downloadFile(url){ var iframe = document.createElement("iframe"); document.body.appendChild(iframe); iframe.src =url;}// jqfunction downloadFile(url){ $("body").append($("").attr("src",url);} 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
// 调用下载
参考：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); }