Ajax方式实现文件下载

最近做了一个需求，用ajax实现文件下载，刚开始做完的结果是文件内容返回了，但是无法生成文件。

失败原因

ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的接收类型只能是string字符串，不是流类型，所以无法实现文件下载。但用ajax仍然可以获得文件的内容，该文件将被保留在内存中，无法将文件保存到磁盘。这是因为JavaScript无法和磁盘进行交互，否则这会是一个严重的安全问题，js无法调用到浏览器的下载处理机制和程序，会被浏览器阻塞。

解决方式

• 隐藏表单，用提交表单的形式
• 用window.open() 或 window.location.href()
• 创建iframe，iframe的src可以是文件地址url来直接下载文件

代码如下：

旧代码：下载失败，只是把文件内容返回了。

download(){
		  if (this.cloudDiskIds.length == 0) {
			  alert ("请选择要下载的文件！")
			  return
		  }
		  var _this = this;
		  $.ajax({
	    		type:'GET',
	    		url:'/wingCloud/customer/download',	
				data:this.formData,
				contentType: false,
				processData: false,
				dataType:'json',
				timeout: 8000,
				success:(result)=>{
					if(result.success){
						alert("下载成功")
					} else {
						alert(result.msg)
					}
				},
				error:(err)=>{
					console.log("err: "+ JSON.stringify(err))
				}
	    	})		
	  }

改进后：

download() {
		  if (this.cloudDiskIds.length == 0) {
			  alert ("请选择要下载的文件！")
			  return
		  }
		  if (this.cloudDiskIds.length > 1) {
			  alert ("只能选择一个文件！")
			  return
		  }
		  // this.formData.fileName = this.cloudDiskList[0].fileName;
		  // this.formData.filePath = this.cloudDiskList[0].filePath;
		  // alert (this.cloudDiskIds[0])
		  // 请求地址
		  var url = "http://localhost:8080/wingCloud/customer/download";
		  // 分装form表单
		  var form = $("<form></form>").attr("action", url).attr("method", "post");
	      // 封装参数
		  form.append($("<input></input>").attr("type", "hidden").attr("name", "id").attr("value", this.cloudDiskIds[0]));
	      // form.append($("<input></input>").attr("type", "hidden").attr("name", "filePath").attr("value", this.formData.filePath));
	      // 提交
		  form.appendTo('body').submit().remove();
	  }