Ajax实现文件下载 ,post下载,原生xhr下载

网上找了一圈都是错的,根本没办法传递参数

JQuery的ajax函数的返回类型只有xml、text、json、html等类型,没有“流”类型,所以我们要实现ajax下载,不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form,用这个form提交参数,并返回“流”类型的数据。在实现过程中,页面也没有进行刷新。

1. 使用ajax,ajax的返回值类型是json,text,html,xml类型,或者可以说ajax的发送,接受都只能是string字符串,不能流类型,所以无法实现文件下载,强用会出现response冲突。如果非要使用ajax的话,只能通过返回值得到生成的文件相关url。然后在回调函数里通过创建一个iframe,并设置其src值为文件url,或者一个对文件生成流的处理url,这样操作来实现文件下载且页面无刷新。

2 在js的xhr异步请求用以二进制流接收数据转载成blob文件,然后用js模拟a标签点击,开启a标签的download,最后把xhr的数据传递给a标签的下载,最后保存,网上大部分写法在传参的时候都把xhr.send写在后面,其实是错的,应该写在前面

		$('#exportBtn').click(function () {

			var formData = new FormData();
			formData.append('id', 123456);
			var method = 'post';//请求方法
			var url = window.location.href;//请求url
			var xhr = new XMLHttpRequest();//定义一个XMLHttpRequest对象
			xhr.open(method, url, true);
			xhr.responseType = 'blob';//设置ajax的响应类型为blob
			xhr.send(formData);
//这里设置传递的参数
			xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
			xhr.onload = function ()//当请求完成,响应就绪进入
			{
				if (this.status == 200)//当响应状态码为200时进入
				{
					var blob = this.response;//获取响应返回的blob对象
					console.log(blob);
					//这一段用来判断是否是IE浏览器,因为下面有些代码不支持IE
					if (typeof window.navigator.msSaveBlob !== 'undefined') {
						window.navigator.msSaveBlob(blob, "NPI_PROJECT.xlsx");
						return;
					}
					var a = document.createElement('a');//在dom树上创建一个a标签
					var url = window.URL.createObjectURL(blob);//我的理解是生成一个相对于浏览器的虚拟url,用于指向传入的blob对象,让浏览器可以通过这个url找到这个blob对象
					a.href = url;//将url赋值给a标签的href属性
					a.download = 'NPI_PROJECT.xlsx';//设置设置下载文件的名称
					a.click();//主动触发a标签点击事件
				}
			};
			
			// xhr.send(JSON.stringify(params));//附带参数发送请求
		});

php端简单写点

\print_r($_POST);

在f12可以看到console

Array
(
    [id] => 123456
)

说明传递成功,并且文件也可以下载

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发
  • wangjianjilei

    昵称

  • 取消
    昵称