ajax 下载文件

原本现在文件直接通过超链接可以完成下载,但现在要在url中附带几个参数,并且这些参数要是点击事件触发时的最新值,所以这里使用ajax的方式进行下载

然而:

1.使用ajax,ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的发送,接受都只能是string字符串,不能流类型,所以无法实现文件下载,强用会出现response冲突。

如果非要使用ajax的话,只能通过返回值得到生成的文件相关url。然后在回调函数里通过创建一个iframe,并设置其src值为文件url,或者一个对文件生成流的处理url,这样操作来实现文件下载且页面无刷新。

2.不使用ajax,通过dom动态操作或创建iframe,form的方式来实现,在下载文件的同时实现页面不刷新,其中iframe的src可以是文件地址url来直接下载文件,也可以是流处理url通过response流输出下载,form的是流处理url通过response流输出下载,dom动态操作的时候实现文件下载,且页面无刷新。


这里就是用两两种操作dom方式实现下载:

操作iframe方式:

		function ajaxDownload(urlPost,data){
       		$.ajax({
				url: urlPost,
				type: "POST",
				cache: false,
				data:data,
				beforeSend:function(){
        			$("#grid_crud").pqGrid("showLoading")
        		},
				success: function(filename) {
					var url = urlPost + (((urlPost.indexOf("?") > 0) ? "&" : "?") + $.param(data));
					$(document.body).append("<iframe height=‘0‘ width=‘0‘ frameborder=‘0‘  src=" + url + "></iframe>")
				},
				complete:function(data){
        			$("#grid_crud").pqGrid("hideLoading")
        		},
        		error:function(a,b,c){
        			$("#grid_crud").pqGrid("hideLoading")
        		}
			});
       }

操作form形式:

        function ajaxDownload(url,data,method){
        	if(url && data){
        		// data 是 string 或者 array/object
        		data = typeof data ==‘string‘?data:jQuery.param(data);
        		var inputs =‘‘;
        		jQuery.each(data.split(‘&‘),function(){
        			var pair = this.split(‘=‘);
        			inputs +=‘<input type="hidden" name="‘+pair[0]+‘" value="‘+pair[1]+‘"/>‘;
        		});
        		jQuery(‘<form action="‘+url+‘" method="‘+(method || ‘post‘)+‘">‘+inputs+‘</form>‘).appendTo(‘body‘).submit().remove();
        	}
        }

 

时间: 2024-11-01 16:36:16

ajax 下载文件的相关文章

如何用ajax下载文件

引子 在HTML5没来之前,浏览器想要下载文件,可能有这么几种方式: 借助a标签,<a href="学习资料.xlsx"></a> window.location = '学习资料.xlsx' 借助浏览器插件,如flash等(没考证过) 除了第三外,前两种方法有个缺点,就是无法知道下载是否完成,因为浏览器没有给出相关的事件.但是,自从有了Blob,fetch, xhr2这些好用的API之后,ajax下载文件(小文件)就变得可行了,核心原因就在于Blob和Array

怎么用ajax下载文件

可能大家都觉得没有必要用ajax来下载东西,用window.open(url)就可以搞定 但是这有一个问题,就是这就限定了只能用GET方式来请求了: 可能你又会说GET很符合REST的要求呀. 但是如果你用jwt来做身份验证呢? 这意味着你需要在Window.open时带上自定义的Request Header,这就无解了 所以今天来介绍一下怎么用ajax来下载文件 1 let xhr = new XMLHttpRequest() 2 xhr.open('GET', 'http://www.xxx

用ajax下载字节流形式的excel文件

原因:ajax请求只是个“字符型”的请求,即请求的内容是以文本类型存放的.文件的下载是以二进制形式进行的,ajax没法解析后台返回的文件流,所以无法处理二进制流response输出来下载文件. 解决方法:使用form表单提交实现文件下载 1,后台代码实现方法: // 生成excel文件 @RequestMapping(value = "/study", method = RequestMethod.POST) public void study(@RequestBody ParamVO

ajax请求不能下载文件(转载)

最近在做文件下载,后台写了个控制层,直接走进去应该就可以下载文件,各种文件图片,excel等 但是起初老是下载失败,并且弹出下面的乱码: 前台请求代码: [html] view plain copy $('#fileexcel').unbind('click').bind('click',function(){ alert("我要下载了"); $.ajax({ type:'post', url:'media', data:null, async:true, success : func

SpringMVC 避免IE执行AJAX时,返回JSON出现下载文件

<?xml version="1.0" encoding="UTF-8"?> <!-- SpringMVC配置文件 --> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:p="http://www.springframework.org/schema/p" xmlns:xsi="http://www.w3

ajax请求过程中下载文件在火狐下的兼容问题

项目中碰到的问题,记录如下. 需求很简单,点击一个文件链接下载该文件,同时向后台发送请求.需求很常见,用户点击下载后通常要进行下载量的统计,统计的话可以利用 script标签 或者 img标签(图片ping) 的跨域能力,将它们的 src 属性指向统计地址,但是这次用了 ajax 进行统计,遂出现了这个问题. demo 代码如下: 复制代码<a id="a" href="http://c758482.r82.cf2.rackcdn.com/Sublime Text 2.

下载文件:AJAX下载效果

//下载 function Download(id) { var form = $("<form>"); //定义一个form表单 form.attr('style', 'display:none'); //在form表单中添加查询参数 form.attr('target', ''); form.attr('method', 'post'); form.attr('action', "/task/DetailDownload"); var input1

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

PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两个方法:window.open()和通过form表单来提交. 在线例子:https://hamupp.github.io/gitblog/app/jsBasic/jsButtonDownloadFile/index.html 方法一:window.open("下载文件的后端接口"); *h

HttpServletResponse设置下载文件

// path是指欲下载的文件的路径.            File file = new File(path);            // 取得文件名.            String filename = file.getName();            filename = URLEncoder.encode(filename,"UTF-8");            // 以流的形式下载文件.            InputStream fis = new Buf