下载图片/视频

单击一个列表item进行下载视频/下载图片

//下载视频
//自己定义一个下载视频的方法
     videoDown(item) {
         this.downloadByBlob(item)
     }
     handleDownVideoFiles(item) {
            const that = this;
            if (!item) return;
            let url = item.recordPath;
            let name = item.name
            fetch(url).then(res => res.blob()).then(blob => {
                const a = document.createElement('a');
                document.body.appendChild(a)
                a.style.display = 'none'
                const url = window.URL.createObjectURL(blob);
                a.href = url;
                a.download = name + '视频.mp4';
                a.click();
                document.body.removeChild(a)
                window.URL.revokeObjectURL(url);
            }).catch(err => {
                alert("请求失败")
            })
        },
 //下载图片
 //自己定义一个下载图片的方法
        imgDown(item) {
            let imgUrl = item.url 
            let name = item.name
            this.downloadByBlob(imgUrl, name)
        }
        downloadByBlob(url, name) {
            var that = this
            let image = new Image()
            image.setAttribute('crossOrigin', 'anonymous')
            image.src = url
            image.onload = () => {
                let canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                let ctx = canvas.getContext('2d')
                ctx.drawImage(image, 0, 0, image.width, image.height)
                canvas.toBlob((blob) => {
                    let url = URL.createObjectURL(blob)
                    that.download(url, name)
                    // 用完释放URL对象
                    URL.revokeObjectURL(url)
                })
            }
        },  
        download(href, name) {
            let eleLink = document.createElement('a')
            eleLink.download = name
            eleLink.href = href
            eleLink.click()
            eleLink.remove()
        },     

点击批量选择（全选/全不选）

allCheckImg: false,
checkItemImg: []
// 控制全选不选
allchangeHander_Img() {
            this.checkHander_Img(1)
        },
// 单选
changeHander_Img(item) {
            console.log('444',item.check)
            this.checkHander_Img(2, item)
        },
// 选中功能
checkHander_Img(type, item) {
        // 把item里面的id放入checkItem中
        if (type === 1) {
          this.checkItemImg = []
          console.log('999shotList', this.shotList)
          for (let i in this.shotList) {
            if (this.allCheckImg) {  
                this.shotList[i].path = this.shotList[i].path.replace("http://171.34.76.171:8880","http://localhost/put")
                this.checkItemImg.push(this.shotList[i].path)
                
                this.shotList[i].check = true
            } else {
                this.shotList[i].check = false
                
            }
          }
        } else if (type === 2) {
            console.log('item', item)
          if (item.check) {
            let flag = true
            for (let i in this.shotList) {
                if(item.id == this.shotList[i].id){
                     this.shotList[i].check=item.check
                }
              if (!this.shotList[i].check) {
                flag = false
                break
              }
            }
            if (flag) {
                this.allCheckImg = true
            }
            item.path = item.path.replace("http://171.34.76.171:8880","http://localhost/put")
            this.checkItemImg.push(item.path)
            
          } else {
            let flag = true
            for (let i in this.shotList) {
                if(item.id == this.shotList[i].id){
                     this.shotList[i].check=item.check
                }
              if (!this.shotList[i].check) {
                flag = false
                break
              }
            }
            if (flag) {
                this.allCheckImg = true
            }
            this.checkItemImg.splice(this.checkItemImg.indexOf(item.id), 1)
            this.allCheckImg = false
          }
        }
        },

对文件进行批量下载

//要在html页面引入相关js文件
<!-- 批量下载相关js文件 -->
    <script src="http://stuk.github.io/jszip/dist/jszip.js"></script>
    <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
    <script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils-ie.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
//以下载图片为例
//checkItemImg用来存批量下载图片（mp4、图片、其他文件）的地址 
batchDownload_Img() {  
            console.log('点击了批量下载！', this.checkItemImg)
            let imgUrl = this.checkItemImg
            let name = this.shotList[0].name
            let img_name = name.substring(0,name.indexOf("_"))
            let imgName = img_name + '历史截图'
            handleBatchDownload(imgUrl, imgName)
            function getFile(url) {
                  return new Promise((resolve, reject) => {
                  axios({
                   method:'get',
                   url,
                   responseType: 'arraybuffer'
                  }).then(data => { 
                   resolve(data.data)
                  }).catch(error => {
                   reject(error.toString())
                  })
                  })
            }
            function saveAs(blob, name) {
                let a = document.createElement('a')
                let url = window.URL.createObjectURL(blob)
                a.href = url
                a.download = name
                a.click()
            }
            function handleBatchDownload(array,name) {
                   const data = array; // 需要下载打包的路径, 可以是本地相对路径, 也可以是跨域的全路径
                   const zip = new JSZip();
                   const cache = {};
                   const promises = [];
                   data.forEach(item => {
                       const promise = getFile(item).then(data => { // 下载文件, 并存成ArrayBuffer对象
                       const arr_name = item.split("/");
                       var file_name = arr_name[arr_name.length - 1] // 获取文件名
                       zip.file(file_name, data, { binary: true }) // 逐个添加文件 
                       cache[file_name] = data
                      })
                      promises.push(promise)
                    })
                    Promise.all(promises).then(() => {
                        console.log("----------")
                        zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
                            console.log("----------")
                            console.log(content)
                          saveAs(content, ""+name+".zip") // 利用file-saver保存文件
                        //   saveAs(content, "123.zip") // 利用file-saver保存文件
                        })
                    })
            }
        },