vue 文件下载
文件下载流程本文章针对于前端基于Blob对象创建文件实现文件下载直奔代码:// 首先创建数据对象const data = {hello: "world"};// 创建Blob并指定mine类型const blob = new Blob([JSON.stringify(data)], {type: "text/plain"});// 文件名命名const fileName = `${...
·
文件下载流程
本文章针对于前端基于Blob对象创建文件实现文件下载
直奔代码:
// 首先创建数据对象
const data = {hello: "world"};
// 创建Blob并指定mine类型
const blob = new Blob([JSON.stringify(data)], {type: "text/plain"});
// 文件名命名
const fileName = `${new Date().valueOf()}.doc`;
// 创建a标签,指定标签通过createObjectURL关联blob对象
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
// 通过download属性规定下载文件名
link.download = fileName;
// click触发下载
link.click();
// 通过revokeObjectURL释放url对象
window.URL.revokeObjectURL(link.href);
通过接口下载
真实项目中往往会通过接口实现文件的下载,以下下载结合vue实现:
<a href="#" @click="fileDownload">文件下载</a>
<el-progress :text-inside="true" :percentage="precent"></el-progress>
data () {
precent: 0,
data: {
id: 'xxxx'
}
},
methods: {
fileDownload () {
// 先获取后台下载文件需要的数据
this.axios.get('getCodeUrl').then(data => {
let token = data.token
// 将token放到头中,设置下载进度、请求参数、返回类型
this.axios({
url: 'downloadUrl',
method: 'post',
data: this.data,
headers: { 'FileToken': token },
onDownloadProgress: p => {
this.precent = Math.floor(100 * (p.loaded / p.total))
},
responseType: 'blob'
}).then(data => {
// 如果后端用encodeURI对文件名进行了编码,前端需用decodeURI进行解码(主要为处理特殊字符)
let fileName = decodeURI(data.headers.filename)
// 由于ie不支持download属性,故需要做兼容判断
if (navigator.appVersion.toString().indexOf('.NET') > 0) {
// ie独有的msSaveBlob属性,data.data为Blob文件流
window.navigator.msSaveBlob(data.data, fileName)
} else {
// 以下流程即为文章开始的下载流程
let url = window.URL.createObjectURL(data.data)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = fileName
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(link.href);
}
})
})
}
}
更多推荐
已为社区贡献6条内容
所有评论(0)