视频单独下载
// 通过url 转为blob格式的数据(下载视频)
getVideoArrayBuffer(url, name) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.responseType = 'arraybuffer' // 返回类型blob
xhr.onload = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const blob = this.response
console.log(blob)
// 转换一个blob链接
// 注: URL.createObjectURL() 静态方法会创建一个 DOMString(DOMString 是一个UTF-16字符串)，
// 其中包含一个表示参数中给出的对象的URL。这个URL的生命周期和创建它的窗口中的document绑定
const downLoadUrl = window.URL.createObjectURL(new Blob([blob], {
type: 'video/mp4'
}))
// 视频的type是video/mp4，图片是image/jpeg
// 01.创建a标签
const a = document.createElement('a')
// 02.给a标签的属性download设定名称
a.download = name
// 03.设置下载的文件名
a.href = downLoadUrl
// 04.对a标签做一个隐藏处理
a.style.display = 'none'
// 05.向文档中添加a标签
document.body.appendChild(a)
// 06.启动点击事件
a.click()
// 07.下载完毕删除此标签
a.remove()
}
}
xhr.send()
},
通过类型判断下载视频还是图片
// 通过url 转为blob格式的数据(下载图片)
getImgArrayBuffer(url) {
const _this = this
return new Promise((resolve, reject) => {
// 通过请求获取文件blob格式
const xmlhttp = new XMLHttpRequest()
xmlhttp.open('GET', url, true)
xmlhttp.responseType = 'blob'
xmlhttp.onload = function() {
if (this.status == 200) {
resolve(this.response)
} else {
reject(this.status)
}
}
xmlhttp.send()
})
},
// 多张下载
moreLoad(type) {
// type:1,小区视频，2，小区图
const _this = this
const zip = new JSZip()
const cache = {}
const promises = []
const arr = type === 1 ? this.videoIds : this.chooseImgIds
console.log(arr)
for (const item of arr) {
const promise = _this
.getImgArrayBuffer(`${item.imageUrl}?t=${new Date().getTime()}`).then(data => {
console.log(data)
// 下载文件, 并存成ArrayBuffer对象(blob)
if (type === 1) {
const downLoadUrl = window.URL.createObjectURL(new Blob([data], {
type: 'video/mp4'
}))
// 视频的type是video/mp4，图片是image/jpeg
// 01.创建a标签
const a = document.createElement('a')
// 02.给a标签的属性download设定名称
a.download = this.detailObj.name + '视频'
// 03.设置下载的文件名
a.href = downLoadUrl
// 04.对a标签做一个隐藏处理
a.style.display = 'none'
// 05.向文档中添加a标签
document.body.appendChild(a)
// 06.启动点击事件
a.click()
// 07.下载完毕删除此标签
a.remove()
} else {
zip.file(`img/${data.size}.jpeg`, data, {
binary: true
}) // 逐个添加文件
cache[`img/${data.size}.jpeg`] = data
}
})
promises.push(promise)
}
if (type === 2) {
Promise.all(promises)
.then(() => {
zip.generateAsync({ type: 'blob' }).then(content => {
console.log(content)
// 生成二进制流
FileSaver.saveAs(content, '小区图片') // 利用file-saver保存文件 自定义文件名
})
})
.catch(res => {
_this.$message.error('文件压缩失败')
})
}
this.getVillageQueryDetailFun()
},
压缩包下载
获取content-disposition请求头，文件名
axios
.post(
`${getHttpPrefixUrl()}/vrHouseManager/download/${row.id}`,
{},
{
responseType: 'blob',
headers: {
Accept: 'application/json, text/plain, */*',
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
deviceType: 'pc',
serviceType: 2,
Authorization: `Bearer ${getToken()}`,
},
},
)
.then((response) => {
console.log('
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
