jquery下载文件

最新推荐文章于 2024-11-04 16:22:37 发布

s小布丁

最新推荐文章于 2024-11-04 16:22:37 发布

阅读量1.8k

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/m0_49529959/article/details/120459745

版权

本文介绍了如何在JavaScript中使用Ajax和Blob技术通过后台接口实现文件的下载，包括两种方法：直接打开URL和利用Blob对象创建下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 /**
	* 文件下载
	* @param fileUrl		文件url
	* @param fileName		下载文件显示名称
	*/
   function downLoadFile(fileUrl, fileName){
	   var index = location.href.indexOf("index.html");
		var pathName = location.href.substring(0, index);
		var url = pathName + "rest/download/downloadfileByName?imageUrl="+fileUrl+"&filename="+fileName;
		//调用后台接口，下载文件
	   window.open(url, "_self");
   };
   
   /**
	* 文件下载
	* @param id		文件id
	* @param fileName		下载文件显示名称
	*/
   function downLoadFileById(id, fileName){
	   var index = location.href.indexOf("index.html");
		var pathName = location.href.substring(0, index);
		var url = pathName + "rest/download/downloadfileByName?id="+id+"&filename="+fileName;
		//调用后台接口，下载文件
	//    window.open(url, "_self");
	// 方法二：
	   $.ajax({ 
			headers: {
				"user_guid":localStorage.getItem('user_guid'),
				"nonce":localStorage.getItem('nonce'),
			}, // 上传请求头
		    type: "GET",
			url: pathName + "rest/download/downloadfileByName",
			data:{ id: id, filename: fileName },
			dataType: 'binary',
			xhrFields: { responseType: "blob" },
			success: function (res) {
				// res 为二进制流
				console.log("成功--->>>>",res)
				var blob = new Blob([res],{ type:'application/octet-stream'})
				var url = window.URL.createObjectURL(blob)
				var link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				link.setAttribute('download', fileName || 'download')
				document.body.appendChild(link)
				link.click()
				link.remove()
			},
			complete: function (XMLHttpRequest,status) {
				console.log('complete---->>>',XMLHttpRequest,status)
			},
			error: function (err) {
				console.log('失败回调---->>>',err);
			}
		});