javascript之使⽤Blob对象下载⽂件
Blob对象
Blob是⼀个类⽂件的不可变的原始数据对象，⾮javascript原⽣数据类型，File对象就是继承⾃Blob对象，且在Blob的基础上进⾏扩展，以便⽀持⽤户系统上的⽂件。
前⾔
最近在做以post请求⽅式导出excel时，想到了可以使⽤Blob对象将后台返回的输出流以arraybuffer或blob的格式接收交给Blob处理，最后使⽤URL⽣成链接，供浏览器下载excel。
环境
1. vue
2.x
2. webpack
3.x
3. axios
操作
import axios from'axios'
/**
* 从服务器下载excel
*/
function downloadExcel(settings){
const defaultOptions ={
responseType:'arraybuffer'
}
Object.assign(settings.options, defaultOptions)
requestToResponse(settings).then(res =>{
const filename =decodeURI(res.headers['content-disposition'].split('filename=')[1])
if('download'ateElement('a')){
downloadFile(res.data, filename)
}else{
<('浏览器不⽀持')
}
})
}
/**
* 发送http请求
* @param {Object} settings api参数
* @returns reponse
*/
function requestToResponse(settings){
const defaultParams ={
timeout:45000,
headers:{
'X-Requested-With':'XMLHttpRequest',
'Content-Type':'application/json'
},
responseType:'json',
method:'POST'
}
Object.assign(defaultParams, settings)
return new Promise((resolve, reject)=>{
axios(defaultParams).then(res =>{
resolve(res)
}).catch(err =>{
reject(err)
})
})
})
}
/**
* blob下载（兼容IE）
* @param {String} content ⽂件内容
* @param {String} filename ⽂件名
如何下载javascript
*/
function downloadFile(content, filename){
const blob =new Blob([content])
// IE
if(window.navigator && window.navigator.msSaveOrOpenBlob){
window.navigator.msSaveOrOpenBlob(blob, filename)
}else{
imatateDownloadByA(ateObjectURL(blob), filename) }
}
/**
* 通过a标签模拟下载
* @param {String} href
* @param {String} filename
*/
function imatateDownloadByA(href, filename){
const a = ateElement('a')
a.download = filename
a.style.display ='none'
a.href = href
document.body.appendChild(a)
a.click()
vokeObjectURL(href)
}
// 下载excel
downloadExcel({
url:'/default/excel/export',
responseType:'arraybuffer'
})
responseType设置为arraybuffer
responseTyp设置成blob
不设置responseType，出现乱码
若引⼊mockjs，其拦截响应，重置了responseType，会出现乱码
总结
1. 此下载excel只适⽤于post请求，get请求交给浏览器⾃⾏解析处理
2. responseType必须设置成arraybuffer或blob
3. 下载excel时务必关闭mockjs之类的拦截响应的服务

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。