`

[前端]关于使用ajax下载问题

阅读更多

1.首先,使用js来下载是不会保存文件到本地的,因为js不会与硬盘交互,基于安全性原则.

参考:https://www.cnblogs.com/nuccch/p/7151228.html

具体原理:

Ajax无法下载文件的原因

 

浏览器的GET(frame、a)和POST(form)请求具有如下特点:

 

    response会交由浏览器处理

    response内容可以为二进制文件、字符串等

 

Ajax请求具有如下特点:

 

    response会交由Javascript处理

    response内容仅可以为字符串

 

因此,Ajax本身无法触发浏览器的下载功能。

 

2.在不使用a标签,纯js下解决办法有三种,一种是直接配置tomcat下载,但这种不安全

参考:简单粗暴JavaWeb-第五篇:直接访问HTML、图片

https://blog.csdn.net/yhan_shen/article/details/78555290

又或者一些.exe文件直接可以通过路径下载,是因为服务器配置了Apache文件的local path代理,同时开放了文件下载权限

 

3.第二种是HTML5 a.download结合blob对象进行下载

 

4.第三种是内部用js写一个form或者iframe来提交

这里详说第三种:

定义form:

var form=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");
form.attr("action","exportData");
var input1=$("<input>");
input1.attr("type","hidden");
input1.attr("name","exportData");
input1.attr("value",(new Date()).getMilliseconds());
$("body").append(form);//将表单放置在web中
form.append(input1);

form.submit();//表单提交 

 参考:http://www.cnblogs.com/sydeveloper/archive/2013/05/14/3078295.html

 

iframe:

function download(){
            var IFrameRequest=document.createElement("iframe");
            IFrameRequest.id="IFrameRequest";
            IFrameRequest.src="/test.zip";
            IFrameRequest.style.display="none";
            document.body.appendChild(IFrameRequest);
}

 参考:

https://www.cnblogs.com/voiphudong/p/3284724.html

 

后台:

public boolean download(String filePath, HttpServletResponse resp) {
		logger.debug("-------Start to download file[{}]----------", filePath);
		boolean isDownload = false;
		try {
			File file = new File(filePath);
			String fileName = file.getName();
			
			  InputStream in = new BufferedInputStream(new FileInputStream(file)); 
			  byte[] buffer = new byte[in.available()];
			  in.read(buffer); 
			  in.close(); 
			  resp.reset();
			  resp.setContentType("text/html");
			  resp.addHeader("Content-Disposition", "attachment;filename=" + new String(fileName.getBytes()));
			  resp.addHeader("Content-Length", "" + file.length());
              BufferedOutputStream toClient = new BufferedOutputStream(resp.getOutputStream());

			  toClient.write(buffer); 
			  toClient.flush(); 
			  toClient.close();
			 
			logger.debug("-------End to download file[{}]----------", filePath);
		} catch (FileNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();

		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return isDownload;

	}

 

 

 

 

分享到:
评论

相关推荐

    ajax实现java文件下载

    为了克服这一问题,开发人员通常会利用Ajax技术来实现异步文件下载,使得用户在下载文件的同时仍能保持页面的正常操作。本话题将详细探讨如何通过Ajax实现Java文件的下载,并介绍相关的核心概念和技术。 1. **Ajax*...

    前端ajax分页

    "前端Ajax分页"就是这样的一个实现方式,它结合了Ajax(异步JavaScript和XML)技术和JavaScript来实现动态加载内容。 Ajax的核心在于它可以向服务器发送异步请求,获取新数据,并在后台更新部分页面,而不会影响...

    前端项目-jasmine-ajax.zip

    而`jasmine-ajax`则是一个专门为Jasmine设计的库,用于在测试套件中模拟Ajax响应,使开发者能够在不依赖真实网络请求的情况下测试前端代码。 **Jasmine框架** Jasmine是一个行为驱动的测试框架,它允许开发者以...

    web前端开发AJAX学习笔记

    web前端开发AJAX学习笔记

    平台java前端ajax,json请求

    本话题主要关注在Web平台中,使用Java后端和JavaScript前端进行JSON数据交互的过程,具体涉及到AJAX(Asynchronous JavaScript and XML)技术以及JSON(JavaScript Object Notation)数据格式。 **1. AJAX**:AJAX ...

    前端开发jsajax

    #### AJAX 跨域问题 在 AJAX 请求中,浏览器出于安全考虑,会限制对不同域名之间的数据访问,这就是所谓的“同源策略”。为了绕过这个限制,可以采用多种方法实现跨域请求,其中最常用的就是 JSONP(JSON with ...

    基于SSM的App信息管理系统,前端采用Layui + Ajax.zip

    基于SSM的App信息管理系统,前端采用Layui + Ajax 基于SSM的App信息管理系统,前端采用Layui + Ajax 基于SSM的App信息管理系统,前端采用Layui + Ajax 基于SSM的App信息管理系统,前端采用Layui + Ajax 基于SSM的App...

    Ajax相关源码jar包下载

    在提供的"ajax案例源码及jar包"中,可能包含了一些示例代码,展示如何使用Ajax进行数据交互。这些案例可能涵盖了以下方面: 1. 使用原生XMLHttpRequest对象实现基本的Ajax请求。 2. 使用jQuery或其他库简化Ajax调用...

    第34章 项目1-博客前端:封装库--引入Ajax1

    总结来说,本章介绍了如何在前端项目中封装和使用Ajax,以实现与服务器的异步通信,提高用户交互的流畅性和效率。通过对Ajax函数的封装,我们可以轻松地在多个地方复用这一功能,简化代码维护工作。同时,了解和掌握...

    ajax+json+servlet下载

    4. 用户触发下载时,前端再次通过Ajax发送请求,携带选定文件的信息。 5. Servlet根据请求准备文件下载流,设置响应头,并返回文件内容。 6. 浏览器接收到响应后开始下载。 这样的实现方式不仅提供了无刷新的用户...

    基于MVC用JSPServlet实现JPetStore实验报告+使用AJAX和jQuery改善用户体验实验报告.doc

    在本实验报告中,我们将探讨如何使用MVC(Model-View-Controller)设计模式通过JSP和Servlet实现JPetStore应用程序,并进一步利用AJAX和jQuery技术优化用户体验。实验旨在加深对Web应用开发的理解,特别是Java相关...

    谷歌浏览器插件—— Ajax Interceptor

    它可以更快速地定位问题,特别是对于那些依赖于特定API数据的复杂前端应用。 ### 6. ECMAScript 和 JavaScript 在前端中的角色 ECMAScript(ES)是一门编程语言标准,JavaScript是其最常用的实现。在前端开发中,...

    ajax上传下载

    ### AJAX上传下载技术详解 #### 引言 随着互联网技术的发展,用户对于网站交互体验的要求越来越高,其中异步上传和下载功能成为提升用户体验的关键技术之一。AJAX(Asynchronous JavaScript and XML)技术允许网页...

    前端项目-eldarion-ajax.zip

    eldarion-ajax库是一个专门针对前端Ajax功能扩展的工具,它使得在网站中实现声明式Ajax交互变得简单易行。本文将详细解析eldarion-ajax库的核心概念、主要功能以及如何在实际项目中应用。 eldarion-ajax库的设计...

    ajax+css一些前端应用例子(超过15种效果)

    在前端开发中,Ajax(Asynchronous JavaScript and XML)与CSS(Cascading Style Sheets)是两种非常关键的技术,它们能够创建交互性强、响应快速且用户体验优秀的网页应用。本压缩包包含超过15个实例,涵盖了多种...

    Web前端Ajax&JQuery视频教程课件

    【Ajax和jQuery简介】 Ajax(Asynchronous ...总的来说,Ajax和jQuery为Web开发提供了强大的工具,让前端交互更加流畅,用户体验更佳。通过熟练掌握这些技术,开发者能够构建出更高效、更动态的Web应用程序。

    基于SSM的App信息管理系统源码+项目说明(前端采用Layui + Ajax).zip

    基于SSM的App信息管理系统源码+项目说明(前端采用Layui + Ajax).zip 基于SSM的App信息管理系统源码+项目说明(前端采用Layui + Ajax).zip 基于SSM的App信息管理系统源码+项目说明(前端采用Layui + Ajax).zip ...

    前端网络——Ajax使用

    这是开发者已经订好的规则,我们只要记住固定的代码,就可以使用,只是这个固定的代码片段有点长而已 开始了,下面这一堆就是规定的代码: function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) {//...

    SpringBoot+SpringSecurity处理Ajax登录请求问题(推荐)

    SpringBoot+SpringSecurity处理Ajax登录请求问题是SpringBoot开发中的一個常见问题,本文将详细介绍如何使用SpringBoot+SpringSecurity处理Ajax登录请求问题。 知识点1:SpringBoot+SpringSecurity框架简介 ...

Global site tag (gtag.js) - Google Analytics