最近做了一个需求,用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();
}
更多推荐
Ajax方式实现文件下载
发布评论