js下载文件的实现方法一

合集下载

JavaScript实现的浏览器下载文件的方法

浏览器缓存的意义在于提高了执行效率但是也随之而来带来了一些问题导致服务端修改了jscss客户端不能更新下面有几个不错的方法可以解决此问题感兴趣的朋友可以参考下
JavaScript实现的浏览器下载文件的方法
废话不多说了，直接给大家贴代码了，具体代码如下所示：
function download(src) { var $a = document.createElement('a'); $a.setAttribute("href", src); $a.setAttribute("download", ""); var evObj = document.createEvent('MouseEvents'); evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null); $a.dispatchEvent(evObj);
};
该方法从网上找来的，直接调用，使用直接传路径，就可使用
总结
以上所述是小Biblioteka 给大家介绍的JavaScript实现的浏览器下载文件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

jsp下载文件的实现方法及注意

response.setContentType("application/force-download");//设置为下载application/force-download
这样，就可以保证在用户点击下载链接的时候浏览器一定会弹出提示窗口来询问你是下载还是直接打开并允许你选择要打开的应用程序，除非你设置了浏览器的一些默认行为。
//application.getRealPath("/main/mvplayer/CapSetup.msi");获取的物理路径
String filedownload = "想办法找到要提供下载的文件的物理路径＋文件名";
String filedisplay = "给用户提供的下载文件名";
{
in.close();
in = null;
}
//这里不能关闭
//if(outp != null)
//{
//outp.close();
//outp = null;
//}
}
%>
对于第二种方法，我认为应该是比较常用的。不过有几个地方是值得我们注意的：
java.io.OutputStream outp = null;
java.io.FileInputStream in = null;
try
{
outp = response.getOutputStream();
in = new FileInputStream(filenamedownload);
{
in.close();
in = null;
}
//这里不能关闭

用Jsp来实现文件下载功能的几种方式

１.最直接最简单的，方式是把文件地址直接放到html页面的一个链接中。

这样做的缺点是把文件在服务器上的路径暴露了，并且还无法对文件下载进行其它的控制（如权限）。

这个就不写示例了。

２.在服务器端把文件转换成输出流，写入到response，以response把文件带到浏览器，由浏览器来提示用户是否愿意保存文件到本地。

（示例如下）
３.既然是JSP的话，还有一种方式就是用Applet来实现文件的下载。

不过客户首先得信任你的这个Applet小程序，由这个程序来接受由servlet发送来的数据流，并写入到本地。

servlet端示例
JApplet端示例
４.顺便把JApplet上传文件的代码也贴上来. JApplet端示例
servlet端代码示例
总结：在文件的传输中是流的形式存在的，在硬盘上是文件的形式存在的。

我们要做的只是通过HttpServletRequest和HttpServletResponse，或者是response和request来发送流和读取流。

以及把文件转换成流或把流转换成文件的操作。

使用JS代码实现点击按钮下载文件

使⽤JS代码实现点击按钮下载⽂件有时候我们在⽹页上需要增加⼀个下载按钮，让⽤户能够点击后下载页⾯上的资料，那么怎样才能实现功能呢？这⾥有两种⽅法：现在需要在页⾯上添加⼀个下载按钮，点击按钮下载⽂件。

题外话，这个下载图标是引⽤的 font-awesome 上⾯的。

使⽤时，⾸先将 font-awesome 整个⽂件夹下载下来，利⽤bower或者是⾃⼰去官⽹上⾯下载都⾏。

将整个⽂件夹放在项⽬⽂件中之后，在页⾯上⾯引⼊css⽂件1<link href="libs/font-awesome-4.7.0/css/font-awesome.min.css"type="text/css"rel="stylesheet">在页⾯上可以开始使⽤所需要的图标了1<i class="fa fa-download"aria-hidden="true"title="下载"></i>1.下载项⽬中的⽂件如果要下载的是⼀个excel⽂件模板，可以先将该⽂件放在项⽬⽂件夹下⾯，然后在页⾯下载按钮上加上onclick事件：1<i class="fa fa-download"aria-hidden="true"title="下载"onclick="window.open('file/user.xlsx')"></i>这样在点击图标之后，⽂件就会⾃动下载了。

2.发送请求地址下载⽂件JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使⽤相应的ajax函数进⾏⽂件下载。

但可以⽤js⽣成⼀个form，⽤这个form提交参数，并返回“流”类型的数据。

浅析Node.js实现HTTP文件下载

浅析Node.js实现HTTP⽂件下载前⾔HTTP实现⽂件下载时，只要在服务器设置好相关响应头，并使⽤⼆进制传输⽂件数据即可，⽽客户端(浏览器)会根据响应头接收⽂件数据。

⽽在Node.js中，设置好响应头后，读取⽂件流，再使⽤“.pipe()”⽅法将流转接到响应对象Response就可以实现⼀个简单的⽂件下载服务器。

1. ⽂件下载介绍HTTP基于请求头和响应头实现状态交互，在得到服务器正确响应状态后，⽽客户端⾸先会解析响应头，并根据响应头来接收和展⽰数据（响应体）。

对于⽂件下载来说，其实现过程如下：1.客户端发起⽂件资源请求2.服务器查找对应⽂件，并设置”Content-Type”、”Content-Disposition”等响应头，分别⽤于表⽰⽂件的”MIME”类型及⽂件描述3.客户端根据服务器返回的响应头解析和接收⽂件数据需要设置的响应头设置⽂件下载响应头时，除了常⽤的HTTP响应头外，⽐较重要是还要设置以下两个响应头：Content-Type: application/octet-streamContent-Disposition: attachment; filename=MyFileName.ext在上⾯的设置中，”Content-Type: application/octet-stream”告诉浏览器这是⼀个⼆进制⽂件，”Content-Disposition”告诉浏览器这是⼀个需要下载的附件并告诉浏览器默认的⽂件名。

如果不添加”Content-Disposition”响应头，浏览器可能会下载或显⽰⽂件内容，不同浏览器的处理有所不同。

2. Node.js⽂件下载服务器实现接下来我们基于Express 框架实现⼀个简单⽂件下载服务器，在这个服务器中主要包括两个功能：服务器⽂件的浏览、⽂件的下载。

2.1 添加路由创建Express应⽤后，添加如下两个路由：router.get('/files', function(req, res, next) {// 显⽰服务器⽂件});router.get('/file/:fileName', function(req, res, next) {// 实现⽂件下载});上⾯的添加的两个路由分别⽤于：显⽰服务器⽂件、实现⽂件下载。

js下载文件的实现方法一

js下载文件的实现方法一f8bjs下载文件的实现方法及注意js中实现文件下载（一）最简单的方式是在页上做超级链接如：<a href="music/abc.m3">下载</a>。

但是这样服务器上的目录资源会直接暴露给最终用户会给站带来一些不安全的因素。

因此可以采用其它方式实现下载可以采用：1、RequestDisatcher的方式进行；2、采用文件流输出的方式下载。

（推荐）1、采用RequestDisatcher的方式进行Js代码<%resonse.setContentTye("alication/x-download");//设置为下载alication/x-downloadString filedownload = "/要下载的文件名";//即将下载的文件的相对径String filedislay = "最终要显示给用户的保存文件名";//下载文件时显示的文件保存名称String filenamedislay = URLEncoder.encode(filedislay,"UTF-8"); resonse.addHeader("Content-Disosition","attachment;filena me=" + filedislay);try{RequestDisatcher dis = alication.getRequestDisatcher(filedownload);if(dis!= null){dis.forward(request,resonse);}resonse.flushBuffer();}catch(Excetion e){e.rintStackTrace();}finally{}%><%resonse.setContentTye("alication/x-download");//设置为下载alication/x-downloadString filedownload = "/要下载的文件名";//即将下载的文件的相对径String filedislay = "最终要显示给用户的保存文件名";//下载文件时显示的文件保存名称String filenamedislay = URLEncoder.encode(filedislay,"UTF-8"); resonse.addHeader("Content-Disosition","attachment;filena me=" + filedislay);try{RequestDisatcher dis = alication.getRequestDisatcher(filedownload);if(dis!= null){dis.forward(request,resonse);}resonse.flushBuffer();}catch(Excetion e){e.rintStackTrace();}finally{}%>2、采用文件流输出的方式下载Js代码<%age language="java" contentTye="alication/x-msdownload"ageEncoding="gb2312"%><%//关于文件下载时采用文件流输出的方式处理：//加上resonse.reset()并且所有的％>后面不要换行包括最后一个；resonse.reset();//可以加也可以不加resonse.setContentTye("alication/x-download");//alication.getRealath("/main/mvlayer/CaSetu.msi");获取的物理径String filedownload = "想办法找到要提下载的文件的物理径＋文件名";String filedislay = "给用户提的下载文件名";String filedislay = URLEncoder.encode(filedislay,"UTF-8"); resonse.addHeader("Content-Disosition","attachment;filena me=" + filedislay);java.io.OututStream out =null;java.io.FileInutStream in = null;try{out = resonse.getOututStream();in = new FileInutStream(filenamedownload);byte[] b = new byte[1024];int i = 0;while((i = in.read(b)) > 0)out.write(b, 0, i);}//out.flush();//要加以下两句话否则会报错//ng.IllegalStateExcetion: getOututStream() has already been called for //this resonseout.clear();out = hBody();}catch(Excetion e){System.out.rintln("Error!");e.rintStackTrace();}finally{if(in != null){in.close();in = null;//这里不能关闭//if(out != null)//{//out.close();//out = null;//}}%><%age language="java" contentTye="alication/x-msdownload"ageEncoding="gb2312"%><%//关于文件下载时采用文件流输出的方式处理：//加上resonse.reset()并且所有的％>后面不要换行包括最后一个；resonse.reset();//可以加也可以不加resonse.setContentTye("alication/x-download");//alication.getRealath("/main/mvlayer/CaSetu.msi");获取的物理径String filedownload = "想办法找到要提下载的文件的物理径＋文件名";String fifc1ledislay = "给用户提的下载文件名";String filedislay = URLEncoder.encode(filedislay,"UTF-8"); resonse.addHeader("Content-Disosition","attachment;filena me=" + filedislay);java.io.OututStream out = null;java.io.FileInutStream in = null;try{out = resonse.getOututStream();in = new FileInutStream(filenamedownload);byte[] b = new byte[1024];int i = 0;while((i = in.read(b)) > 0){out.write(b, 0, i);}//out.flush();//要加以下两句话否则会报错//ng.IllegalStateExcetion: getOututStream() has already been called for //this resonseout.clear();out = hBody();}catch(Excetion e){System.out.rintln("Error!");e.rintStackTrace();}finally{if(in != null){in.close();in = null;}//这里不能关闭//if(out != null)//{//out.close();//out = null;//}}%>对于第二种方法我认为应该是比较常用的。

JS下载文件，解决文件直接在浏览器打开的情况

JS下载⽂件，解决⽂件直接在浏览器打开的情况JS下载⽂件，解决⽂件直接在浏览器打开的情况：function downloadfile(url, file_name) {var xmlHttp = null;if (window.ActiveXObject) {// IE6, IE5 浏览器执⾏代码xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} else if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执⾏代码xmlHttp = new XMLHttpRequest();}//2.如果实例化成功，就调⽤open（）⽅法：if (xmlHttp != null) {xmlHttp.open("get", url, true);xmlHttp.send();xmlHttp.onreadystatechange = doResult; //设置回调函数}function doResult() {if (xmlHttp.readyState == 4) { //4表⽰执⾏完成if (xmlHttp.status == 200) { //200表⽰执⾏成功//引⽤js库：download.jsdownload(xmlHttp.responseText, file_name, "text/plain");}}}}download.js://download.js v3.0, by dandavis; 2008-2014. [CCBY2] see /download.html for tests/usage// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support// data can be a string, Blob, File, or dataURLfunction download(data, strFileName, strMimeType) {var self = window, // this script is only for browsers anyway...u = "application/octet-stream", // this default mime also triggers iframe downloadsm = strMimeType || u,x = data,D = document,a = D.createElement("a"),z = function(a){return String(a);},B = self.Blob || self.MozBlob || self.WebKitBlob || z,BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,fn = strFileName || "download",blob,b,ua,fr;//if(typeof B.bind === 'function' ){ B=B.bind(self); }if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callbackx=[x, m];m=x[0];x=x[1];}//go ahead and download dataURLs right awayif(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:navigator.msSaveBlob(d2b(x), fn) :saver(x) ; // everyone else can save dataURLs un-processed}//end if dataURL passed?try{blob = x instanceof B ?x :new B([x], {type: m}) ;}catch(y){if(BB){b = new BB();b.append([x]);blob = b.getBlob(m); // the blob}}function d2b(u) {var p= u.split(/[:;,]/),t= p[1],dec= p[2] == "base64" ? atob : decodeURIComponent,bin= dec(p.pop()),mx= bin.length,i= 0,uia= new Uint8Array(mx);for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);return new B([uia], {type: t});}function saver(url, winMode){if ('download' in a) { //html5 A[download]a.href = url;a.setAttribute("download", fn);a.innerHTML = "downloading...";D.body.appendChild(a);setTimeout(function() {a.click();D.body.removeChild(a);if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );} }, 66);return true;}//do iframe dataURL download (old ch+FF):var f = D.createElement("iframe");D.body.appendChild(f);if(!winMode){ // force a mime that will download:url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);}f.src = url;setTimeout(function(){ D.body.removeChild(f); }, 333);}//end saverif (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)return navigator.msSaveBlob(blob, fn);}if(self.URL){ // simple fast and modern way using Blob and URL:saver(self.URL.createObjectURL(blob), true);}else{// handle non-Blob()+non-URL browsers:if(typeof blob === "string" || blob.constructor===z ){try{return saver( "data:" + m + ";base64," + self.btoa(blob) );}catch(y){return saver( "data:" + m + "," + encodeURIComponent(blob) );}// Blob but not URL:fr=new FileReader();fr.onload=function(e){ saver(this.result);};fr.readAsDataURL(blob); }return true;} /* end download() */。

前端调用后台接口下载word文档的两种方法

前端调⽤后台接⼝下载word⽂档的两种⽅法1传统的ajax虽然能提交到后台，但是返回的数据被解析成json,html,text等字符串，⽆法响应浏览器下载。

就算使⽤bob模拟下载，数据量⼤时也不⽅便废话不多说：上代码（此处是Layui监听提交，传统的html提交更⽅便）//监听提交form.on('submit(formDemo)', function (data) {layer.msg(JSON.stringify(data.field));//第⼀种⽅式这种⽅式直接打开链接，参数后缀到后台查找，即可下载// window.open('/jump/download?id='+data.field.id, '_blank');//第⼆种⽅式这种⽅式模拟表单提交，动态获取值传⼊后台try {var queryForm = $('#llll');var exportForm = $("<form action=' /jump/download' method='post'></form>")queryForm.find("input").each(function() {var name = $(this).attr("name");var value = $(this).val();exportForm.append("<input type='hidden' name='" + name + "' value='" + value + "'/>")});queryForm.find("select").each(function() {var name = $(this).attr("name");var value = $(this).val();exportForm.append("<input type='hidden' name='" + name + "' value='" + value + "'/>")});$(document.body).append(exportForm);exportForm.submit();} catch (e) {console.log(e);} finally {exportForm.remove();}//3第三种ajax提交表单，不相应浏览器下载这种⽅式可以提交⼀个Map 去后台但是返回⽂件不容易下载，精通原⽣js的伙伴可以试试，⽐较⿇烦，再次我就不献丑了 // $.ajax({// type:"GET",// url:"/jump/download",// data:JSON.stringify(data.field),// contentType:"application/json;charset=UTF-8",// success:function (data) {//// }// });return false;//ajax 提交时Layui防⽌页⾯⾃动刷新});@ApiOperation(value = "导出word⽂档", notes = "{\"id\":\"11\"}")@RequestMapping(value = "/download",method = RequestMethod.POST)public void download(HttpServletRequest request, HttpServletResponse response) throws IOException {//对应前端第三种提交⽅式 @RequestBody Map map 第⼀种⽅式⽀持前端提交过来⼀个MapMap<String, Object> userMapMeS = new HashMap<String, Object>();// String fileName=map.get("name").toString();// userMapMeS.put("name", map.get("name").toString());// userMapMeS.put("id", map.get("id").toString());// userMapMeS.put("age", map.get("age").toString());// userMapMeS.put("phone", map.get("phone").toString());// userMapMeS.put("password", map.get("password").toString());// userMapMeS.put("email", map.get("email").toString());// userMapMeS.put("times", map.get("times").toString());// userMapMeS.put("address", map.get("address").toString());// userMapMeS.put("sex", map.get("sex").toString());// userMapMeS.put("work", map.get("work").toString());// userMapMeS.put("hobby", map.get("hobby").toString());//对应第⼀种前端提交⽅式// String id=request.getParameter("id");// Map map=new HashMap();// map.put("id",id);// User user= userService.selectUser(map);// String fileName=user.getName();// Map<String, Object> userMapMeS = new HashMap<String, Object>();// userMapMeS.put("name", user.getName());// userMapMeS.put("id", user.getId());// userMapMeS.put("age", user.getAge());// userMapMeS.put("phone", user.getPhone());// userMapMeS.put("password", user.getPassword());// userMapMeS.put("email", user.getEmail());// userMapMeS.put("times", user.getTimes());// userMapMeS.put("address", user.getAddress());// userMapMeS.put("sex", user.getSex());// userMapMeS.put("work", user.getWork());// userMapMeS.put("hobby", user.getHobby());//对应前端第⼆种前端模拟表单提交String fileName =request.getParameter("name").toString();userMapMeS.put("name", request.getParameter("name").toString());userMapMeS.put("id", request.getParameter("id").toString());userMapMeS.put("age", request.getParameter("age").toString());userMapMeS.put("phone", request.getParameter("phone").toString());userMapMeS.put("password", request.getParameter("password").toString());userMapMeS.put("email", request.getParameter("email").toString());userMapMeS.put("times", request.getParameter("times").toString());userMapMeS.put("address", request.getParameter("address").toString());userMapMeS.put("sex", request.getParameter("sex").toString());userMapMeS.put("work", request.getParameter("work").toString());userMapMeS.put("hobby", request.getParameter("hobby").toString());String endCodeFileName = new String(fileName.getBytes("utf-8"), "ISO8859-1");response.reset();//清除空⽩⾏纺织报错response.setHeader("Access-Control-Allow-Origin", "*");//所有域都可以跨response.setHeader("Content-Type", "application/octet-stream;charset=UTF-8");//⼆进制流⽂件response.setHeader("Content-Disposition", "attachment;filename=" + endCodeFileName+".doc");//下载及其⽂件名 response.setHeader("Connection", "close");//关闭请求头连接//设置⽂件在浏览器打开还是下载response.setContentType("application/x-download");WordUtil wUtil = new WordUtil();long now= System.currentTimeMillis();wUtil.createDoc(userMapMeS, response.getOutputStream());long end= System.currentTimeMillis();long ddd=end-now;System.out.println("ddd" + ddd);}⼯具类在下篇⽂章。

【JS】前端文件下载（无刷新）方法总结

【JS】前端⽂件下载（⽆刷新）⽅法总结#传统⽅法利⽤iframe 或 form.submit 或 windows.open直接向后端发请求,后端返回⽂件流，后端处理成功后会直接返回到页⾯，浏览器会整理并打开⾃⼰的保存下载⽂件机制。

1、利⽤form.submit直接向后端提交,后端返回⽂件流 1）前端代码：1var downloadURL = "RestHandle.ashx";2var testForm = $("<form>"); //定义⼀个form表单3 testForm.attr('style','display:none'); //设置form表单属性4 testForm.attr('target','');5 testForm.attr('method','post');6 testForm.attr('action',downloadURL);78var nameInput = $('<input>'); //构造formdata9 nameInput.attr('type','hidden');10 nameInput.attr('name','fileName');11 nameInput.attr('value','test.txt');1213 $('body').append(testForm); //将表单放置在web中14 testForm.append(nameInput); //将formdata添加到表单上15 testForm.submit(); //表单提交16 testForm.remove(); //表单移除 2）服务端代码，以为例：1public class TestHandler : IHttpHandler2 {34public void ProcessRequest(HttpContext context)5 {6string fileName = context.Request["FileName"];//客户端传送过来的要下载的⽂件名7string filePath = System.Web.HttpContext.Current.Server.MapPath("DownLoad/" + fileName);//路径89 FileInfo newFile = new FileInfo(filePath);1011//以字符流的形式下载⽂件12 FileStream fs = new FileStream(filePath, FileMode.Open);13byte[] bytes = new byte[(int)fs.Length];14 fs.Read(bytes, 0, bytes.Length);15 fs.Close();16 context.Response.ContentType = "application/octet-stream";17//通知浏览器下载⽂件⽽不是打开18 context.Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode(fileName, System.Text.Encoding.UTF8));19 context.Response.BinaryWrite(bytes);20 context.Response.Flush();21 context.Response.End();22 }2324public bool IsReusable25 {26get27 {28return false;29 }30 }31 } 3）优缺点：优点：兼容性良好，传统⽅式，不会出现URL长度限制问题；缺点：拿不到后端处理这个过程的时机，⽆法根据回调函数做交互以及进度提⽰2、利于iframe直接向后端提交,后端返回⽂件流 1）前端代码：1function downFileByIframe(parameters) {2var downloadURL = "TestHandler.ashx?FileName=test.txt";3var iframe = document.createElement("iframe");4 iframe.src = downloadURL;5 iframe.style.display = "none";6 document.body.appendChild(iframe);7 } 2）后端代码：同上 3）优缺点：优点：兼容性较好缺点： *html中会增加多余的iframe元素，增加了维护成本； *拿不到后端处理这个过程的时机，⽆法根据回调函数做交互以及进度提⽰； *URL长度有限制；3、使⽤windows.open下载⽂件 1）前端代码1var downloadURL = "TestHandler.ashx?FileName=test.txt";2 window.open(downloadURL); 2）后端代码：同上 3）优缺点：优点：兼容性良好，代码简洁；缺点： *URL长度有限制； *拿不到后端处理这个过程的时机，⽆法根据回调函数做交互以及进度提⽰；4、解决“⽆法根据回调函数做交互”的问题：ajax提交，后端返回在线⽂件地址利⽤ajax去提交请求，后端会返回⼀个线上的⽂件地址，前端可以通过原⽣的window.open打开这个地址就可以实现下载；也可以通过a标签设置href以及download属性，并⾃动点击实现其下载功能，关于其兼容性问题，可以判断download属性是否存在来弥补。

前端javascript实现文件下载的示例

前端javascript实现⽂件下载的⽰例在 html5 中，a 标签新增了 download 属性，包含该属性的链接被点击时，浏览器会以下载⽂件⽅式下载 href 属性上的链接。

⽰例：<a href="https://" rel="external nofollow" download="baidu.html">下载</a>1. 前端 js 下载实现与⽰例通过 javascript 动态创建⼀个包含 download 属性的 a 元素，再触发点击事件，即可实现前端下载。

代码⽰例：function download(href, title) {const a = document.createElement('a');a.setAttribute('href', href);a.setAttribute('download', title);a.click();}说明：href 属性设置要下载的⽂件地址。

这个地址⽀持多种⽅式的格式，因此可以实现丰富的下载⽅法。

download 属性设置了下载⽂件的名称。

但 href 属性为普通链接并且跨域时，该属性值设置多数情况下会被浏览器忽略。

1.1 普通连接下载⽰例// 下载图⽚download('https://lzw.me/images/gravatar.gif', 'lzwme-gravatar');// 下载⼀个连接download('https://lzw.me', 'lzwme-index.html');1.2 href 为 data URIs ⽰例data URI 是前缀为 data:scheme 的 URL，允许内容创建者在⽂档中嵌⼊⼩⽂件。

数据URI由四个部分组成：前缀（数据:)，指⽰数据类型的MIME类型，如果⾮⽂本则为可选的base64令牌，数据本⾝：data:[<mediatype>][;base64],<data>链接的 href 属性为 data URIs 时，也可以实现⽂件内容的下载。

JS实现点击按钮，下载文件

JS实现点击按钮，下载⽂件PS:本⽂说的，并⾮如何⽤js创建流、创建⽂件、实现下载功能。

⽽是说的：你已知⼀个下载⽂件的后端接⼝，前端如何请求该接⼝，实现点击按钮、下载⽂件到本地。

（可以是zip 啦、excel啦都是⼀样）有两个⽅法：window.open()和通过form表单来提交。

⽅法⼀：window.open("下载⽂件的后端接⼝");*html结构*<button type="button" id="btn1">下载⼀个zip（⽅法1）</button><button type="button" id="btn2">下载⼀个zip（⽅法2）</button>/*js部分*/var $eleBtn1 = $("#btn1");var $eleBtn2 = $("#btn2");//已知⼀个下载⽂件的后端接⼝：https:///douban/douban-client/legacy.zip/master//⽅法⼀：window.open()$eleBtn1.click(function(){window.open("https:///douban/douban-client/legacy.zip/master");});然⽽有个问题：浏览器会打开⼀个新窗⼝，然后迅速⾃动关闭，体验⾮常不好。

⽅法⼆：通过form提交由于ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以通过ajax去请求该接⼝是⽆法下载⽂件的，所以我们创建⼀个新的form元素来请求接⼝。

/*js部分*///⽅法⼆：通过form$eleBtn2.click(function(){var $eleForm = $("<form method='get'></form>");$eleForm.attr("action","https:///douban/douban-client/legacy.zip/master");$(document.body).append($eleForm);//提交表单，实现下载$eleForm.submit();});。

jsp实现下载excel,word,pdf,jgp,gif,xml,js过滤器实现文档

下面代码有选择的粘贴进自己项目即可，其实现解决了tomcat、resin服务器中文下载乱码问题。

web.xml配置如下<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="/xml/ns/javaee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/javaee/xml/ns/javaee/web-app_2_5.xsd"><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><filter><filter-name>downLoad</filter-name><filter-class>com.tangdi.DownLoadFilter</filter-class></filter><filter-mapping><filter-name>downLoad</filter-name><url-pattern>*.downLoad</url-pattern></filter-mapping></web-app>Jsp页面配置如下其下载利用a标签进行连接，前提是服务器上下载文件路径已知需要引进el表达式和jquery.<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%@ taglib uri="/jsp/jstl/core" prefix="c"%><script src="${pageContext.request.contextPath}/js/jquery-1.4.4.min.js" type="text/javascript"></script><html><head><script>$(function(){var$href='${pageContext.request.contextPath}'+"/20159.downLoad?filePath=";//+encodeURICompo nent("中国.downLoad");$("#testHref").children("td").each(function(){var $id=$(this).children(":first").attr("id");var $tmpHref="";if($id=="txt"){$tmpHref=$href+"E:/apache-tomcat-6.0.35/apache-tomcat-6.0.35/webapps/MyTry/test/"+"203123 4_这是txt.txt";}else if($id=="pdf"){$tmpHref=$href+"E:/apache-tomcat-6.0.35/apache-tomcat-6.0.35/webapps/MyTry/test/"+"这是pdf.pdf";}else if($id=="excel"){$tmpHref=$href+"这是excel.xls";}else if($id=="word"){$tmpHref=encodeURI($href+"这是doc.doc","ISO8859-1");}else if($id=="jpg"){$tmpHref=$href+"这是jpg.jpg";}else if($id=="js"){$tmpHref=$href+"这是js.js";}else if($id=="jsp"){$tmpHref=$href+"这是jsp.jsp";}else if($id=="html"){$tmpHref=$href+"这是html.html";}$(this).children(":first").attr("href",$tmpHref);});});</script></head><body><div><table><tr id="testHref"><td><a id="txt" href="#">txt</a></td><td><a id="pdf" href="#">pdf</a></td><td><a id="excel" href="#">excel</a></td><td><a id="word" href="#">word</a></td><td><a id="xml" href="#">xml</a></td><td><a id="jpg" href="#">jpg</a></td><td><a id="gif" href="#">gif</a></td><td><a id="js" href="#">js</a></td><td><a id="jsp" href="#">jsp</a></td><td><a id="html" href="#">html</a></td></tr></table></div></body></html>过滤器filter配置如下package com.tangdi;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.BufferedReader;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.InputStreamReader;import java.io.OutputStream;import java.io.PrintWriter;import .URLDecoder;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class DownLoadFilter implements Filter {public void destroy() {}public void doFilter(ServletRequest request1, ServletResponse response1,FilterChain arg2) throws IOException, ServletException {HttpServletRequest request = (HttpServletRequest) request1;HttpServletResponse response = (HttpServletResponse) response1;//request.setCharacterEncoding("UTF-8");//String filePath = new String(request.getParameter("filePath").getBytes("ISO8859-1"), "UTF-8");request.setCharacterEncoding("ISO8859-1");String filePath = new String(request.getParameter("filePath").getBytes("ISO8859-1"),"UTF-8");System.out.println("*****************************************************filePat h is :" + filePath);String suffix = filePath.substring(stIndexOf(".") + 1);System.out.println("********************suffix is:"+suffix);String contentType = getContentType(suffix);//获得尾缀设置不同contentTypeString contentDisposition = "attachment; filename="+new String(filePath.substring(stIndexOf("_")+1));System.out.println("********************************************"+contentDisposit ion);response.setCharacterEncoding("ISO8859-1");response.setContentType(contentType);response.setHeader("Content-disposition", new String(contentDisposition.getBytes("UTF-8"),"ISO8859-1"));try {InputStream is = new FileInputStream(filePath);OutputStream os = response.getOutputStream();int byteRead;byte[] buffer = new byte[1024];while ((byteRead = is.read(buffer)) != -1) {os.write(buffer, 0, byteRead);}os.flush();os.close();} catch (Exception e) {e.printStackTrace();}}/**** @param suffix 下载文件尾缀* @return 返回不同response.contentType*/public String getContentType(String suffix) {if (suffix.equals("txt")) {return "text/plain";} else if(suffix.equals("doc") || suffix.equals("docx")) {return "application/msword;charset=gb2312";} else if(suffix.equals("xls") || suffix.equals("xlsx")) {return "application/-excel";} else if(suffix.equals("pdf")) {return "application/pdf";}else if(suffix.equals("gif")){return "image/gif" ;}else if(suffix.equals("jpg")){return "image/jpeg" ;}else if(suffix.equals("htm")||suffix.equals("html")||suffix.equals("jsp")){return "text/html" ;}else if(suffix.equals("xml")){return "text/xml" ;}else if(suffix.equals("js")){return "application/x-javascript" ;}return "application/octet-stream";}public void init(FilterConfig config) throws ServletException {}}注：其中编码ISO8859-1不能乱改，否则出现解析路径错误或者下载文件出错。

js下载文件到本地各种方法总结

js下载⽂件到本地各种⽅法总结⼀、此⽅法⽕狐有些版本是不⽀持的window.location.href = 'https://*****.oss-cn-**/*********';⼆、为了解决⽕狐有些版本不⽀持,可以改成这种⽅式window.location='https://*****.oss-cn-**/*********';三、该⽅法IE和⽕狐都可以,url表⽰要下载的⽂件路径function(url){try {var elemIF = document.createElement("iframe");elemIF.src = url;elemIF.style.display = "none";document.body.appendChild(elemIF);} catch (e) {alert("下载异常！");}}四、form表单的形式downloadFile(url){var form=$("<form>");form.attr("style","display:none");form.attr("target","");form.attr("method","get");form.attr("action",url);$("body").append(form);form.submit();//表单提交}}五、a标签的⽅式function(url,name){var a = document.createElement("a");a.download = name + ".xls";a.href = url;$("body").append(a); // 修复firefox中⽆法触发clicka.click();$(a).remove();}六、假如后台给的⽂件流function (formData, url, name) {return new Promise((resolve, reject) => {var xhr = new XMLHttpRequest();xhr.open("POST", url, true); // 也可以使⽤POST⽅式，根据接⼝xhr.responseType = "blob"; // 返回类型blob// 定义请求完成的处理函数，请求前也可以增加加载框/禁⽤下载按钮逻辑xhr.onload = function () {// 请求完成if (this.status === 200) {// 返回200var blob = this.response;var reader = new FileReader();reader.readAsDataURL(blob); // 转换为base64，可以直接放⼊a表情hrefreader.onload = function (e) {// 转换完成，创建⼀个a标签⽤于下载var a = document.createElement("a");a.download = name + ".xls";a.href = e.target.result;$("body").append(a); // 修复firefox中⽆法触发clicka.click();resolve(200)$(a).remove();};}};// 发送ajax请求xhr.send(formData);})};）download.js源码）七、download.js（下⾯是七、download.js（下⾯是download.js源码//download.js v4.2, by dandavis; 2008-2016. [CCBY2] see /download.html for tests/usage// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime // v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling. // v4 adds AMD/UMD, commonJS, and plain browser support// v4.1 adds url download capability via solo URL argument (same domain/CORS only)// v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors// https:///rndme/download(function (root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.define([], factory);} else if (typeof exports === 'object') {// Node. Does not work with strict CommonJS, but// only CommonJS-like environments that support module.exports,// like Node.module.exports = factory();} else {// Browser globals (root is window)root.download = factory();}}(this, function () {return function download(data, strFileName, strMimeType) {var self = window, // this script is only for browsers anyway...defaultMime = "application/octet-stream", // this default mime also triggers iframe downloadsmimeType = strMimeType || defaultMime,payload = data,url = !strFileName && !strMimeType && payload,anchor = document.createElement("a"),toString = function(a){return String(a);},myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),fileName = strFileName || "download",blob,reader;myBlob= myBlob.call ? myBlob.bind(self) : Blob ;if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callbackpayload=[payload, mimeType];mimeType=payload[0];payload=payload[1];}if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argumentfileName = url.split("/").pop().split("?")[0];anchor.href = url; // assign href prop to temp anchorif(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:var ajax=new XMLHttpRequest();ajax.open( "GET", url, true);ajax.responseType = 'blob';ajax.onload= function(e){download(e.target.response, fileName, defaultMime);};setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:return ajax;} // end if valid url?} // end if url?//go ahead and download dataURLs right awayif(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){if(payload.length > (1024*1024*1.999) && myBlob !== toString ){payload=dataUrlToBlob(payload);mimeType=payload.type || defaultMime;}else{return navigator.msSaveBlob ? // IE10 can't do a[download], only Blobs:navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :saver(payload) ; // everyone else can save dataURLs un-processed}}//end if dataURL passed?blob = payload instanceof myBlob ?payload :new myBlob([payload], {type: mimeType}) ;function dataUrlToBlob(strUrl) {var parts= strUrl.split(/[:;,]/),type= parts[1],decoder= parts[2] == "base64" ? atob : decodeURIComponent,binData= decoder( parts.pop() ),mx= binData.length,i= 0,uiArr= new Uint8Array(mx);for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);return new myBlob([uiArr], {type: type});}function saver(url, winMode){if ('download' in anchor) { //html5 A[download]anchor.href = url;anchor.setAttribute("download", fileName);anchor.className = "download-js-link";anchor.innerHTML = "downloading...";anchor.style.display = "none";document.body.appendChild(anchor);setTimeout(function() {anchor.click();document.body.removeChild(anchor);if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}}, 66);return true;}// handle non-a[download] safari as best we can:if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(erAgent)) {url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);if(!window.open(url)){ // popup blocked, offer direct download:if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; } }return true;}//do iframe dataURL download (old ch+FF):var f = document.createElement("iframe");document.body.appendChild(f);if(!winMode){ // force a mime that will download:url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);}f.src=url;setTimeout(function(){ document.body.removeChild(f); }, 333);}//end saverif (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)return navigator.msSaveBlob(blob, fileName);}if(self.URL){ // simple fast and modern way using Blob and URL:saver(self.URL.createObjectURL(blob), true);}else{// handle non-Blob()+non-URL browsers:if(typeof blob === "string" || blob.constructor===toString ){try{return saver( "data:" + mimeType + ";base64," + self.btoa(blob) );}catch(y){return saver( "data:" + mimeType + "," + encodeURIComponent(blob) );}}// Blob but not URL support:reader=new FileReader();reader.onload=function(e){saver(this.result);};reader.readAsDataURL(blob);}return true;}; /* end download() */}));⽤法：download(fileUrl,name,"video/mp4");具体更多的⽤法请参考官⽹，注意 download.js第⼀个参数是数据流，不是像oss那样的⽂件地址。

Element+vue.js实现文件模板下载，和Upload上传文件带参数

Element+vue.js实现⽂件模板下载，和Upload上传⽂件带参数⼀开始⾃⼰也是第⼀次⽤Element+vue.js 做上传⽂件功能，⾛了点弯路。

经过功能实现后整合了⼀下，给需要的朋友们参考⼀下。

功能页⾯如下：下⾯是此功能的完整代码：HTML：（样式由于是⽂件引⽤，这⾥没有给，亲们⾃⼰有⾃⼰喜欢的CSS）1<div id="uploadFile">23<input type="hidden" id="hidSid" value="@ViewBag.sid"/>45<div>67<span style="color:red">*</span><span class="w60">参数</span>8</div>910<div style="margin-left:3px;">11<el-input v-cloak class="w160" v-model="searchData.parameter"></el-input>12</div>1314<div class="inline-block" style="line-height: 38px;">15<el-upload class="upload-demo"16 style="float:left;"17 v-bind:action="uploadPath"18 v-bind:auto-upload="true"19 v-bind:before-upload="beforeUpload"20 v-bind:on-success="uploadSuccess"21 v-bind:on-error="uploadFail"22 v-bind:data="paramsData"23 v-bind:limit="1"24 v-bind:show-file-list="false"25 v-bind:file-list="fileList">2627<el-button v-cloak style="width:160px;" type="warning">上传⽂件</el-button>28</el-upload>2930<el-button type="text" style="margin-left:20px;padding-top:18px;" v-on:click="downloadTemplate">⽂件模板下载</el-button>31</div>3233</div>解释说明：action 必选参数，上传的地址 stringauto-upload 是否在选取⽂件后⽴即进⾏上传 booleanbefore-upload 上传⽂件之前的钩⼦，参数为上传的⽂件，若返回 false 或者返回 Promise 且被 reject，则停⽌上传on-success ⽂件上传成功时的钩⼦ function(response, file, fileList)on-error ⽂件上传失败时的钩⼦ function(err, file, fileList)data 上传时附带的额外参数 objectlimit 最⼤允许上传个数 numbershow-file-list 是否显⽰已上传⽂件列表 booleanfile-list 上传的⽂件列表, 例如: [{name: 'food.jpg', url: 'https:///xxx.jpg'}]Script:这⾥⽤的是vue.js1var vueIncomePay = new Vue({2 el: '#uploadFile',3 data: {4 sid: document.getElementById('hidSid').value,5//上传Excel6 uploadPath: '/FM/Account/UploadBathCheck?sid=' + document.getElementById('hidSid').value,7//上传⽂件格式8 fileTypeList: ['xls', 'xlsx'],9//上传⽂件⼤⼩ 2M10 fileSize: 2,11 fileList: [],12 },13 searchData: {14 IsDetail: false,15//参数16 parameter:'',17 }18 },19 methods: {2021 beforeUpload: function (file) {22var __self = this;23var result = true;2425//参数不能为空验证26if (__self.searchData.parameter == "") {27 __self.$message({ message: '请输⼊参数！', type: 'warning' });28return false;29 }30var type = .substring(.indexOf('.') + 1, .length).toLowerCase();31var isExcel = __self.fileTypeList.indexOf(type) != -1;32var isLtSize = file.size / 1024 / 1024 < __self.fileSize;3334if (!isExcel) {35 __self.$message.error('上传⽂件只能是 ' + __self.fileTypeList.join(',') + ' 格式');36 }37if (!isLtSize) {38 __self.$message.error('上传⽂件⼤⼩不能超过 ' + __self.fileSize + 'M');39 }40 result = isExcel && isLtSize;41 __self.reMsg = '';42 __self.errorList = [];43if (result) {44 __self.loading = __self.$loading({45 lock: true,46 text: '导⼊数据中...',47 spinner: 'el-icon-loading',48 background: 'rgba(0, 0, 0, 0.7)'49 });50 }51return result;52 },5354 uploadSuccess: function (data, file, fileList) {55var __self = this;56 __self.resultMsg = '';57 __self.loading.close();58if (data == null) {59 __self.$message.error('导⼊失败');60return;61 } else {62 console.log(JSON.stringify(data));63 __self.fileList = [];64if (data.isSucc) {65 __self.$message.success(data.message);66 } else {67 __self.$message.error(data.message);68 }69 console.log(__self.errorList);70 }71 },7273 uploadFail: function (err) {74this.$message.error('导⼊失败');75 console.log(JSON.stringify(err));76return;77 },78 },7980//被带⼊到后台的参数81 computed: {82 paramsData: function () {83var __self = this;84var params = {85 parameter: __self.searchData.parameter,86 };87return params;88 }89 }⾄于后台代码，本⼈是MVC。

JS下载文件两种方式总结

JS下载⽂件两种⽅式总结更多JS实战，前往：下载⽂件分为两种形式，哪两种⽅式取决于后台；如果后台服务器的静态⽬录有可供下载的静态资源，后台⼈员告知你⽂件路径，直接window.location.href⽅式获取即可；如果后台服务器⽆可供下载的静态资源，返回的是⼀个⽂件流(response-type: application/octet-stream;charset=UTF-8 )，则使⽤第⼆种⽅式（将⽂件写⼊内存，并且创建a元素，a链接href属性指向内存中的⽂件，download属性指向要下载的⽂件名，模拟a元素的点击事件，进⾏下载；）1、第⼀种，后台服务器有静态资源且是固定的⽂件名（GET⽅式下载⽂件）window.location.href="http://www.域名/template.xlsx(⽂件名)"2、第⼆种，后台返回⽂件流解决办法⼀：本地可测试；推荐使⽤；第⼀步：引⼊axios第三⽅库<script src="https:///axios/dist/axios.min.js"></script>第⼆步：传参、调接⼝，下载⽂件axios.post(请求路径URL, {参数Params}, {responseType: 'blob'}).then(function(res){var blob = res.data;// FileReader主要⽤于将⽂件内容读⼊内存var reader = new FileReader();reader.readAsDataURL(blob);// onload当读取操作成功完成时调⽤reader.onload = function(e) {var a = document.createElement('a');// 获取⽂件名fileNamevar fileName = res.headers["content-disposition"].split("=");fileName = fileName[fileName.length - 1];fileName = fileName.replace(/"/g, "");a.download = fileName;a.href = e.target.result;document.body.appendChild(a);a.click();document.body.removeChild(a);}});解决办法⼆：form表单提交，本地不可测试；不推荐使⽤；var exportForm = $('<form action="/api/cert/download" method="post">\<input type="hidden" name="ids" value="'+参数ids值+'"/>\</form>');$(document.body).append(exportForm);exportForm.submit();exportForm.remove();。

javascript如何实现下载

javascript如何实现下载javascript实现下载的⽅法：1、利⽤a标签的href属性添加⽂件URL，语法“下载”；2、使⽤url跳转下载，语法“window.open(⽂件url)”。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑使⽤JS实现下载⽂件功能？常见是新建下载的⽅法为：1、a标签压缩包下载：<a href="前端框架-Minton.rar">下载</a>其他⽂件下载function commDownload1(url, params) {url += "?";for(let key in params) {url += key + "=" + params[key] + "&";}url = url.substr(0, url.length - 1);$("")[0].click();}2、url跳转function commDownload2(url, params) {url += "?";for(let key in params) {url += key + "=" + params[key] + "&";}url = url.substr(0, url.length - 1);window.open(url);其中a标签体验好些，其他两个会打开⼀个新标签再下载再关闭新标签，整个过程让⼈感觉眼花缭乱，因此推荐使⽤a标签实现下载功能。

以上就是javascript如何实现下载的详细内容。

（）。

js文件流下载通用方法

js⽂件流下载通⽤⽅法通常我们会⽤到⽂件流下载⽂件，下⾯给⼤家⼀个通⽤的⽂件流下载的js/**下载⽂件* options:{* url:'', //下载地址* isNewWinOpen:false,是否新窗⼝打开* data:{name:value}, //要发送的数据* method:'post'* }*/function downLoadFile(url, data, method, isNewWinOpen) {var config = {url: url,data: (data = data || {}),method: (method = method || "GET"),isNewWinOpen: (isNewWinOpen = isNewWinOpen || false)};var $iframe = $('<div style="display: none"><iframe id="down-file-iframe" name="down-file-iframe" /></div>');var $form = $('<form target="down-file-iframe" method="' + config.method + '" action="' + config.url + '" />');if (config.isNewWinOpen) {$form.attr("target", "_blank");}/*拼接参数*/for (var key in config.data) {$form.append('<input type="hidden" name="' + key + '" value="' + config.data[key] + '" />');}$iframe.append($form);$(document.body).append($iframe);$form.submit();setTimeout(function () {$iframe.remove();}, 1000)}如果这篇⽂章对您有帮助，您可以打赏我技术交流QQ群：15129679。

js实现下载进度条

js实现下载进度条Java代码(单纯的⽂件下载1 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {2 response.setCharacterEncoding("UTF-8");3 String downloadFlg = (String)request.getParameter("downloadFlg");4 if("1".equals(downloadFlg)) {6 String fileName = "⾃定义⽂件名";7 //1.设置相应类型8 //强制下载⽂件(禁⽌浏览器打开)9 response.setContentType("application/force-download");10 //2.读取⽂件11 InputStream in = new FileInputStream("E:\\workspace\\FileDownload\\WebContent\\tmp\\"+fileName);12 //⽂件名的编码格式(防⽌⽂件名乱码13 fileName = URLEncoder.encode(fileName, "UTF-8");14 //设置响应头15 response.setHeader("Content-Disposition", "attachment;filename="+fileName);16 //设置⽂件⼤⼩(粗略的⽂件⼤⼩)17 response.setContentLength(in.available());18 //读取⽂件19 ServletOutputStream outputStream = response.getOutputStream();20 byte[] b = new byte[1024];21 int len = 0;22 while((len = in.read(b))!=-1) {23 outputStream.write(b, 0, len);24 }25 outputStream.flush();26 outputStream.close();27 in.close();2829 }JS代码:下载进度计算1 function download(){2 var downloadFlg = document.getElementById("downloadFlg").value;3 if(downloadFlg == "0"){4 alert("前⼀个⽂件下载未完成,请稍等.");5 return;6 }7 document.getElementById("downloadFlg").value = 0;8 progressDownLoad({url:"./FileDownloadServlet?downloadFlg=1",progress:function(evt){console.log(evt);}});910 $.ajax({11 url: "/FileDownload/FileDownloadServlet",12 type: "post",13 dataType: "json",14 data: { "downloadFlg":"1", "fileDownload":"fileDownload" },15 xhr: function(){16 var xhr = new window.XMLHttpRequest();17 //download progress18 xhr.addEventListener("progress", function (evt) {19 console.log(evt);20 if (evt.lengthComputable) {21 //计算下载进度22 var percentComplete = evt.loaded / evt.total;23 //换算24 percentComplete = Math.round(percentComplete * 100);25 //把下载进度显⽰到进度条26 document.getElementById("progress").value = percentComplete;27 //下载完成28 if(percentComplete==100){29 document.getElementById("downloadFlg").value = 1;30 document.getElementById("text").innerHTML = "⽂件下载完成";31 }32 }33 }, false);34 return xhr;35 }36 });3738 }⽤Ajax接管浏览器下载操作,实现⽂件下载1 /**2 * 下载⽂件3 * @param url: ⽂件请求路径4 * @param params: 请求参数5 * @param progress: 进度处理回调函数6 * @param success: 下载完成回调函数7 * eg: progressDownLoad({url:'http://loacalhost:8080/downLoad.action',name:'file.rar',progress:function(evt){8 * console.log(evt);9 * }});10 **/11 function progressDownLoad({url,params,progress,success} ){12 var filename = "";13 var xhr = new XMLHttpRequest();14 xhr.open("POST", url, true);15 //监听进度事件16 xhr.addEventListener("progress", function (evt) {17 if(progress) try{ progress.call(evt); }catch(e){}18 }, false);1920 //请求类型21 xhr.responseType = "blob";22 //设置请求头23 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");24 //回调⽅法25 xhr.onreadystatechange = function () {26 if (xhr.readyState === 4 && xhr.status === 200) {27 if (typeof window.chrome !== 'undefined') {28 // Chrome version29 //创建下载节点30 var link = document.createElement('a');31 link.href = window.URL.createObjectURL(xhr.response);32 //获取⽂件名33 filename = xhr.getResponseHeader("Content-disposition").split('=')[1];34 link.download = filename;35 link.click();36 }37 if(success) try{ success.call(xhr); }catch(e){}38 }39 };40 var paramsStr = '';41 if(params) for (var key in params) paramsStr += '&'+key+'='+params[key];42 if(paramsStr) paramsStr = paramsStr.substring(1);4344 xhr.send(paramsStr);45 }效果图:参考代码:JS接管浏览器下载JS下载进度计算。

js下载文件的实现方法一

JavaScript实现的浏览器下载文件的方法

jsp下载文件的实现方法 及 注意

用Jsp来实现文件下载功能的几种方式

使用JS代码实现点击按钮下载文件

浅析Node.js实现HTTP文件下载

js下载文件的实现方法一

JS下载文件，解决文件直接在浏览器打开的情况

前端调用后台接口下载word文档的两种方法

【JS】前端文件下载（无刷新）方法总结

前端javascript实现文件下载的示例

JS实现点击按钮，下载文件

jsp实现下载excel,word,pdf,jgp,gif,xml,js过滤器实现文档

js下载文件到本地各种方法总结

Element+vue.js实现文件模板下载，和Upload上传文件带参数

JS下载文件两种方式总结

javascript如何实现下载

js文件流下载通用方法

js实现下载进度条

jsp下载文件的实现方法及注意