vue2 视频下载本地，图片压缩包下载

视频单独下载

// 通过url 转为blob格式的数据(下载视频)getVideoArrayBuffer(url, name) {var xhr = new XMLHttpRequest()xhr.open('GET', url, true)xhr.responseType = 'arraybuffer' // 返回类型blobxhr.onload = function() {if (xhr.readyState === 4 && xhr.status === 200) {const blob = this.responseconsole.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 = thisreturn 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 = thisconst zip = new JSZip()const cache = {}const promises = []const arr = type === 1 ? this.videoIds : this.chooseImgIdsconsole.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()},

vue2 视频下载本地，图片压缩包下载相关推荐

android glide本地图片,Glide下载图片并保存到本地
活不多说上代码: Observable.create(new ObservableOnSubscribe() { @Override public void subscribe(Observable ...
下载网页图片-批量下载网页图片软件免费
下载网页图片,今天给大家分享一款免费批量下载网页图片软件,支持任意格式的图片批量下载,只需要输入关键词或批量导入网页链接即可下载图片.批量下载任意网页上的图片,每个人都可以拥有各种高清图源.支持批量图 ...
bilibili 网页版如何下载视频到本地（不用下载工具）
1.打开需要下载的视频网页 2.在网址前面加上一个字母"i"或者"kan" 3.根据网页提示直接点击下载
java 下载url图片_java下载url图片链接
1.从之前写的一篇中改写了代码,从远程的url链接中下载图片,并对各种浏览器的中文文件名进行展示 /** * 根据url路径下载图片 * @param filename 处理下载时显示设置好的中文名 ...
php下载https图片,php下载https图片报错Failed to enable crypto
file_get_contents下载一个https图片,报错如下 Warning: file_get_contents(): Failed to enable crypto failed to op ...
分享免费的主流电商平台商品图片批量下载方法
最近一个新入行的微商MM找我帮忙,她正在优选商品,让我帮她下载她所看上的某巴巴和某宝上的每个商品的图片,基本需求是:看上哪个商品,就批量把该商品的所有介绍图片下载回来进行二次筛选处理. 需求不复杂,但 ...
将页面中的指定 div 下载为图片
文章目录 1. 下载页面div为本地图片 2. 下载页面 div 为本地图片并添加水印 1. 下载页面div为本地图片要将页面中的指定 div 下载为图片,可以使用 JavaScript 的 htm ...
java生成图片url_Java Springboot如何基于图片生成下载链接
现有一些图片在服务器上的链接,在浏览器中打开这些链接是直接显示在浏览器页面的形式. 现在需要生成这些图片的单独下载以及打包下载链接,即在浏览器中打开下载链接后弹出下载框提示下载.由于前端存在跨域问题, ...
fatkun｜图片批量下载
fatkun|图片批量下载 Fatkun图片批量下载插件简介 Fatkun图片批量下载插件特色介绍 Fatkun图片批量下载插件使用方法 Fatkun图片批量下载插件简介 Fatkun图片批量下载是一 ...

vue2 视频下载本地，图片压缩包下载

视频单独下载

通过类型判断下载视频还是图片

vue2 视频下载本地，图片压缩包下载相关推荐

最新文章

热门文章