实现点击文件下载功能!
实现原理如下
//因为文件都是放在服务器上面的所有演示从服务器上下载
//本地的直接下载就行
DownContent(url){ //url:文件的地址
var name = url //为了获取文件的名称
var filename = name.lastIndexOf('\/')
name = name.substring(filename+1,name.length)
//下面开始发送ajax请求
axios.get(url,{
responseType:'blob',//转化为二进制
headers:{
'Content-Type': 'application/octet-stream'
}
}).then(res=>{
this.convertRes2Blob(res, name);//方法太长了分开一下
})
},
convertRes2Blob(response,name){
//将二进制转化为blob
let blob = new Blob([response])
if (typeof window.navigator.msSaveBlob !== 'undefined') {
// 兼容IE,window.navigator.msSaveBlob:以本地方式保存文件
window.navigator.msSaveBlob(blob, decodeURI(a))
} else {
//创建新的url并指向file对象或者Blob对象地址
const blobURL = window.URL.createObjectURL(blob) //变为一个地址
//创建a标签用于跳转至下载链接
const tempLink = document.createElement('a')
tempLink.style.display = 'none'
tempLink.href = blobURL
tempLink.setAttribute('download',decodeURL(a))//decodeURL:解码URL
// 兼容:某些浏览器不支持HTML5的download属性
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank')
}
// 挂载a标签
document.body.appendChild(tempLink)
tempLink.onclick()
//释放a和blob
document.body.removeChildren(tempLink)
window.URL.revokeObjectURL(blobURL)
}
}