本文实例讲述了JQuery 实现文件下载的常用方法。分享给大家供大家参考,具体如下:
GET方式
1 |
|
POST方式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
ajax为什么不能下载文件
ajax支持的服务器返回数据类型有:xml、json、script、html,其他类型(例如二进制流)将被作为String返回,无法触发浏览器的下载处理机制和程序。
1 2 3 4 5 6 7 |
|
ajax下载文件全部代码
function testAjaxDownload(){
var url = "http://127.0.0.1:8080/candidateData/txtdownload";
$.ajax({
type:'get',
url: url,
async:false,
success:function(data, statusTest, xhr){
console.log(xhr);
console.log(xhr.getAllResponseHeaders());//获取所有的响应头消息
let fileName = xhr.getResponseHeader("content-disposition").split(';')[1].split('=')[1].replace(/\"/g,'')
let type = xhr.getResponseHeader("content-type")
let blob = new Blob([data],{type:type})
//对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
//IE10以上支持blob但是依然不支持download
if ('download' in document.createElement('a')) { //支持a标签download的浏览器
const link = document.createElement('a')//创建a标签
link.download = fileName//a标签添加属性
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.click()//执行下载
URL.revokeObjectURL(link.href) //释放url
document.body.removeChild(link)//释放标签
} else { //其他浏览器
if(window.navigator.msSaveOrOpenBlob){
window.navigator.msSaveOrOpenBlob(blob,fileName)
}
}
}
});
}
注意:上面这种方法下载文本文件是没有问题的,下载二进制文件比如excel、word文件是有问题的
HTML5 Blob对象
一直以来,JS都没有比较好的可以直接处理二进制的方法。而Blob的存在,允许我们可以通过JS直接操作二进制数据。Blob对象可以看做是存放二进制数据的容器。
创建Blob对象
1 |
|
- dataArr:数组,包含了要添加到Blob对象中的数据。数据可以是任意多个ArrayBuffer,ArrayBufferView, Blob,或者 DOMString对象。
- opt:对象,包含两个属性
- type:用于设置Blob对象的属性(如:MIME类型)
- endings :(已废弃),设置BlobBuilder.append() 方法的endings参数,取值"transparent"或"native"
1 2 3 4 |
|
xmlhttprequest 2 + Blob 实现文件下载
xmlhttprequest 2 标准支持流文件,使用 xhr.response
作为返回(不是responseText)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
注意:使用xmlhttprequest 可以指定responseTyp为blob,但是使用ajax是不能指定responseType为blob的